In Winter’18 release, Salesforce has introduced lightningStylesheets attribute. To style the Visualforce page to match the Lightning Experience UI when viewed in Lightning Experience or the Salesforce app, We can set lightningStylesheets="true" in the apex:page tag. When the page is viewed in Salesforce Classic, it doesn’t get Lightning Experience styling.
Here is a standard Visualforce page with the lightningStylesheets="true" attribute in Classic View and Lightning View.
Visualforce Page:
<apex:page standardController="Account" lightningStylesheets="true">
<apex:form>
<apex:pageBlock>
<apex:pageblockButtons location="bottom">
<apex:commandButton action="{!Save}" value="Save"/>
<apex:commandButton action="{!Cancel}" value="Cancel"/>
</apex:pageblockButtons>
<apex:pageBlockSection columns="2" title="Create Account">
<apex:inputField value="{!Account.Name}"/>
<apex:inputField value="{!Account.AccountNumber}"/>
<apex:inputField value="{!Account.Phone}"/>
<apex:inputField value="{!Account.Website}"/>
<apex:inputField value="{!Account.Type}"/>
<apex:inputField value="{!Account.Industry}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Visualforce Page Classic View:
Visualforce Page Lightning View:
As of Winter’18 release, the following Visualforce components support the lightningStylesheets attribute or don’t require styling.
analytics:reportChart apex:actionFunction apex:actionPoller apex:actionRegion apex:actionStatus apex:actionSupport apex:areaSeries apex:attribute apex:axis apex:barSeries apex:canvasApp apex:chart apex:chartLabel apex:chartTips apex:column apex:commandButton apex:commandLink apex:component apex:componentBody apex:composition apex:dataList apex:dataTable apex:define apex:detail apex:dynamicComponent apex:enhancedList apex:facet apex:flash apex:form apex:gaugeSeries apex:iframe apex:image apex:include apex:includeLightning apex:includeScript apex:inlineEditSupport apex:input apex:inputCheckbox apex:inputField apex:inputFile apex:inputHidden apex:inputSecret apex:inputText apex:inputTextArea apex:insert apex:legend apex:lineSeries apex:listViews apex:map apex:mapMarker apex:message apex:messages apex:outputField apex:outputLabel apex:outputLink apex:outputPanel apex:outputText apex:page apex:pageBlock apex:pageBlockButtons apex:pageBlockSection apex:pageBlockSectionItem apex:pageBlockTable apex:pageMessage apex:pageMessages apex:panelBar apex:panelBarItem apex:panelGrid apex:panelGroup apex:param apex:pieSeries apex:radarSeries apex:relatedList apex:remoteObjectField apex:remoteObjectModel apex:remoteObjects apex:repeat apex:scatterSeries apex:scontrol apex:sectionHeader apex:selectCheckboxes apex:selectList apex:selectOption apex:selectOptions apex:selectRadio apex:stylesheet apex:tab apex:tabPanel apex:toolbar apex:toolbarGroup apex:variable chatter:feed chatter:feedWithFollowers chatter:follow chatter:newsFeed flow:interview site:googleAnalyticsTracking site:previewAsAdmin topics:widget