Style your existing Visualforce page with Lightning Experience

Style your existing Visualforce page with Lightning Experience

You can view your existing Visualforce page with lightning experience by simply adding a lightningStylesheets=”True” attribute in the tag.

This tag will work with Salesforce for Android, Salesforce for iOS, or Salesforce mobile web.

Example:-

Existing VisualForce page (Without lightningStylesheets Tag)

<apex:page standardController="Contact">
    	<apex:form >    
		<apex:pageBlock title="Edit Contact ">
			<apex:pageBlockSection >
				<apex:inputField value="{! Contact.FirstName}"/> 
				<apex:inputField value="{! Contact.LastName}"/>  
				<apex:inputField value="{! Contact.Email}"/>         
			</apex:pageBlockSection>
			<apex:pageBlockButtons >
				<apex:commandButton action="{! save }" value="Save" />        
			</apex:pageBlockButtons>
		</apex:pageBlock>
   	 </apex:form>
</apex:page>

With lightningStylesheets Tag:

<apex:page standardController="Contact" lightningStylesheets="true" >
    <apex:form >
    
    <apex:pageBlock title="Edit Contact ">
        <apex:pageBlockSection >
            <apex:inputField value="{! Contact.FirstName}"/> 
             <apex:inputField value="{! Contact.LastName}"/>  
              <apex:inputField value="{! Contact.Email}"/>         
        </apex:pageBlockSection>
        <apex:pageBlockButtons >
            <apex:commandButton action="{! save }" value="Save" />        
        </apex:pageBlockButtons>
    </apex:pageBlock>    
   </apex:form>
</apex:page>