Save the results of a dark mode function as a cookie

Question

I have everything working to toggle between light/dark mode, i just cant seem to figure out how to get the results of the js function to save as a cookie between pages and reloads. I have looked everywhere and just cannot find the proper way to phrase it. I always seem to either have a cookie saved, or the function executes without a cookie. Just cant get both to work. Here is what I have so far. HTML:

        <button class="dark-mode" id="theme" onclick="togTheme()">Dark Mode</button>

CSS:

:root {
  --navHeight: 70px;
  --darkHue: #B0BEC5;
  --darkShade: #37474F;
  --lightShade: #455A64;
  --white: #FFFFFF;
  --hue: #ECEFF1;
  --shade: #263238;
  --black: #222222;
  --gray: #eee;
  --blue: #0071BC
}

.light-theme {
  --themeDropDownBg: var(--goldCrayola);
  --themeIconBorderColor: var(--sage);
  --navBg: var(--hue);
  --navLinkHoverBg: var(--darkHue);
  --mainBg: var(--white);
  --fontColor: var(--black);
}

.dark-theme {
  --themeDropDownBg: var(--msuGreen);
  --themeIconBorderColor: var(--richBlackForeground);
  --navBg: var(--lightShade);
  --navLinkHoverBg: var(--darkShade);
  --mainBg: var(--shade);
  --fontColor: var(--hue);
}



* {
  color: var(--fontColor);
  font-family: 'Risque';
  transition: background 500ms ease,
    padding 500ms linear;
}

body {
  margin: 0px;
  padding: 0px;
  background: var(--mainBg);
}

nav {
  background: var(--navBg);
  color: var(--fontColor);
}

nav a:hover {
  background-color: var(--navLinkHoverBg);
  color: var(--blue);
}

nav button {
  background: var(--navBg);
  color: var(--fontColor);
}

nav button:hover {
  background-color: var(--navLinkHoverBg);
  color: var(--blue);
}

Javascript:

function togTheme() {
  var element = document.body;
  element.classList.toggle("dark-theme");
  var x = document.getElementById("theme");
  if (x.innerHTML === "Dark Mode") {
    x.innerHTML = "Light Mode";
  } else {
    x.innerHTML = "Dark Mode";
  }
}

Any help would be greatly appreciated.

This seems like something you'd want to use [Local storage for, not cookies](https://stackoverflow.com/a/3220802/12101554) — Samathingamajig, Oct 31 '20 at 20:34
Yes, I thought that too, but couldn't get that to work either. — Dylan Martin, Oct 31 '20 at 20:36

score 0 · Answer 1 · answered Oct 31 '20 at 20:45

0

const setCookie = (name, value, exdays) => {
    const d = new Date(); // Gets current date
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); //calculates the date when it has to expire
    const expires = "expires="+ d.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/"; // sets the cookie
}

With this function you can easily add a cookie. Give the type of mode in as a value and the amount of days till the cookie has to expire and the name of the cookie.

For toggling between themes I would personally use localstorage or save the mode in your backend database.

answered Oct 31 '20 at 20:45

Thibaut De Maerteleire

65
2
7

Thank you, would you mind explaining how i would save it to local storage? – Dylan Martin Oct 31 '20 at 21:00
I think this link can explain it better than me ;) https://www.w3schools.com/jsref/prop_win_localstorage.asp – Thibaut De Maerteleire Oct 31 '20 at 21:02
I had gone over that page already and it hasn't helped me... – Dylan Martin Oct 31 '20 at 21:20
const togTheme = () => { const theme = localstorage.getItem(''theme); if(!theme) {localstorage.setItem('theme', 'Light')} const element = document.body; element.classList.toggle("dark-theme"); const x = document.getElementById("theme"); if (theme === "Dark") { localstorage.setItem('theme', 'Light'); x.innerHTML = "Light Mode"; } else { localstorage.setItem('theme', 'Dark'); x.innerHTML = "Dark Mode"; } – Thibaut De Maerteleire Oct 31 '20 at 22:59

Save the results of a dark mode function as a cookie

1 Answers1