Persistent Dark Mode In Javascript

I have a switch that toggles dark mode on my website. I want it to be persistent when I open another page. This is my orginal code to toggle it: var checkbox = document.querySelect

Solution 1:

As you are using css variables, you could just change the variable values.

functionchangecolour() {
  let c = document.getElementById("pickbackground").value;
  document.documentElement.style.setProperty("--mystyle", c);

}

:root {
  --mystyle:green;
}

span {
  background-color:var(--mystyle);
  color:white;
}

<span>This is some text</span><br><hr><selectid="pickbackground"onclick="changecolour();"><optionvalue="green">Green</option><optionvalue="blue">Blue</option><optionvalue="red">Red</option></select>

And, you can still use your localstorage code to save their selection.

Solution 2:

I guess the code below would work. You should initialize trans variable before you use it.

lettrans = () => {
  document.documentElement.classList.add("transition");
  window.setTimeout(() => {
    document.documentElement.classList.remove("transition");
  }, 1000);
};

var checkbox = document.querySelector("input[name=theme]");

var theme;
if (localStorage.getItem("data-theme")) {
  theme = localStorage.getItem("data-theme");
  trans();
  document.documentElement.setAttribute("data-theme", theme);
} else {
  theme = "light";
  localStorage.setItem("data-theme", theme);
}
checkbox.addEventListener("change", function () {
  if (this.checked) {
    trans();
    document.documentElement.setAttribute("data-theme", "dark");
    theme = "dark";
    localStorage.setItem("data-theme", theme);
  } else {
    trans();
    document.documentElement.setAttribute("data-theme", "light");
    theme = "light";
    localStorage.setItem("data-theme", theme);
  }
});

Solution 3:

localStorage saves key/value pairs based on your website's origin. If your app is using multiple origins then you'll have to manage the key/value pairs every time you switch origin. If this is the case then you should consider saving this info in your back-end.

Solution 4:

I have already done this exact thing on another site. I threw together a minimal example below. The snippet below does not utilize the code for your intended purpose. Please see the full source code at the bottom of this post.

consttoggleTheme = () => {
  // Theme toggle button.const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

  functionswitchTheme(e) {
    let darkModeEnabled = e.target.checked;
    document.documentElement.setAttribute('data-theme', darkModeEnabled ? 'dark' : 'light');
    localStorage.setItem('theme', darkModeEnabled ? 'dark' : 'light');
  }
  toggleSwitch.addEventListener('change', switchTheme, false);

  // Restore theme state.const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
  if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
    if (currentTheme === 'dark') {
      toggleSwitch.checked = true;
    }
  }
}

toggleTheme();

.as-console-wrapper { display: none !important; }

:root {
  --foreground-color: #000;
  --background-color: #FFF;
  --link-color: #07D;
}

body {
  background: var(--background-color);
  color: var(--foreground-color);
}

a, a:visited {
  color: var(--link-color);
}

h1, nav {
  text-align: center;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0.5em;
}

nava {
  text-decoration: none;
}

header {
  position: relative;
}

headerinput[type="checkbox"] {
  position: absolute;
  right: 1em;
}

/** Dark theme */[data-theme="dark"] {
  --foreground-color: #EEE;
  --background-color: #111;
  --link-color: #5AF;
}

<header><divclass="theme-switch"><inputtype="checkbox" /></div></header><nav><ahref="#">Home</a><ahref="#">About</a></nav><section><h1>Home</h1></section><footer></footer>

Full source code

js/script.js

window.addEventListener('DOMContentLoaded', event => {
  toggleTheme();
});

consttoggleTheme = () => {
  // Theme toggle button.const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
  functionswitchTheme(e) {
    let darkModeEnabled = e.target.checked;
    document.documentElement.setAttribute('data-theme', darkModeEnabled ? 'dark' : 'light');
    localStorage.setItem('theme', darkModeEnabled ? 'dark' : 'light');
  }
  toggleSwitch.addEventListener('change', switchTheme, false);

  // Restore theme state.const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
  if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
    if (currentTheme === 'dark') {
      toggleSwitch.checked = true;
    }
  }
}

css/default.css

:root {
  --foreground-color: #000;
  --background-color: #FFF;
  --link-color: #07D;
}

body {
  background: var(--background-color);
  color: var(--foreground-color);
}

a, a:visited {
  color: var(--link-color);
}

h1,
nav {
  text-align: center;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 0.5em;
}

nava {
  text-decoration: none;
}

header {
  position: relative;
}

headerinput[type="checkbox"] {
  position: absolute;
  right: 1em;
}

css/dark.css

[data-theme="dark"] {
  --foreground-color: #EEE;
  --background-color: #111;
  --link-color: #5AF;
}

index.html

<!DOCTYPE html><html><head><title>Home</title><linkhref="css/default.css"rel="stylesheet" /><linkhref="css/dark.css"rel="stylesheet" /><scriptsrc="js/script.js"></script></head><body><header><divclass="theme-switch"><inputtype="checkbox" /></div></header><nav><ahref="./index.html">Home</a><ahref="./about.html">About</a></nav><section><h1>Home</h1></section><footer></footer></body></html>

about.html

<!DOCTYPE html><html><head><title>About</title><linkhref="css/default.css"rel="stylesheet" /><linkhref="css/dark.css"rel="stylesheet" /><scriptsrc="js/script.js"></script></head><body><header><divclass="theme-switch"><inputtype="checkbox" /></div></header><nav><ahref="./index.html">Home</a><ahref="./about.html">About</a></nav><section><h1>About</h1></section><footer></footer></body></html>