Automatically Style Existing Visualforce Pages with Lightning Experience Stylesheets (Beta)

Easily control whether a page is styled with the look of Lightning Experience when viewed in Lightning Experience or the Salesforce1 app 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 Salesforce1 mobile app.
Note

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 or the Salesforce1 app, 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.Visualforce page not styled with the lightningStylesheets attribute. It is styled with the Classic UI.

Here is the same Visualforce page with the lightningStylesheets attribute set to true.Visualforce page with the lightningStylesheets attribute set to true. The UI matches Lightning Experience.

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.