About Dark Mode

The Six Colors website is one of my favorites, not least because the contributors to the website also run one of my favorite podcast networks (The Incomparable). One thing I noticed about the website is that they have a dark mode. I thought it was triggered by the time of day, but now I think it might be because most of my devices are set to switch to dark mode at night.

Some quick research on MDN informed me about a very handy media query: prefers-color-scheme. Using this query, you can determine the prefered color scheme of the user’s device (light or dark) and adjust your website colors accordingly. I've already started doing this at work on my organization's main website – requiring a bit of CSS refactoring to use custom properties instead of SASS variables – and I also would like to do the same for this blog. It’s a relatively simple style update. And for users who care about these sorts of things (like I do), the result is delightful.