This weekend I added dark mode support to this website. It uses prefers-color-scheme, which is a very new standard for browsers to request light or dark themes.
This feature is currently only available in Safari tech preview, though Chrome (status) and Firefox (status) also have it under consideration.
Why implement such an early feature? I’m a big fan of dark modes, and I suppose this is adding my vote of support for the feature. A personal website like this is also a great space to play with emergent technologies.
Adding dark mode support wasn’t too difficult. I started by defining both light and dark colors for each major component (eg. sidebar, links) and assigning those to variables. Previously I used SASS variables to store information, but because they need to be updated on the client I’ve moved to CSS custom properties. These can be dynamically assigned inside media queries, which allows for setting colors based on user preference.
It was a fairly easy change to make and I’m pleased with the result. I hope to see improved browser support for this feature in the coming months.