Is there a way to utilize localStorage to retain a classlist toggle status for a light/dark mode theme switch on the browser?

Question

Is there a way to utilize localStorage to retain a classlist toggle status for a light/dark mode theme switch on the browser?

I am currently working on a portfolio website that features a light/dark mode theme switch. The functionality of the switch is working properly, but it doesn't save the user's preference when they refresh the page or navigate to another section. I would like the website to remember the state of the theme selection. I understand that I need to utilize localStorage to achieve this, but I'm having trouble implementing it.

Website: www.hermanvulkers.com

JavaScript code for the theme switch:


button.addEventListener("click", function () {
    if (document.body.classList.contains("light-theme")) {
        // Switch from light mode to dark mode
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="Choose website theme">`;

    } else {
        // Switch from dark mode to light mode  
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="Choose website theme"></img>`;
        
    }
});

HTML code for the theme switch button:

<button class="themeswitcher" id="themeswitcher">
    <span>Dark</span>
    <img src="images/moon.png" alt="Choose website theme">
</button>

If anyone is able to provide assistance, I would greatly appreciate it. Thank you in advance!

javascript

Answer 1

Answer №1

This code appears to be overly complex.

Provided below is a comprehensive version:

window.addEventListener("load",function() {
  const stylePreference = localStorage.getItem("style");
  if (stylePreference) document.body.classList.toggle("light-style",stylePreference==="light")
  document.getElementById("styleswitcher").addEventListener("click", function () {
    const lightStyle = document.body.classList.contains("light-style")
    this.innerHTML = `<span>${lightStyle? 'Dark' : 'Light'}</span><img src="images/${lightStyle? 'moon' : 'sunrise'}.png" alt="Choose website style">`;
    document.body.classList.toggle("light-style");
    localStorage.setItem("style",lightStyle?"dark":"light");
  });
});

Answer 2

This code appears to be overly complex.

Provided below is a comprehensive version:

window.addEventListener("load",function() {
  const stylePreference = localStorage.getItem("style");
  if (stylePreference) document.body.classList.toggle("light-style",stylePreference==="light")
  document.getElementById("styleswitcher").addEventListener("click", function () {
    const lightStyle = document.body.classList.contains("light-style")
    this.innerHTML = `<span>${lightStyle? 'Dark' : 'Light'}</span><img src="images/${lightStyle? 'moon' : 'sunrise'}.png" alt="Choose website style">`;
    document.body.classList.toggle("light-style");
    localStorage.setItem("style",lightStyle?"dark":"light");
  });
});

Answer 3

Answer №2

If you want to incorporate it, follow these steps:

button.addEventListener("click", function () {
    if (document.body.classList.contains("light-theme")) {
        // Switch from light mode to dark mode
        window.localStorage.setItem('darkmodeTurnedOn', 'true');
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="Choose website theme">`;

    } else {
        // Switch from dark mode to light mode  
        document.body.classList.toggle("light-theme");
        window.localStorage.setItem('darkmodeTurnedOn', 'false');
        document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="Choose website theme"></img>`;
        
    }
});

When your site loads initially, ensure you have an event listener to activate or deactivate this feature, like so:

<body onload="setTheme">

In the setTheme function, carry out the following actions:

function setTheme(){
  if (window.localStorage.getItem('darkmodeTurnedOn') === 'true'){
     document.body.classList.remove("light-theme");
  }
}

Answer 4

If you want to incorporate it, follow these steps:

button.addEventListener("click", function () {
    if (document.body.classList.contains("light-theme")) {
        // Switch from light mode to dark mode
        window.localStorage.setItem('darkmodeTurnedOn', 'true');
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="Choose website theme">`;

    } else {
        // Switch from dark mode to light mode  
        document.body.classList.toggle("light-theme");
        window.localStorage.setItem('darkmodeTurnedOn', 'false');
        document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="Choose website theme"></img>`;
        
    }
});

When your site loads initially, ensure you have an event listener to activate or deactivate this feature, like so:

<body onload="setTheme">

In the setTheme function, carry out the following actions:

