Automatic lightning style alignment for visualforce pages

Automatic lightning style alignment for visualforce pages, salesforce lightning, sfdcpanda, sfdc panda,salesforce tutorial, salesforce examples, salesforce aura :if, conditional aura:if, lightning examples, sales cloud examples, salesforce service cloud

Winter ’18 Release note- Automatic lightning style alignment for vf pages

Saesforce introduced lightningStylesheets attribute to control whether a page is styled with the look of Lightning Experience when viewed in Lightning Experience or the Salesforce1 app.

Previously, restyling a page for Lightning Experience involved searching the SLDS reference site for matching components and altering your code.

The new attribute gives unstyled Visualforce pages the Lightning Experience look automatically. This feature is available in Lightning Experience and all versions of the Salesforce1 mobile app.


To style your existing Vf page to match with lightning experience set lightningStylesheets=”true” in the <apex:page> tag.

<apex:page lightningStylesheets="true">

After setting this attribute lightningStylesheets="true" it won't be applied to salesforce classic

However, some components has difference in style from Lightning Experience.

  • For example, <apex:selectOptions><apex:selectRadio><apex:inputFile>, and some <apex:inputField> elements use the browser’s default styling instead.

Commonly used Visualforce components that don’t require styling, such as

  • <apex:form><apex:outputText>, and <apex:param>, are still supported.


$User.UITheme and $User.UIThemeDisplayed :- 

The difference between the two visualforce global variables is that $User.UITheme returns the look and feel the user is supposed to see, while $User.UIThemeDisplayed returns the look and feel the user actually sees.

For Instance, user may have preference and permission to Lightning look and feel but if suppose browser( Like old version of IE’s) doesn’t supports lightning experience means this global variable $User.UIThemeDisplayed can be conditionally rendered to return a different value (like classic look and feel)

Note : This one still in Beta stage.

For more on SOQL and SOSL :-


1 Comment

  1. Hi

    I have a question, if we use the beta attribute LightningStylesheet=”true” in a visualforce page.Can we able to include those visualforce pages in a managed package.

Leave a Reply

Your email address will not be published.