Dark and Light theme switcher using CSS variables and pure JavaScript — zocada

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.

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;
}

Note that CSS variables will always start with -- in front of their names. Let’s throw them into a style-sheet file and link it to a sample HTML file.

styles.css

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

We should be able to get something like this.

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.

index.html

Result? Welcome to the Dark Side!

Adding some CSS styling, we get the final outcome as.

Originally published at https://zocada.com.