DEV Community

Cover image for Storing theme state in localStorage
Vaishnav
Vaishnav

Posted on

2 1

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay