Portrait of William via Gravatar

William Huster

A Small Time CTO Near You

I Support Your Dark Mode Preference

I personally prefer dark mode and have set that as my default theme on my computers and mobile phones.

Well, I finally updated this blog to respect - dear reader - your dark mode / light mode preference, based on your browser configuration. It was surprisingly easy!

The first step is to add this meta tag to the <head> tag.

<meta name="color-scheme" content="dark light" />

If you don’t have any CSS, then that should “just work” in modern browsers.

In your CSS, you can do this to first check for dark/light mode support and then add custom style overrides for dark mode:

@supports (color-scheme: dark light) {
  @media screen and (prefers-color-scheme: dark) {
    /* Dark theme styles go here */

Depending on how much CSS you have, this could be hard…

With my blog, I’m shooting for 100% on Google Pagespeed insights, and so I’m trying to keep CSS to a minimum. My light mode styles are defined first as the default and then the @supports and @media queries override those styles as needed for dark mode.