How to Implement a Dark Mode Switch in Your Web Apps

Add color scheme responsiveness to your web app

Photo by Caleb Woods on Unsplash

Dark mode (aka a light-on-dark color scheme) has become very popular in the past few years. It’s arguably easier on the eyes and battery and it’s supported by all major operating systems for desktop and mobile devices.

In this article, I’ll show you how you can make your web application responsive to the color scheme chosen by the user at the operating system level as well as adding a color scheme switch that remembers the user’s choice by saving it in the browser’s local storage.

Table of Contents

· prefers-color-scheme
  ∘ Pro-tip
· Dark mode switch
· Remembering user’s choice
· Further Reading

prefers-color-scheme

Just as we use CSS media queries to make our web applications responsive to screen resolutions, so we can also use media queries to add responsiveness to the user’s preferred color scheme.

body { 
  background: white; color: black;
}
@media (prefers-color-scheme: light) {
  body { 
    background: white; color: black;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background: black; color: white;
  }
}

You can see it live in the code sandbox below:

Pro-tip

For testing purposes, you can force the value to be light or dark via Chrome developer tools.

Open DevTools (F12), press shift+cmd/ctrl+P to run a command, type prefers, and select an option:

You can also find these options by clicking on the three vertical dots on the right, then More Tools > Rendering.