How to make dark/light mode with LocalStorage HTML/JavaScript [duplicate]

Question

I did some research on this topic but none of them worked for me. I have a button with an image that toggles dark/light mode. But now I want to save it's state with localStorage, cause I want to transfer "theme" to another pages as well. So far I made dark/light mode toggle button. I'm able to save text colors. But --default-body, --default-black ect. aren't saving their new colors. How can I save those colors. They are changed in if/else statement.. Here's my CSS code:

:root {
  --default-white: rgb(255, 255, 255);
  --default-black: rgb(0, 0, 0);
  --default-shadow: rgba(0, 0, 0, 0.4);
  --default-body: rgba(201, 201, 201, 0.4);
}

.dark-mode {
  background-color: black;
  color: white;
  --default-black: white;
}

And here's my Js code:

function DLMode() {
  const wasDarkmode = localStorage.getItem('darkmode') === 'true';
  localStorage.setItem('darkmode', !wasDarkmode);
  const element = document.body;
  element.classList.toggle('dark-mode', !wasDarkmode);
  if (!darkMode) {
      document.getElementById("dl_mode").src = "images/light.jpg";
      document.documentElement.style.setProperty('--default-white', "rgb(0, 0, 0)");
      document.documentElement.style.setProperty('--default-body', "rgb(48, 48, 48)");
      document.documentElement.style.setProperty('--default-shadow', "rgba(255, 255, 255, 9)");
      darkMode = true;
  } else {
      document.getElementById("dl_mode").src = "images/night.jpg";
      document.documentElement.style.setProperty('--default-body', "rgba(201, 201, 201, .4)");
      document.documentElement.style.setProperty('--default-white', "rgb(255, 255, 255)");
      document.documentElement.style.setProperty('--default-shadow', "rgba(0, 0, 0, .4)");
      darkMode = false;
  }
}

function OnLoad() {
  document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
}

Answer 1

I would create a new local storage item, and edit it's value whenever toggle happens:

localStorage.setItem('isDarkMode', 'false');

localStorage.setItem('isDarkMode', 'true');

function DLMode() {
  const wasDarkmode = localStorage.getItem('darkmode') === 'true';
  localStorage.setItem('darkmode', !wasDarkmode);
  const element = document.body;
  element.classList.toggle('dark-mode', !wasDarkmode);
  if (!darkMode) {
      localStorage.setItem('isDarkMode', 'false');
      document.getElementById("dl_mode").src = "images/light.jpg";
      document.documentElement.style.setProperty('--default-white', "rgb(0, 0, 0)");
      document.documentElement.style.setProperty('--default-body', "rgb(48, 48, 48)");
      document.documentElement.style.setProperty('--default-shadow', "rgba(255, 255, 255, 9)");
      darkMode = true;
  } else {
      localStorage.setItem('isDarkMode', 'true');
      document.getElementById("dl_mode").src = "images/night.jpg";
      document.documentElement.style.setProperty('--default-body', "rgba(201, 201, 201, .4)");
      document.documentElement.style.setProperty('--default-white', "rgb(255, 255, 255)");
      document.documentElement.style.setProperty('--default-shadow', "rgba(0, 0, 0, .4)");
      darkMode = false;
  }
}

function OnLoad() {
  document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
}

Then when you transfer "theme" to another page, simply set an if condition to check isDarkMode's value:

if (localStorage.getItem("isDarkMode") == false) {
   // light-mode page
} else {
  // dark-mode page
}