How do I add local-storage to a JavaScript Function for Light/Dark Mode-CodePudding

My current JavaScript function switches between Light and Dark Mode. However when the user refreshed the page, the selected mode is forgotten and reverts back to light mode.

How do I add local-storage to function to make it required when toggling between light and dark? I am sure this is another conditional statement below my current function, but I am unsure whether my current JavaScript would work as is, or that I would need to re-write it.

<!-- Light/Dark Mode Container -->
    
    <input type="checkbox" id="input-color-switch">
        <label for="input-color-switch" >
          <div id="star" >
          <div  id="star-1">★</div>
          <div  id="star-2">★</div>
        </div>
          <div id="moon" ></div>
        </label>

#input-color-switch {
  display: none;
}

label {
  display: block;
  float: left;
  margin: 20px;
  width: 116px;
  height: 56px;
  background-color: lightgray;
  border-radius: 56px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: 0.3s ease background-color;
  overflow: hidden;
}

#star {
  position: absolute;
  top: 13px;
  left: 13px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  transform: scale(1);
  border-radius: 50%;
  transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform,
    0.3s ease background-color;
  z-index: 1;
}

#star-1 {
  position: relative;
}

#star-2 {
  position: absolute;
  transform: rotateZ(36deg);
}

.star {
  top: 0;
  left: -7px;
  font-size: 54px;
  line-height: 28px;
  color: #fff;
  transition: 0.3s ease color;
}

#moon {
  position: absolute;
  bottom: -52px;
  right: 8px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.3s ease bottom;
}

#moon:before {
  content: "";
  position: absolute;
  top: -12px;
  left: -17px;
  width: 40px;
  height: 40px;
  background-color: var(--secondary-color);
  border-radius: 50%;
  transition: 0.3s ease background-color;
}

#input-color-switch:checked   label {
  background-color: #000;
}

#input-color-switch:checked   label #star {
  top: 3px;
  left: 64px;
  transform: scale(0.3);
  background-color: lightblue;
}

#input-color-switch:checked   label .star {
  color: lightblue;
}

#input-color-switch:checked   label #moon {
  bottom: 8px;
}

#input-color-switch:checked   label #moon:before {
  background-color: #000;
}
/* End of Light/Dark Mode */

const colorSwitch = document.getElementById('input-color-switch');

colorSwitch.addEventListener('click', checkMode);

function checkMode () {
        if(colorSwitch.checked) {
                console.log('dark on')
                darkModeOn();
        } else {
                console.log('dark off')
                darkModeOff();
        }
};

function darkModeOn () {
        document.body.classList.add('dark-mode');
}      

function darkModeOff () {
        document.body.classList.remove('dark-mode');
}

//Light/Dark Mode Toggle Function End

CodePudding user response：

You can set a flag for dark-mode in the localStorage on click, also a listener for windows.onload event to read that flag and apply the dark-mode:

const colorSwitch = document.getElementById('input-color-switch');

colorSwitch.addEventListener('click', checkMode);

function checkMode () {
    if(colorSwitch.checked) {
            console.log('dark on')
            darkModeOn();
    } else {
            console.log('dark off')
            darkModeOff();
    }
};

function darkModeOn () {
    document.body.classList.add('dark-mode');
    localStorage.setItem('dark-mode', 'on');
}      

function darkModeOff () {
    document.body.classList.remove('dark-mode');
    localStorage.removeItem('dark-mode');
}

//Light/Dark Mode Toggle Function End

window.addEventListener('load', () => {
  if (localStorage.getItem('dark-mode')) {
    colorSwitch.checked = true;
    darkModeOn();
  }
});

#input-color-switch {
  display: none;
}

label {
  display: block;
  float: left;
  margin: 20px;
  width: 116px;
  height: 56px;
  background-color: lightgray;
  border-radius: 56px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: 0.3s ease background-color;
  overflow: hidden;
}

#star {
  position: absolute;
  top: 13px;
  left: 13px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  transform: scale(1);
  border-radius: 50%;
  transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform,
0.3s ease background-color;
  z-index: 1;
}

#star-1 {
  position: relative;
}

#star-2 {
  position: absolute;
  transform: rotateZ(36deg);
}

.star {
  top: 0;
  left: -7px;
  font-size: 54px;
  line-height: 28px;
  color: #fff;
  transition: 0.3s ease color;
}

#moon {
  position: absolute;
  bottom: -52px;
  right: 8px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.3s ease bottom;
}

#moon:before {
  content: "";
  position: absolute;
  top: -12px;
  left: -17px;
  width: 40px;
  height: 40px;
  background-color: var(--secondary-color);
  border-radius: 50%;
  transition: 0.3s ease background-color;
}

#input-color-switch:checked   label {
  background-color: #000;
}

#input-color-switch:checked   label #star {
  top: 3px;
  left: 64px;
  transform: scale(0.3);
  background-color: lightblue;
}

#input-color-switch:checked   label .star {
  color: lightblue;
}

#input-color-switch:checked   label #moon {
  bottom: 8px;
}

#input-color-switch:checked   label #moon:before {
  background-color: #000;
}
/* End of Light/Dark Mode */

body.dark-mode {
  background-color: #222;
}

<!-- Light/Dark Mode Container -->

<input type="checkbox" id="input-color-switch">
<label for="input-color-switch" >
  <div id="star" >
  <div  id="star-1">★</div>
  <div  id="star-2">★</div>
</div>
  <div id="moon" ></div>
</label>