function setTheme(){
  if (window.localStorage.getItem('darkmodeTurnedOn') === 'true'){
     document.body.classList.remove("light-theme");
  }
}

Answer 5

Answer №3

To store an item in the localStorage, you can use the following code:

localStorage.setItem('key', value);

To retrieve the stored item, use:

let value = localStorage.getItem('key');

This code should handle the switching between light and dark modes:

    button.addEventListener("click", function () {
    if (document.body.classList.contains("light-theme")) {
        // Switching from light to dark mode
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = "<span>Dark</span><img src='images/moon.png' alt='Choose website theme'>";
        window.localStorage.setItem('darkMode', 'true');

    } else {
        // Switching from dark to light mode  
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = "<span>Light</span><img src='images/sunrise.png' alt='Choose website theme'></img>";
        window.localStorage.setItem('darkMode', 'false');
        
    }
});

In the beginning of your code, add this snippet:

let wasDarkMode = window.localStorage.getItem('darkMode');
if (wasDarkMode) {
    document.body.classList.toggle("light-theme");
    document.getElementById('themeswitcher').innerHTML = "<span>Dark</span><img src='images/moon.png' alt='Choose website theme'>";
} else {
    document.body.classList.toggle("light-theme");
    document.getElementById('themeswitcher').innerHTML = "<span>Light</span><img src='images/sunrise.png' alt='Choose website theme'></img>";
}

Answer 6

To store an item in the localStorage, you can use the following code:

localStorage.setItem('key', value);

To retrieve the stored item, use:

let value = localStorage.getItem('key');

This code should handle the switching between light and dark modes:

    button.addEventListener("click", function () {
    if (document.body.classList.contains("light-theme")) {
        // Switching from light to dark mode
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = "<span>Dark</span><img src='images/moon.png' alt='Choose website theme'>";
        window.localStorage.setItem('darkMode', 'true');

    } else {
        // Switching from dark to light mode  
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = "<span>Light</span><img src='images/sunrise.png' alt='Choose website theme'></img>";
        window.localStorage.setItem('darkMode', 'false');
        
    }
});

In the beginning of your code, add this snippet:

let wasDarkMode = window.localStorage.getItem('darkMode');
if (wasDarkMode) {
    document.body.classList.toggle("light-theme");
    document.getElementById('themeswitcher').innerHTML = "<span>Dark</span><img src='images/moon.png' alt='Choose website theme'>";
} else {
    document.body.classList.toggle("light-theme");
    document.getElementById('themeswitcher').innerHTML = "<span>Light</span><img src='images/sunrise.png' alt='Choose website theme'></img>";
}

Answer 7

Answer №4

This function allows you to easily manage the switch state by setting and retrieving it as needed. Instead of checking the state using "if (document.body.classList.contains("light-theme"))", you can simply use the local storage state. Make sure to set the default state to local storage if it is null.

const saveState = (key, value) => {
localStorage.setItem(key, JSON.stringify(value));
};

const getState = key => {
    try {
      return JSON.parse(localStorage.getItem(key));
} catch (error) {
    return null;
}
};

const removeState = key => localStorage.removeItem(key);

const checkStateExists = key => localStorage.getItem(key) !== null;

Answer 8

This function allows you to easily manage the switch state by setting and retrieving it as needed. Instead of checking the state using "if (document.body.classList.contains("light-theme"))", you can simply use the local storage state. Make sure to set the default state to local storage if it is null.

const saveState = (key, value) => {
localStorage.setItem(key, JSON.stringify(value));
};

const getState = key => {
    try {
      return JSON.parse(localStorage.getItem(key));
} catch (error) {
    return null;
}
};

const removeState = key => localStorage.removeItem(key);

const checkStateExists = key => localStorage.getItem(key) !== null;

Answer 9

Answer №5

Presenting a theme switcher that allows toggling between two or more themes using local storage functionality. Feel free to test it out and reach out if you have any queries! :)

