+ Start a Discussion
Nicolás KacowiczNicolás Kacowicz 

I have a Visualforce page with lightningStylesheets true but on force.com site is still classic

Hello, I have a Visualforce page that has lightningStylesheets="true" and when I click 'preview' I see it as a lightning page, but I also have a force.com site that has this Visualforce page and when I open it through the Anonymous Chrome it shows Classic instead of Lightning.

Thanks!
Raj VakatiRaj Vakati
Add the below code to the header and try. Please share the code to see the issue
<head>
  <apex:slds /> 
</head>

 

 
jonathan.wieseljonathan.wiesel
Have you managed to solve the issue? I'm in the same situation
Nicolás KacowiczNicolás Kacowicz
Sorry, I have not tried again. I just was trying to test some stuff but I got real work to do haha.
Brandon SolerBrandon Soler
I have the exact same issue occurring, has anyone solved the problem?
Jorge Castro EscuderoJorge Castro Escudero
I have same issue and the solution proposed <apex:slds /> is not working. The styles shown are a mixture of lightning and classic.
Michael YoccaMichael Yocca
`lightningStylesheets="true"` only load the needed css when the user's theme is in lightning. If they switch to classic and load your page salesforce doesn't include the required files. Kind of hacky but worth a try, if you inspect the sources panel from the browser developer console you can grab the files/css they include and include those in your visualforce page.

`<apex:slds />` just loads the same design resources you can find from the lightning design system, which styles the blueprints/semantic markup and classes. Visualforce uses a lot of outdated server side generated html that is different from the selectors targeted by slds. lightningStylesheets includes special css that targets the outdate markup and selectors to make it look and feel like lightning. 
Michael YoccaMichael Yocca
I can confirm this does in fact work at this current time with Summer '19. Just look through the sources and find the slds/css and there should be two sub folders each containing a css file named, 'slds.css'. Look through both and you'll want to save the file with class name/ selector, `.slds-vf-scope` within the file. That's the one that's included with lightningStylesheets=true. The other one is the one included with <apex:slds/>.