Easiest way to do a dark theme with CSS vars (and JS!)

#css #javascript

1. Set up your HTML

<body>
    <div class="container">
      <h1>My beautiful theme</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Repellat nihil nisi quidem pariatur optio iste vero id velit deleniti tenetur, sit deserunt.
      </p>
      <button id="theme-switcher">Switch theme!</button>
    </div>
</body>

We will use a simple button so that our users can change the theme.

2. Set up your CSS, using vars

:root {
  --background: #f7fafc;
  --container: #edf2f7;
  --text-primary: #1a202c;
}

.dark {
  --background: #4a5568;
  --container: #2d3748;
  --text-primary: #f7fafc;
}

body {
  background-color: var(--background);
  font-family: sans-serif;
  color: var(--text-primary);
}

.container {
  background-color: var(--container);
  padding: 10px;
  text-align: center;
}

The :root variables will be those used by default when the page loads, and .dark' matches the dark theme.
NB: You can define as many themes as you want

Now, if you apply the class "dark" to the body:

3. Set up the "switch theme" button

 const themeSwitcher = document.getElementById('theme-switcher');
      themeSwitcher.addEventListener('click', function() {
          document.body.classList.toggle('dark'); 
      })

We simply add an event listener on the button to change the theme on click! Now, if you click on the button, it works!

4. Save the user's choice in localStorage

First, add this line on the eventListener:

localStorage.setItem('theme', document.body.classList);

When the user changes the theme, we save it into localStorage.
Then, at the top of the script:

if(localStorage.getItem('theme') === "dark") { 
    document.body.classList.toggle(localStorage.getItem('theme'));
}

Now, as soon as the user visits your site, the theme he has chosen will be automatically applied!
You can find the code here: https://jsfiddle.net/03h84v6m/1/

🦄

Top comments (6)

Carlos Garcia ★ • Mar 12 '20

This is indeed a very simple solution to a problem that can get too big. With my last employer we needed to implement a dark theme for accessibility, and this was my very first option to use.

Sadly we needed to support IE11 users (yes, in 2019). There were other proposals but nothing was as effective and easy as this one. Sadly I had to leave the company before I saw the dark theme being implemented, so I have no idea how they solved their problem to give more insight.

Corentin • Mar 12 '20

Yes unfortunately CSS variables are not implemented in IE. There are other ways to do this, such as creating a second CSS file containing our dark theme, but it's not really ideal either. :(