Some of you (well all of you, since there is only one other person reading this blog) might have noticed that this blog looks a bit different: It got dark 😱

Well at least for people who told their browser that they prefer the darkness.

Same goes for my homepage.

I added this feature 2 month ago. If you've seen it you might have also seen a little icon [1] in the upper left corner to switch the theme.

But I got a rid of it! 😱

Let me explain why:

To set the style to how the user configured their browser you can simply use the media query prefers-color-scheme. But what happens if the user wants to view my page in light-mode even though their browser is set to dark. There surely is an easy way to achieve this. Right?

RIGHT?!?!

WRONG!

There are several ways I came up with to do this. We could define our themes with CSS classes and set the class to use via JavaScript. But what about people who have JavaScript disabled?

Sigh

So basically I would have to first define the color scheme based on the media-query prefers-color-scheme and then define the same thing again with a class that is set via JavaScript to change it.

By the way I tried to do it without JavaScript with a checkbox and stuff but it's impossible to set the state of a checkbox without JavaScript.

The CSS I had to use was something along the lines of:

:root, :root.light {
    --link-color: #333;
    --bg-color: #fff;
    --bg-footer: #f0f0f0;
    --text-color: #000;
    --slider-color: #333;
}
:root.dark {
    --link-color: #ccc;
    --bg-color: #1c1c1c;
    --bg-footer: #1c1c1c;
    --text-color: #fff;
    --slider-color: #000;
}
@media (prefers-color-scheme: dark) {
    :root {
        --link-color: #ccc;
        --bg-color: #1c1c1c;
        --bg-footer: #1c1c1c;
        --text-color: #fff;
        --slider-color: #000;
    }
}

First of all: yay, I'm finally using CSS variables (even though their syntax sucks). But what is that? 3 blocks for 2 different styles? And the styles in the bottom two are the same m(

Well yes. I like that browsers, HTML and CSS get new features. But sometimes I have to wonder why those who make the decision don't seem to think far enough.

AFAIK it's not (yet) possible to "import" styles from a different selector (in sass you can use mixins for this). And it's also impossible to change the state of prefers-color-scheme with JavaScript.

So I don't think it's possible to use prefers-color-scheme and still have the theme changable without repeating yourself.

AND I DON'T WANT THAT. I want to keep it dry.

And the theme-switcher added several kb to the page just to have a feature that every browser should (and does, but hidden away in the dev tools) include!

If you want to see this page with the theme, you have to talk to your browser [2]!