-2

When W3 is put on a web page in Dark Mode, it returns to the light theme when the user refreshes it. How to keep it going?

[https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp]

sank
  • 1
  • You can save users chosen theme in localstorage or cookies – Mervyn Sep 08 '21 at 06:16
  • 2
    Welcome to Stackoverflow!, Unfortunately, This question is a little bit too vague, it asks very generally for what would constitute a tutorial instead of asking a specific question. Therefore it is not suitable for stackoverflow as Stackoverflow is not a tutorial provider or a free code writing service, I recommend new users to review the [How to ask](https://stackoverflow.com/help/how-to-ask) section of stackoverflow for tips on asking questions that are well-suited for the site and best enable the community to provide helpful feedback. Goodluck :) – I_love_vegetables Sep 13 '21 at 07:29
  • Please provide enough code so others can better understand or reproduce the problem. – Community Sep 13 '21 at 11:26

1 Answers1

0

You can save user's chosen theme like this:

let element = document.body;
let is_darkmode_enable = element.classList.toggle("dark-mode");
document.cookie = "darkmode_enable=" + is_darkmode_enable; // Save to Cookie
localStorage.setItem("darkmode_enable", is_darkmode_enable); // Save to localStorage

And enable darkmode by default every time user open page (saved in localStorage):

let darkmode_default = localStorage.getItem("darkmode_enable") || false;
let element = document.body;
element.classList.toggle("dark-mode", darkmode_default);

EDIT (9-Sep-21)
I added auto-detect darkmode from browser:

// This function will run automatically
(function() {
  let element = document.body;

  // Detect the OS's preferred color scheme
  // https://stackoverflow.com/a/57795495/16319071
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    element.classList.toggle("dark-mode", true);
  } else {
    let darkmode_localstorage = localStorage.getItem("darkmode") || false; // Return 'false' if 'darkmode' in localStorage returns null
    element.classList.toggle("dark-mode", darkmode_localstorage);
  }
})();

function manually_darkmode_toggle() {
  let element = document.body;
  let is_darkmode_enable = element.classList.toggle("dark-mode");
  localStorage.setItem("darkmode", is_darkmode_enable); // Save to localStorage
}
body.dark-mode {
  background: #ccc;
}
<button onclick="manually_darkmode_toggle()">Click here to toggle darkmode manually</button>
PhongHNg
  • 61
  • 4