Adding support for dark mode

Adding dark mode support for a website like this one was very straightforward. Mainly because of my choice of black and white as a colour scheme - there is a great talk by Heydon Pickering on the benefits of this style.

Here's the code in all it's glory:

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
  .logo, pre {
    filter: invert(1);
  }
}

The media query checks whether the visitor has their system colour scheme set to "dark" and, if so, swaps the background-color and color properties on the body around. I also invert the colors on the svg logo and the code blocks.

One thing I'll need to consider is that I'm not really offering choice with this approach as there isn't a way for the visitor to switch between light and dark mode on this site in particular without having to change their system preferences. I'll be looking to implement a theme switcher in the not-too-distant future but at least this offers more choice than no dark mode support at all.

← Back