Note that, the website is hosted on a PC. I have tried various methods which didn't work. View my codes added below. Everything works as it should except that the mode returns to light mode upon refresh of my browser even when the toggle is set to dark mode. Also, note that I have no previous experience with the use of local storage. What's the best solution that applies to my codes?

<header>
  <div >
    <p>Light/Dark Mode</p>
    <label  for="dark-mode-toggle">
      <input type="checkbox" id="dark-mode-toggle" name="theme" onclick="otherColorChanges()" onreset="restoreDefaultColor()">
      <div >
        <div ></div>
      </div>
    </label>
  </div>
</header>

.toggle-switch {
  display     : inline-flex;
  align-items : center;
  font-family : 'Sora', sans-serif;
  font-weight : 700;
  font-size   : .875rem;
  cursor      : pointer;
  }
.toggle-switch-border {
  display             : inline-flex;
  align-items         : center;
  width               : 60px;
  height              : 36px;
  border              : 1px solid var(--primary); 
  border-radius       : 20px;
  box-sizing          : border-box;
  margin-inline-start : 8px;
  }
.toggle-switch input {
  display: none;
  }
.toggle-switch-dot {
  width         : 28px;
  height        : 28px;
  border-radius : 50%;
  background    : var(--primary);
  transform     : translate3d(3px, 0, 0);
  transition    : transform .1s ease-in-out;
  }
.toggle-switch input:checked   * .toggle-switch-dot {
  transform : translate3d(26px, 0, 0);
  }
body {
  color              : var(--primary);
  font-family        : "Work Sans", sans-serif;
  background         : var(--background);
  /*box-sizing       : border-box;*/
  transition         : color 0.5s;
  transition         : background 0.5s;
 
  --dark-background  : #253a52;
  --dark-primary     : white; /*#FFFFE3*/
  --dark-link        : #A9FE75;
 
  --light-background : white; /*#ffffe3*/
  --light-primary    : #253a52;
  --light-link       : #1348da;
 
  --background       : var(--light-background);
  --primary          : var(--light-primary);
  --link             : var(--light-link);
  }
a {
  color : var(--link);
  }
/* separator bars */
nav,
section {
  border-block-end : 1px solid var(--primary);
  }
/* container for dark-mode toggle */
header .controls {
  display         : flex;
  justify-content : end;
  padding         : 1rem 0;
  margin-right    : 3rem;
  }
 a.btn {
  display         : inline-flex;
  align-items     : center;
  background      : var(--link);
  color           : var(--background);
  text-decoration : none;
  padding         : 0 1rem;
  height          : 2.5rem;
  border-radius   : 1.25rem;
  font-family     : "Montserrat", sans-serif;
  font-weight     : 700;
  font-size       : 0.875rem;
  }

/*Light/Dark mode toggle*/
class CssPropControl {
  constructor(element) {
    this.element = element
  }
  get(varName) {
    return getComputedStyle(this.element).getPropertyValue(varName)
  }
  set(varName, val) {
    return this.element.style.setProperty(varName, val)
  }
}

const bodyCssProps = new CssPropControl(document.body)

let toggle = document.querySelector('#dark-mode-toggle')
toggle.addEventListener('click', () => {
  let mode = toggle.checked ? 'dark' : 'light'
  bodyCssProps.set('--background', bodyCssProps.get(`--${mode}-background`))
  bodyCssProps.set('--primary', bodyCssProps.get(`--${mode}-primary`))
  bodyCssProps.set('--link', bodyCssProps.get(`--${mode}-link`))
})


/*Save dark mode in local storage*/
const darkModeToggle = document.getElementById('darkModeToggle');

darkModeToggle.addEventListener('click', () => {
  darkModeToggle.checked ? document.body.classList.add("bodyCssProps") : document.body.classList.remove("bodyCssProps");
  localStorage.setItem('darkModeStatus', darkModeToggle.checked);
});

window.addEventListener('load', (event) => {
  if (localStorage.getItem('darkModeStatus') == "true") {
    document.body.classList.add("bodyCssProps");
    document.getElementById('darkModeToggle').checked = true;
  }
});

CodePudding user response：

Take a look at your event listeners and how your css variables are being updated. I'm guessing your local storage is correctly getting accessed and your checkbox is properly set on load, however your variables are only updated when onClick is fired.

You have two options:

1. modify your code so that there's a way to trigger css variable updates without using onClick
2. directly call darkModeToggle.onClick() after setting the checkbox value to get it to call your css variable update