DEV Community

loading...
Cover image for Storing theme state in localStorage

Storing theme state in localStorage

vaishnavme profile image Vaishnav ・2 min read

Creating Dark-Light mode for website and storing user preferred theme state to local storage.

So, Earlier I wrote a post about creating Dark-Light mode theme for website. Explaining how it work, way to create it.
But, Problem with that code is when you refresh or if site have multiple pages and you go to another page, theme revert back to it's default theme. We don't want that .

Let's Solve this problem


I tweak original code.

Our HTML

Simple tiny HTML code.
<a type="button" class="nav-item theme" id="theme-toggle">🌚</a>

Now the CSS

// Default Light theme color pallet
:root {
    --bg-color: #ffffff; 
    --bg-light: #e3fdfd;

    --font-color:#1f2933;   
    --font-light: #000000;
}
// Dark theme color pallet
body.dark-theme {
    --bg-color: #111216; 
    --bg-light: #24252c;

    --font-color: #9999b3;   
    --font-light: #fff;
}
Enter fullscreen mode Exit fullscreen mode

The JavaScript part

const themeToggle = document.querySelector("#theme-toggle");

const currentTheme = localStorage.getItem("theme");
const pageTheme = document.body;

let isDark = true

if (currentTheme == "dark") {
  pageTheme.classList.add("dark-theme");
  themeToggle.innerText="🌞";
} else {
    themeToggle.innerText = "🌚"
}

function themeMode() {
    isDark = !isDark;
    isDark ? themeToggle.innerText = "🌚" : themeToggle.innerText = "🌞";
    pageTheme.classList.toggle("dark-theme");

    let theme = "light";
    if (pageTheme.classList.contains("dark-theme")) {
      theme = "dark";
    }
    localStorage.setItem("theme", theme);
}

themeToggle.addEventListener("click", themeMode)

Enter fullscreen mode Exit fullscreen mode

What is localStorage?

The localStorage properties allow to save key/value pairs in a web browser. The localStorage property is read-only.

  • For storing data to localStorage.

    localStorage.setItem("key", "value");

  • For reading data from localStorage.

    var lastname = localStorage.getItem("key");
    Learn more about localStorage

What is toggle?

toggle is method of DOMTokenList() interface.
It remove token from token list and return false.
If token doesn't exist, then it add token and return true.

What's happening here?

  • By default our theme is Light.

  • This part of code check if user already changed theme or has seleted theme, by getting theme data from localStorage.

const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
  pageTheme.classList.add("dark-theme");
  themeToggle.innerText="🌞";
} else {
    themeToggle.innerText = "🌚"
}
Enter fullscreen mode Exit fullscreen mode

themeToggle.innerText is our button. We are changing emoji if it's Light Mode then emoji is Moon🌚. and if it's Dark Mode then emoji is Sun🌞.

  • When we click our button to change theme, it add dark-theme class to body tag. Dark theme color pallet is applied to site.

  • It set's current theme to localStorage, using localStorage.setItem("theme", theme);


Here's pen

Discussion (0)

pic
Editor guide