As someone who has learned HTML and CSS some time around 2005 being bored during break time in school, 15 years later I am sometimes amazed at the things that can be done in pure HTML and CSS these days.

I have added a dark mode to this site that is displayed automatically depending on your OS settings and browser compatibility. The default is the light theme, with the dark theme only loading when your browser requests it. The nice thing here is that this is done in CSS only. I have edited the theme of this site so all colours are variables as follows:

:root {
    --bg-colour: #fff;
    --text-colour: #333;
}

There are obviously more definitions, but for illustrating the process this should be enough. These definitions are the default (the light theme) and defined at the top of the style sheet. If the browser now requests a dark mode these variables are overwritten:

@media (prefers-color-scheme: dark) {
    :root {
    --bg-colour: #202020;
    --text-colour: #ccc;
    }
}

This is probably not the most elegant solution – defining and then overwriting ten variables – but it gets the job done and does not depend on your browser understanding the @media query. The feature is somwhat recent, so you might not see the dark mode despite everything else on you system being set to use a dark colour scheme.

You might also have noticed that this site now has syntax highlighting. I have added highlight.js to this site using the Lightfair theme (which I have slightly adapted to support dark mode). As some posts contain a lot of code this is surely a useful addition. The Javascript is included locally so no external connections are established, something which I consider to be critical as I do not track you.