Has anyone written up how they do dark mode theming in their CSS? The theme I’ve been working on for Site.js has multiple colour themes, and the stylesheets (using CSS variables) are feeling a bit out of control… thinking I could learn from others’ approaches.

@laura are you looking for some kind of method/tutorial or just example CSS?

@tfardet preferably examples with justifications alongside them. I know how to do the CSS, I’m just not sure if I could organise my rules better.

@laura I have one project supporting dark mode, but it uses javascript, not css variables. I've created a nested object with color variables for dark and light and reference those in the code.

@laura In CSS I would create one file with color variables attached to body selector and then override those using the body:dark-mode selector. You could also split colors into hsl values as it makes manipulating those simpler in some cases and allows for quicker variations without creating one new variable for each variation.

@der_On I’ve done something similar. Though not with the HSL values. I used to do that with HSL on the old version of my site, but it became difficult to maintain.

@laura I've created a snippet that illustrates how I use a custom color based on HSL CSS color variables using in combination with tailwindCSS

@alvin thanks! Max shared it with me on Twitter. It’s a good insight!

@laura Let's bring Max here, or another IndieWeb instance 🙏

@laura This is one strategy I'm trying out to get my CSS variables under control. Not directly related to dark mode, but a general approach to make it easier to override the default values.

@rsolva I like the efficiency of that… I used to do something similar with HSL values on the old version of my site. Maybe it’s just me, but I find the more abstract my variables become, the harder it is when it comes to maintaining/adding to them later on.

@laura This example might even be to complex for a personal site, as it is intended to be used as a (Hugo) template that can be extended and built upon. I choose to end variants with numbers so it is possible to add nuances later; ie add --c-main-lighter-120 to a custom style sheet in a "child theme".

@laura The only challenge I have not solved yet is adding opacity into the mix (hsla). Manipulating colors with SASS solves most of these problems, but I want to use web native standards when possible and CSS variables does offer a lot of flexibility.

@rsolva weirdly enough, that was one of the points where maintainability became an issue on the old version of my site. I wanted a new value, in between two existing values, so wanted to use an alpha adjustment. I went through and changed all my variables to use HSLA just so I could make that one change. (Not the hardest thing, using find and replace.) But, from then, visualising the colours when I was tweaking my CSS was so tricky!!

@laura Yeah, using the inspector to look at or copy colors becomes much harder.

I have not done this much in my workflow as I try to stick to the pre-defined colors and rather use the darkened/lightenend versions, opacity being the exception. One way to "solve" this is adding variables based on the main/alt HSL values for specific uses, like I'v done at the beginning of my style sheet. I like the idea of a solid foundation which accommodates iteration on top of it.

@wion thanks! Always interesting to see how other people approach it.


You're welcome. Hope it wasn't too much of an expository bore.

@wion No! I love reading all the extra thinking behind what we do.

@laura Thanks for your blog post about it. Very interesting!

Sign in to participate in the conversation

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!