Dark mode using prefers-color-scheme rule and CSS variables

Thu, 14 May 2020 09:33:01 +0000

In this article I’ll show you how to implement dark mode in your blog or site using CSS variables and how the toggle it automatically based on the users preferred color scheme.

CSS variables are a new way to make CSS more maintainable by defining reusable variables which are defined in one place and can be referenced in multiple other places.

For our dark mode example we’ll be changing the sites background and text colors when the user has set dark mode as preference at system level.

Usability on dev notes

Dark mode using prefers-color-scheme rule and CSS variables