Easily control whether a page is styled with the look of Lightning
Experience when viewed in Lightning Experience, Salesforce for Android, Salesforce for iOS, or
Salesforce mobile web, with the lightningStylesheets
attribute. 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 Salesforce app.

Note

This release contains a beta version of Lightning Experience stylesheets for Visualforce,
which means it’s a high-quality feature with known limitations. Lightning Experience
stylesheets for Visualforce aren’t generally available unless or until Salesforce announces
its general availability in documentation or in press releases or public statements. We can’t
guarantee general availability within any particular time frame or at all. Make your purchase
decisions only on the basis of generally available products and features.

To style your Visualforce page to match the Lightning Experience UI when viewed in Lightning
Experience. Salesforce for Android, Salesforce for iOS, or Salesforce mobile web, set lightningStylesheets="true" in the <apex:page> tag. When the page is viewed in Salesforce
Classic, it doesn’t get Lightning Experience styling.

<apex:page lightningStylesheets="true">

Here is a standard Visualforce page
without the lightningStylesheets attribute. The page
is styled with the Classic UI.

Here is the same Visualforce page with
the lightningStylesheets attribute set to
true.

You can style most commonly used Visualforce
components with the lightningStylesheets attribute.
However, some components differ slightly 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.