Don't succeed to switch to light mode with John tutorial

Question

Hi everyone, I'm trying to get to grips with Webstudio to make a landing page (I have a SaaS prototype to present). So it's not for making a complete site. I've simply duplicated a template from the https://marketplace-ascend.wstd.io/ marketplace and I'm just trying to change the colour scheme. I'm following this tutorial on John's Youtube channel: https://www.youtube.com/watch?v=EeLoBZvlygI I apply this code in the CSS variables to switch to light mode:--foreground-primary: var (--gray-10);
--foreground-muted: var (--gray-7);
--background-primary: var(--gray-0);
--background-secondary: var(--gray-3) ;
--background-accent: var (--gray-10);But it doesn't give the desired effect. I don't really understand how I'm supposed to do it.

John Siciliano · Answer

What happened? Not sure how to help if I don't know what result you got

John Siciliano · Answer

Though I see there is a space after var which is incorrect

Bastien · Answer

Should be like this ?--foreground-primary: var(--gray-10);
--foreground-muted: var(--gray-7);
--background-primary: var(--gray-0);
--background-secondary: var(--gray-3) ;
--background-accent: var(--gray-10);

Bastien · Answer

Indeed. So in fact it works but it gives a rather chaotic light mode. Is there any way of choosing better colours to transform this magnificent theme into a light mode?

John Siciliano · Answer

Yeah, choose better colors 😉Play with the colors and see what works. AI can help choose colors too

Bastien · Answer

Thank you. What elements should I give to an AI so that it gives me back a better light mode ?

John Siciliano · Answer

I would provide it all your alias variables (e.g. --foreground, background, etc) and your color palette like --gray-1-12 etc

Bastien · Answer

There is no place where this list is immediately available for a copy / paste am I right ?

John Siciliano · Answer

css preview bottom left

Bastien · Answer

actually with all the gradients and backgrounds it makes it quite difficult to turn it light mode. Is there any template for SaaS with Cfraft that would be more light mode friendly ?

Bastien · Answer

the AI gave me that and it does not work well either :--foreground-primary: var(--gray-9);
--foreground-muted: var(--gray-6);
--background-primary: var(--gray-0);
--background-secondary: var(--gray-2);
--background-accent: var(--purple-6);
--foreground-accent: var(--purple-6);
--foreground-border: var(--gray-4);

John Siciliano · Answer

The long tutorial I did on YouTube was a saas build that is light

John Siciliano · Answer

https://webstudio.is/marketplace/templates/nova

Join the Webstudio community

Don't succeed to switch to light mode with John tutorial