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 here's a roundup, and prefer dark is in there too https://css-tricks.com/platform-news-prefers-contrast-mathml-is-and-css-background-initial-values/
@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 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 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.
The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!