Don't succeed to switch to light mode with John tutoria...

At a glance

A community member is trying to create a light mode for a landing page using Webstudio. They have duplicated a template from the Webstudio marketplace and are trying to change the color scheme by applying CSS variables. However, the desired light mode effect is not achieved. The community members discuss potential solutions, such as choosing better colors, using an AI to help select colors, and finding a more light mode-friendly template. There is no explicitly marked answer, but the community members suggest trying different color combinations and exploring a specific template called "Nova" that may be more suitable for a light mode SaaS website.

Useful resources

BBastien

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.

13 comments

JJohn Siciliano

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

JJohn Siciliano

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

BBastien

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);

BBastien

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?

JJohn Siciliano

Yeah, choose better colors 😉

Play with the colors and see what works. AI can help choose colors too

BBastien

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

JJohn Siciliano

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

BBastien

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

JJohn Siciliano

css preview bottom left

BBastien

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 ?

BBastien

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);

JJohn Siciliano

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

JJohn Siciliano

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

Add a reply

Join the Webstudio community

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