How to Save Your Website’s Theme Using Local Storage

Last updated on 16 July 2025

Imagine spending hours designing the perfect dark mode or custom theme for your website, only to refresh the page and watch it instantly revert to the default look. I've been there and it’s really frustrating. Luckily, the fix is quite simple. This article is a step-by-step guide on how to save your website's theme using the localStorage property.

Note: This article will only focus on implementing the functionality of saving and retrieving the theme using localStorage and not on setting up and styling the theme toggle switch.

What is localStorage?

Simply put, the local storage feature allows websites to save and retrieve data from your browser. The data is saved even if the user reloads the page or closes the window. The great thing about localStorage is that you don’t need any backend logic to save data in the browser. It doesn’t need the help of any web server to work, making it simple to set up.

However, because it lacks the security features of web servers, it should never be used to store sensitive information like form data.

How does localStorage work?

There are different ways to interact with local storage. They are -

setItem(): This method is used to store data in local storage.
removeItem(): This method removes an item from local storage.
clear(): This method clears all data from local storage.

In this article, we are only going to look at the setItem() and getItem() methods.

The setItem() method

This method is used to store data in local storage. This method takes 2 parameters, a key and a value. You can give any name to your key as long as it does not exist in local storage. If the key already exists, then it will update its value to the new value.

Storing the theme using setItem()

Assume the theme toggle is a checkbox and is given an id attribute of ‘theme’. Once the checkbox is checked, an attribute of website-theme is set on the body element (makes the code readable) and the theme value is stored to local storage.

const themeToggle = document.getElementById('theme'); //Get the theme toggle checkbox element

themeToggle.addEventListener('change', () => {
	const newTheme = themeToggle.checked ? 'dark' : 'light'; // Determine the new theme based on whether the checkbox is checked or not
  
	document.body.setAttribute('website-theme', newTheme); // Set the 'website-theme' attribute on the body element to the new theme
  
	localStorage.setItem('theme', newTheme); // Save the new theme to localStorage
})

The getItem() method

As the name suggests, this method is used to get/retrieve the saved data from local storage. This method only takes 1 parameter, the key. If the key is found in the local storage, it’ll return the value of the key, else it will return null.

Retrieving the theme using getItem()

The stored theme is retrieved using the getItem() method. If the theme is retrieved, it is also crucial to ensure the checkbox is set to the correct state based on the retrieved theme. If the checkbox state is not correctly set, the theme may not switch as expected when the page loads.

const retrievedTheme = localStorage.getItem('theme'); // Retrieve the stored theme from localStorage

if(retrievedTheme) {
	themeToggle.checked = retrievedTheme === 'dark'; // Set the checked state of the themeSwitch checkbox based on whether the retrieved theme is 'dark'

Putting it all together

const themeToggle = document.getElementById('theme');
themeToggle.addEventListener('change', () => { 
	const newTheme = themeToggle.checked ? 'dark' : 'light';
	document.body.setAttribute('website-theme', newTheme);
	localStorage.setItem('theme', newTheme);
})

const retrievedTheme = localStorage.getItem('theme');
if(retrievedTheme) {
	themeToggle.checked = retrievedTheme === 'dark';
}

Lastly, localStorage is supported by all major browsers. Go use it confidently.

Deep dive into local storage

Some great resources to learn more about localStorage