Dark mode in a website with CSS

FWIW, your Posts/Demo/Resume links are laid out a bit oddly on my iPad.

Does not seem to work in Firefox for Android.

Mine too! Finally put up a personal site last month after not touching any web projects for a long while. I've checked out of a lot of social media and wanted my own place to put stuff and to poke around with javascript and web graphics.

One of the upcoming posts is going to cover handling dark mode for content. So far I've just used transparent backgrounds with no black or white drawing so that it's visible either way.

https://will.institute/

Not much on it yet, just been slowly working through the setup for doing a canvas with a responsive site.

Neat tidbit - the logo image is a single SVG in shades of dark gray, which doesn't work well on a dark background. You can apply image transformations in CSS under the dark mode media query to adapt things like this:

    img#wi-logo {
        filter: invert(100%) brightness(110%);
    }

This is the same tool that the linked post uses for desaturating images, but adding that invert is a useful tool for dark mode. Personally I wouldn't recommend general image desaturation, photos taking more focus against a dark background is a good look if you ask me. At least consider making it an opt-in setting instead of the default.

Same here: https://phili.pe/

I've used CSS variables though, which make it even simpler. E.g. I have `--page-background-color` and `--text-color-primary` that are set to a certain default value. In dark mode, these variables are set to other values, removing the need to redefine the actual selectors.

I recently added dark-mode support to a few sites. It took way more time then I thought it would. At first I thought "oh just add a few lines off CSS" but then ...

* Some diagrams had white backgrounds

Solution: remove the backgrounds so they are transparent

* Most diagrams had black lines/arrows which didn't look good on dark gray backgrounds

Solution: use CSS filter:invert for images

* Some images are photos not diagrams so inverting their colors doesn't work

Solution: Use a selector for svg only img[src$=.svg] and a class when manually needed

* Some svg diagrams have their colors referred to like "see the red object" in that text.

Solution: filter: invert(1) hue-rotate(180deg);

That makes the blacks become white but the colors kind of stay the same hues at least

* The are many interactive digrams on the sites.

Solution: All of those had to be refactored to not use hard coded colors but do something like

    const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)");
    const isDarkMode = darkMatcher.matches;
    const colors = isDarkMode ? darkColors : lightColors;

And draw everything with the appropriate colors. Its up to you if you want to trigger re-drawing if the user changes their preference

* Some text was color coded for to match the diagrams as in

    x-axis"

But now those colors looked bad on a dark background.

Even 5 months later I still find places I missed.