Dark/Light Mode Toggle Question

Webweaving
1

So I finally got around to setting up a dark mode for my site. Currently it’s auto-switching based on the system setting. This is acceptable, but not ideal.

Selfish context: I use dark mode for most things, but prefer the light mode version of my site.

Based on what I’ve found thus far, a persistent toggle setting would require JavaScript. Is there a recommended implementation in 2025? Ideally one that would fallback gracefully in the event that a browser has disabled JS. Thanks in advance.

Notably, I’ve been reading through this one (2023); I haven’t found a more ‘modern’ one as of yet.

1 Like
3

This is how I implement it. It checks local storage first, if there is no setting there, it uses the system setting instead.

It works well. The only annoying part is having to code my color scheme into variables in css and JavaScript but it’s a minor nuisance at worst.

2 Likes
4

It works well. The only annoying part is having to code my color scheme into variables in css and JavaScript but it’s a minor nuisance at worst.

Have you tried setting the color-scheme property instead of setting the variables? It should override the color scheme reported by the media queries.

5

Thanks, appreciate the input. I wound up doing something similar :slight_smile:

1 Like