Sorry, we don't support your browser.  Install a modern browser

Theme switcher based on OS setting (ios,mac,android)#177

I

I want to switch between two themes (dark/light) based on the system setting of OS.

5 months ago

Hi there! You can create a dark theme like you normally would using the color editor, then use the prefers-color-scheme media feature to target this theme:

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

It sounds like an idea for a tutorial 👍

5 months ago
I

I already creeated a dark theme, but I don’t know how to switch. Because it’s data-theme attribute, I don’t know how to switch. Perhaps with JavaScript? A tutorial will be also great.

5 months ago

You shouldn’t need JavaScript. You can try replacing the [data-theme=”{themeName}”] selector with the prefers-color-scheme media feature. I’ll work on a tutorial because there could be more to it to really create a great looking dark theme.

5 months ago

I’m archiving this because it’s an idea for a tutorial more than a component idea. We’ll work on the tutorial though 👍

5 months ago
Changed the status to
Archived
5 months ago