This is a follow up to the 'How to create a dark\light mode switch in CSS and Javascript' article where we showed how to create a dark theme for your website and use a switch element to toggle it.

In this article, we want to show you how to save the user theme selection so that it's preserved while navigating the website.

We'll make use of the Local Storage, an API that allows you to store key-value pairs of data that persist with page reloads as well as when the browser window is closed and reopened.

The basic idea is: when the user selects the dark theme, we save this selection and store it within the browser (using the Local Storage); when the page is loaded, we check to see if a theme selection was previously made and update the website interface accordingly.

⚠️ Note: the following code is based on the result of the 'How to create a dark\light mode switch in CSS and Javascript' article. Make sure to read that article or download the source files on GitHub.

First, let's save the theme selection when the user interacts with the theme switcher:

var themeSwitch = document.getElementById('themeSwitch');
if(themeSwitch) {
  themeSwitch.addEventListener('change', function(event){
    resetTheme(); // update color theme
  });

  function resetTheme() {
    if(themeSwitch.checked) { // dark theme has been selected
      document.body.setAttribute('data-theme', 'dark');
      localStorage.setItem('themeSwitch', 'dark'); // save theme selection 
    } else {
      document.body.removeAttribute('data-theme');
      localStorage.removeItem('themeSwitch'); // reset theme selection 
    } 
  };
}

When the checkbox status changes (checked/unchecked):

• we update the data-theme attribute of the body element to apply the correct theme;
• we store the themeSwitch key (and set it to 'dark') if the dark mode is selected or remove it if the user goes back to the default color theme.

Now we need to define an initTheme function (called when the page is loaded) that checks for the themeSwitch key value:

var themeSwitch = document.getElementById('themeSwitch');
if(themeSwitch) {
  initTheme(); // on page load, if user has already selected a specific theme -> apply it

  themeSwitch.addEventListener('change', function(event){
    resetTheme(); // update color theme
  });

  function initTheme() {
    var darkThemeSelected = (localStorage.getItem('themeSwitch') !== null && localStorage.getItem('themeSwitch') === 'dark');
    // update checkbox
    themeSwitch.checked = darkThemeSelected;
    // update body data-theme attribute
    darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') : document.body.removeAttribute('data-theme');
  };

  function resetTheme() {
    if(themeSwitch.checked) { // dark theme has been selected
      document.body.setAttribute('data-theme', 'dark');
      localStorage.setItem('themeSwitch', 'dark'); // save theme selection 
    } else {
      document.body.removeAttribute('data-theme');
      localStorage.removeItem('themeSwitch'); // reset theme selection 
    } 
  };
}

That's it! Now the theme selection is preserved while navigating through the website.

You can download the final project on Github.

If you have suggestions on what we could improve, get in touch! Any feedback is welcome.