DEV Community

Corentin
Corentin

Posted on

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

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:
Alt Text

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)

Collapse
 
crongm profile image
Carlos Garcia β˜…

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.

Collapse
 
corentints profile image
Corentin

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. :(

Collapse
 
janhommes profile image
Jan Hommes

But there is a pollyfill for IE11. Worked very well for me.

Thread Thread
 
corentints profile image
Corentin

Ok! That’s nice :)

Collapse
 
hasanaydins profile image
Hasan

.dark ? Don't we need add this class in html ?

Collapse
 
corentints profile image
Corentin

The .dark class must be applied only to the

in order to overide the :root variables !