zocada
Theme switcher cover

Dark and Light theme switcher using CSS variables and pure JavaScript

CSS variables give an exceptional ability to build themes and easy theme switching for websites. Changing color schemes of modern websites becomes much easier using plain CSS and a few lines of JavaScript. Let’s take a look at building a simple theme switcher using CSS-variables and pure JavaScript. This approach makes it easier to implement theme switching in any front-end frameworks. We’ll also have examples on implementing the theme switcher on React.js and Vue.js.

Setting up color schemes for Dark and Light themes

Using CSS variables, we need to create two classes defining all the colors that are being used in our style sheets for two different themes. In our case, we’ll create theme-light and theme-dark classes. You can use the same methodology to create any number of color schemes and have not just two but, tons of different themes to be used on your website.

CSS classes representing the colors

.theme-light {
  --color-primary: #0060df;
  --color-secondary: #fbfbfe;
  --color-accent: #fd6f53;
  --font-color: #000000;
}

.theme-dark {
  --color-primary: #17ed90;
  --color-secondary: #243133;
  --color-accent: #12cdea;
  --font-color: #ffffff;
}

 

 

Let’s throw them into a stylesheet file and link it to a sample HTML file.

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.theme-light {
  --color-primary: #0060df;
  --color-secondary: #fbfbfe;
  --color-accent: #fd6f53;
  --font-color: #000000;
}

.theme-dark {
  --color-primary: #17ed90;
  --color-secondary: #243133;
  --color-accent: #12cdea;
  --font-color: #ffffff;
}

.container {
  display: flex;
  width: 100%:
  height: 100%;
  background: var(--color-secondary);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container h1 {
  color: var(--font-color);
}

.container button {
  color: var(--font-color);
  background: var(--color-primary);
  padding: 10px 20px;
}

 

And a smaple HTML file to view the example. To set the default theme, set the class of html to the theme name.

<!DOCTYPE html>
<html lang="en" class="theme-light">
<head>
    
    
    Document
    
</head>
<body>
    

Theme Switcher

</body> </html>

 
We should be able to get something like this.
sample switcher

Using Javascript to change the theme programmatically

There are a few things we need to do to have the ability to change the themes programmatically, and for saving the chosen theme in localstorage so that whenever a user comes back to our website, the website should use the theme previously selected by the user.

// function to set a given theme/color-scheme
function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
}

// function to toggle between light and dark theme
function toggleTheme() {
    if (localStorage.getItem('theme') === 'theme-dark') {
        setTheme('theme-light');
    } else {
        setTheme('theme-dark');
    }
}

// Immediately invoked function to set the theme on initial load
(function () {
   if (localStorage.getItem('theme') === 'theme-dark') {
      setTheme('theme-dark');
   } else {
      setTheme('theme-light');
   }
})();

 

Let’s include these javascript functions inside a script tag inside the HTML file, and you will be able to call these functions anywhere in the project by referencing from the window object, no matter what framework you use. For now, let’s attach a click-listener to the button to call the toggleTheme() function. The final HTML file with the script should look somewhat like this.

<!DOCTYPE html>
<html lang="en" class="theme-light">

<head>
    
    
    Document
    
</head>

<body>
    

Theme Switcher

</body> </html>

 

Result? Welcome to the Dark Side!

Adding some CSS styling to it, we get our final outcome ­čÖé

See the Pen
xxKNEGM
by Musthaq Ahamad (@haxzie)
on CodePen.

haxzie

Community Lead with a demonstrated history of working in a non-profit organization. Skilled in Python, Public Speaking, Graphic Design, Writing, and Android Development. Strong community and social services professional with a Bachelor's degree focused in Computer Science from Sahyadri College of Engineering and Management.