Storing theme state in localStorage

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

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)

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 = "🌚"
}

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