Refreshing a page will disable dark mode

Question

Refreshing a page will disable dark mode

I'm in the process of implementing a dark mode for my website using the code below. However, I've encountered an issue where the dark mode resets when refreshing the page or navigating to a new page. I've heard about a feature called localstorage in JavaScript that might help with this problem. If anyone is familiar with it, could you please share the method to resolve this?

<style>
body {background-color: white}
body.dark {background-color: black}
button {background-color: white; color: black}
body.dark button {background-color: black; color: white}
</style>
<script>
function toggleDark() {
  const body = document.querySelector('body');
  if (body.classList.contains('dark')) {
    body.classList.remove('dark');
  } else {
    body.classList.add('dark');
  }
}

document.querySelector('#darkmode').addEventListener('click', toggleDark);
</script>
<button id="darkbutton" class="darkmode" onclick="toggleDark();myFunction()">Toggle dark mode</button>

javascript html jquery css

Answer 1

Answer №1

To store data in JavaScript, consider using cookies or local storage. This allows you to retrieve the value even after refreshing the page. You can interact with local storage as shown below:

localStorage.setItem("theme", "light");

To access this data later, you can simply use:

localStorage.getItem("theme");

After refreshing the page, you will still be able to retrieve your theme setting.

Answer 2

To store data in JavaScript, consider using cookies or local storage. This allows you to retrieve the value even after refreshing the page. You can interact with local storage as shown below:

localStorage.setItem("theme", "light");

To access this data later, you can simply use:

localStorage.getItem("theme");

After refreshing the page, you will still be able to retrieve your theme setting.

Answer 3

Answer №2

The issue is arising because the user's choice is not being saved, causing it to reset to "light mode" each time the page loads.

To address this problem, you can store the data in localStorage or a cookie using JavaScript. This way, when the page is refreshed, you can retrieve the stored value and apply it to the document.

Using localStorage is recommended due to its ease of use compared to cookies with JavaScript.

The code snippet below demonstrates setting the key "theme" to "dark" with the setItem function, and retrieving it using the getItem function.

localStorage.setItem("theme", "dark");
localStorage.getItem("theme");

For more details on localStorage, refer to this helpful article on MDN: MDN localStorage Guide.

I have updated your code snippet below to incorporate these changes:


<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    body {background-color: white}
    body.dark {background-color: black}
    button {background-color: white; color: black}
    body.dark button {background-color: black; color: white}
  </style>
</head>
<body>
<button id="darkbutton" class="darkmode">Turn on dark mode</button>
<script>

const body = document.querySelector('body');
const button = document.querySelector('#darkbutton');
function toggleDark() {
  if (body.classList.contains('dark')) {
    body.classList.remove('dark');
    localStorage.setItem("theme", "light");
    button.innerHTML = "Turn on dark mode";
  } else {
    body.classList.add('dark');
    localStorage.setItem("theme", "dark");
    button.innerHTML = "Turn off dark mode";
  }
}

if (localStorage.getItem("theme") === "dark") {
  body.classList.add('dark');
  button.innerHTML = "Turn off dark mode";
}

document.querySelector('#darkbutton').addEventListener('click', toggleDark);
</script>
</body>
</html>

Answer 4

The issue is arising because the user's choice is not being saved, causing it to reset to "light mode" each time the page loads.

To address this problem, you can store the data in localStorage or a cookie using JavaScript. This way, when the page is refreshed, you can retrieve the stored value and apply it to the document.

Using localStorage is recommended due to its ease of use compared to cookies with JavaScript.

The code snippet below demonstrates setting the key "theme" to "dark" with the setItem function, and retrieving it using the getItem function.

localStorage.setItem("theme", "dark");
localStorage.getItem("theme");

For more details on localStorage, refer to this helpful article on MDN: MDN localStorage Guide.

I have updated your code snippet below to incorporate these changes:


<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    body {background-color: white}
    body.dark {background-color: black}
    button {background-color: white; color: black}
    body.dark button {background-color: black; color: white}
  </style>
</head>
<body>
<button id="darkbutton" class="darkmode">Turn on dark mode</button>
<script>

const body = document.querySelector('body');
const button = document.querySelector('#darkbutton');
function toggleDark() {
  if (body.classList.contains('dark')) {
    body.classList.remove('dark');
    localStorage.setItem("theme", "light");
    button.innerHTML = "Turn on dark mode";
  } else {
    body.classList.add('dark');
    localStorage.setItem("theme", "dark");
    button.innerHTML = "Turn off dark mode";
  }
}

if (localStorage.getItem("theme") === "dark") {
  body.classList.add('dark');
  button.innerHTML = "Turn off dark mode";
}

document.querySelector('#darkbutton').addEventListener('click', toggleDark);
</script>
</body>
</html>

Refreshing a page will disable dark mode

Answer №1

Answer №2

Similar questions

Issue: Unable to find solutions for all parameters in NoteService: (?)

The 'BaseResponse<IavailableParameters[]>' type does not contain the properties 'length', 'pop', etc, which are expected to be present in the 'IavailableParameters[]' type

stream a song with a font awesome symbol

Parsing HTML with Qt library isn't able to detect any elements

Pushing state history causes browser back and forward button failure

Encountering a problem with ng-repeat when working with a JSON

Regular expression: match all content up to a certain word(s)

Acquire information asynchronously in JavaScript while inside a for loop

Should I use Mongoose schema methods or prototype functions?

Is it possible to execute a function within an HTML page simply by clicking on it?

Execute a function upon pressing the enter key

Exploring cross-domain loading and AJAX with JQuery

Utilizing Node Js and Socket.Io to develop a cutting-edge bot

Is there a way to retrieve the current state of a Material UI component in a React functional component without needing to trigger an event by clicking on

Using Vanilla JavaScript to Disable a Specific Key Combination on a Web Page

What is the best way to ensure the menu background aligns perfectly with the header in HTML/CSS?

Encountering an error with the message "SyntaxError: missing ; before statement" while attempting to utilize the Google Place Search

What is the purpose of re-checking the user in the passport.deserializeUser function?

Encountering issues with resolving dependencies in webdriverIO

Nuxt.js Development Script Fumbles