document.addEventListener("DOMContentLoaded", function() {
    var themesList = ['dark-theme', 'light-theme', 'other-theme'];

    var theme = localStorage["theme"] || themesList[0]  /*if localStorage["theme"] exists || default is dark-theme*/;
    const updateTheme = (themeToUpdate = theme)=>{
        switch (themeToUpdate) {
            case 'light-theme':
                document.getElementById('themeswitcher').setAttribute('data-theme', themeToUpdate); // better to use data-* attributes for javascript use only
                document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="Choose website theme">`;
            break;
            case 'dark-theme':
                document.getElementById('themeswitcher').setAttribute('data-theme', themeToUpdate);
                document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="Choose website theme">`;
            break;
            case 'other-theme':
                document.getElementById('themeswitcher').setAttribute('data-theme', themeToUpdate);
                document.getElementById('themeswitcher').innerHTML = `<span>Other</span><img src="whatever/you/want.png" alt="Choose website theme">`;
            break;
        
            default:
            break;
        }    
    } 
    updateTheme(theme);

    button.addEventListener("click", function () {
         let nextIndex = (themesList.indexOf(theme) >= themeList.length - 1) ? 0 : themesList.indexOf(theme) + 1;
        theme = themesList[nextIndex];
        localStorage["theme"] = theme;
        updateTheme(theme);
    });
});

Answer 10

Presenting a theme switcher that allows toggling between two or more themes using local storage functionality. Feel free to test it out and reach out if you have any queries! :)

document.addEventListener("DOMContentLoaded", function() {
    var themesList = ['dark-theme', 'light-theme', 'other-theme'];

    var theme = localStorage["theme"] || themesList[0]  /*if localStorage["theme"] exists || default is dark-theme*/;
    const updateTheme = (themeToUpdate = theme)=>{
        switch (themeToUpdate) {
            case 'light-theme':
                document.getElementById('themeswitcher').setAttribute('data-theme', themeToUpdate); // better to use data-* attributes for javascript use only
                document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="Choose website theme">`;
            break;
            case 'dark-theme':
                document.getElementById('themeswitcher').setAttribute('data-theme', themeToUpdate);
                document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="Choose website theme">`;
            break;
            case 'other-theme':
                document.getElementById('themeswitcher').setAttribute('data-theme', themeToUpdate);
                document.getElementById('themeswitcher').innerHTML = `<span>Other</span><img src="whatever/you/want.png" alt="Choose website theme">`;
            break;
        
            default:
            break;
        }    
    } 
    updateTheme(theme);

    button.addEventListener("click", function () {
         let nextIndex = (themesList.indexOf(theme) >= themeList.length - 1) ? 0 : themesList.indexOf(theme) + 1;
        theme = themesList[nextIndex];
        localStorage["theme"] = theme;
        updateTheme(theme);
    });
});

Is there a way to utilize localStorage to retain a classlist toggle status for a light/dark mode theme switch on the browser?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Prevent the onclick function of a span element from being triggered when the user clicks on a dropdown menu contained within

What is the best way to apply a filter to an array of objects nested within another object in JavaScript?

Locate the div element containing specific text and remove the text from the

Tips for showing user data following form submission to a SQL database using React JS

What is the proper way to retrieve an object from a json file?

merging 4 arrays in a specified order, organized by ID

Incorporate various Vue.js components into the main parent component

What is the best way to trigger a function following a user's selection from a form-control on a webpage?

I am encountering an issue with the material ui dropdown component in my react native app where I am receiving a TypeError stating that it cannot read the property 'style' of undefined. This error is likely caused

Is there a way to stop the dropdown from automatically appearing in a DropDownList?

Displaying an external webpage within a Backbone application

Pass the identical event to multiple functions in Angular 2

Can Node.js fetch a PHP file using AJAX?

React.map does not retrieve the specific value

merge a pair of scopes within Angular

What is causing Mocha.js to be unable to locate the module?

Adjust font size using jQuery to its maximum and minimum limits

Display all data using JSONP

changing the core JavaScript of a keyboard plugin

The Facebook API's JavaScript SDK displays the status as 'connected' even after logging out