Dark Mode

30th January 2022

Dear front-end developer: please consider supporting dark mode.

It has quietly slithered its way to being supported on all browsers on all major operating systems. The browsers can read the user preference from the OS directly. There are three major options: light mode, dark mode, or switching between them dynamically during the day.

Personally speaking, the automatic switching between the modes based on the time of the day feels much better than Night Shift alone.

It's really easy to add support to your web page, as there is a single media query: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme. (Previously, MDN itself lacked support for dark mode and flashbanged you with this link. That is no longer a concern.)

As of writing this, only the really big sites like Google, Twitter, GitHub and StackOverflow have added support for OS-level dark mode so far. But I can feel the tide turning.

If you have all your CSS colors defined as variables within the :root pseudoclass (another huge victory for the web), it could literally be just one more CSS rule. It was in the case of this very blog.

(Saving and adapting an old tweet from https://twitter.com/eagleflo/status/1487892056722886660.)