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

Tips for making a background image responsive using ng-style in AngularJS

Making Node.js Wait Until a Function Completes its Execution

An error was encountered in customizing CKEditor5 in Vue: compilation unsuccessful

Is there a way to deliberately trigger an error using Selenium WebDriverIO?

Changing the z-index using createjs

Utilization of z-index with float: left within an image gallery in CSS

Update a section of my PHP webpage using setInterval()

What is the best way to convert a date to ISO 8601 format using JavaScript? Are there any built-in functions or methods in

Clearing HTML input connected to PHP and AJAX: A handy guide

Altering the text and functionality of buttons with jQuery

Listcell XUL with button options

Interacting div elements with jQuery's dynamic content

Creating custom designs for a HTML button using CSS

Can MUI 5 replicate the Emotions 'css' function through analog?

Ways to delete a div element according to its associated value

How can you quickly navigate to the top of the page before clicking on a link in the same window/tab?

In Firefox, certain scroll positions cause elements to vanish

The Node module's package.json does not have a main "exports" defined

What is the best way to retrieve the data from a specific section when a checkbox is selected in Angular 2?

Formulation, on the other side of the comma