Dark mode

At a glance

The community member is looking for a way to add a dark theme toggle in the Advance panel of a platform, preferably using a native solution rather than an HTML embed. The comments suggest that using an HTML embed is currently the only possible solution. Another community member mentions a recent CSS feature, color-scheme: dark; and color: light-dark(blue, purple);, which could be a potential solution, but it is not supported by the platform's parser. The community members express interest in testing this CSS feature once it is supported by the platform.

Useful resources

MMilan Boisgard | Uncode School

Is there a way to add in the advance panel something like that [data-theme="dark"]? I'd like to use a dark theme and make a a toggle to switch between the differents theme but I cannot find to do that (an HTML embed is possible but I would prefer to use a native solution).

Thanks!

Attachment

13 comments

BBogdan

Only possible with html embed for now

MMilan Boisgard | Uncode School

ok thanks ! I will manage it with HTML Embed

MMilan Boisgard | Uncode School

all right, made a test it works fine

MMilan Boisgard | Uncode School

Attachment

BBogdan

Btw check this out

Plain Text

  :root {
    color-scheme: dark;
  }
  body {
    color: light-dark(blue, purple)
  }

MMilan Boisgard | Uncode School

Thanks I didn't know it. Seems a recent CSS feature and supported by all browser (https://caniuse.com/?search=light-dark).

According to you is it the best way to integrate light / dark theme on Webstudio?

BBogdan

Not supported by our parser either 😅

BBogdan

But I will look into fixing it

BBogdan

basically you will be able to specify light-dark() in color fields

BBogdan

and will be able to set color-scheme when necessary

MMilan Boisgard | Uncode School

It is my first time I would use it. I'm interested to test it!

MMilan Boisgard | Uncode School

Let me know when it will be live I'm interested (I'm working on the Craft Style Guide to improve it and add light/dark theme)

BBeto

I'm interested in this as well.

Add a reply

Join the Webstudio community

Dark mode