Как реализовать функцию сохранения темного/светлого режима в локальном хранилище?

Обратите внимание, что сайт размещен на ПК. Я пробовал разные методы, которые не работали. Посмотрите мои коды, добавленные ниже. Все работает как надо, за исключением того, что режим возвращается в светлый режим после обновления моего браузера, даже если переключатель установлен в темный режим. Также обратите внимание, что у меня нет опыта использования локального хранилища. Какое лучшее решение применимо к моим кодам?

<header>
  <div class = "controls">
    <p>Light/Dark Mode</p>
    <label class = "toggle-switch" for = "dark-mode-toggle">
      <input type = "checkbox" id = "dark-mode-toggle" name = "theme" onclick = "otherColorChanges()" onreset = "restoreDefaultColor()">
      <div class = "toggle-switch-border">
        <div class = "toggle-switch-dot"></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;
  }
});

🤔 А знаете ли вы, что...
JavaScript имеет множество встроенных объектов, таких как Array, Date и Math.