When designing this blog, I wanted to keep things simple, working on the principle that improvement does not always mean adding things. I knew I didn't want a dark/light mode button or toggle, but I like the idea of a light and dark mode for a website. Instead of a toggle, this site shows a light or dark variation based on the user’s device preference for the colour scheme. This is achieved by using the @media (prefers-color-scheme: dark) media query, like this:

Then in the CSS I can use the color variable, on any element like this example for setting the background color of the body, the text colour and the link colour:

I also made four different themes, each with its own light and dark mode. These are the themes I made, and the one I went with was Oxford Blue 🙂

Himalaya

Kabul

Nero

Oxford Blue