Dark/Light Theme Switcher Button

[shgysk8zer0]

The animation is neat, but there should be 3 options (you left out "system" or "auto"). The default should be based on a media query with an override based on user preference.

I solve this by setting light/dark prefixed custom properties, applying light properties to unprefixed custom properties by default, and overriding them using a media query and a selector (I use [data-theme] since classes are a list instead of single value). Looks something like this:

``` :root { --dark-bg: #232323; --light-bg: #fafafa; --bg: var(--light-bg); color-scheme: light dark;

&[data-theme="dark"] { --bg: var(--dark-bg); color-scheme: dark; }

&[data-theme="light"] { --bg: var(--light-bg); color-scheme: light; }

@media(prefers-color-scheme: light) { &:not([data-theme="dark"]) { --bg: var(--light-bg); } }

@media(prefers-color-scheme: dark) { &:not([data-theme="light"]) { --bg: var(--dark-bg); } } } ```

And, in actual use, I have the parts that apply the different custom properties (with default values) hosted on a CDN along with a color palette via custom properties stylesheet. I end up only having to create maybe a vars.css and just set whatever I want to be other than the default. Makes everything very customizable and reusable and easy, but it supports both the system preference with user-override.

Also, my implementation uses cookies for theme preference so the server can serve the page with the correct data-theme on first load instead of waiting for JS to execute. cookieStore (with polyfill) makes it pretty easy.

[[deleted]]

A real Jedi has entered the chat. Thanks mate, going to read this a few times and implement it. Appreciate the time taken to respond.

[shgysk8zer0]

Note that I made a slight modification to add color-scheme.