I’ve been noticing more and more blogs and personal sites are allowing vistors to choose between dark and light themes to match their prefered reading experience.

As most sites, like mine, are light by default, the trend has been to offer an additional dark mode.

There’s an entire site dedicated to it in fact ↗

I really like this because it adds an element of personalization to the site and helps especially well with after-hours user experience.

Since I used SASS for my styles, I knew adding a dark-mode would be pretty straight forward. I’d use a SASS mixin to define all the colors for the dark theme and then create some sort of input for users to switch it on/off.

Fortunately, CSS’s media feature prefers-color-scheme meant that for now I didn’t even need an input. Instead, I’d be able to use the appearance defaults of the visitor’s device to decide which color scheme to use.

===

With about 30 minutes of work my site now changes color schemes to match your device’s preferences.

To test it out on Mac, go to System Preferences > General and under ‘Appearance’, select ‘Dark’, ‘Light’, ‘Dark’, ‘Light’, etc.

Hopefully this makes your visit here just a little bit better ;)