A simple way to set up a dark mode switch

By Todd Wilson January 26, 2019

Not long ago, I was noticing that some browsers were starting to enable the dark mode browsing through themes and extensions. Chrome recently released a “Dark Reader” extension and with the recent Mojave update in Mac OS, you get a system wide dark mode and this certainly will help alleviate the strain on the eyes while browsing in the dark.

Some sites have enabled this feature within the site and persist that setting to allow the user experience to be enjoyed within a customized dark mode style. By doing this, you get more freedom on how the site will render those colors and can override fonts and background shades based on the content. I decided to give this a try by using a simple CSS toggle button then adding a css-class to the wrapper element on the site.

css toggle switch showing on/off styling

A simple way to get this working with CSS is to use variables with a media query @media (prefers-dark-interface) :

root: {
  --text-color: DarkBlue;
  --back-color: Azure;
}
body { color: var(--text-color); background: var(--back-color)}
@media (prefers-dark-interface) {
  root: {
   --text-color: Azure;
   --back-color: DarkBlue;
  } 
}

For my purpose, I added a css-class to the wrapper element and started including the font color and background override styles. This way, later on I can use a media query when it becomes more standard and persist this setting further by using localStorage. Here’s a codepen example of the toggle component that I ended up using.

Additional Resources:
Dark mode in CSS
How to get dark mode working with css
How to use dark mode on your mac
Dark mode reader chrome extension

Custom web development services. Managed Hosting & WordPress Platform.