I got a toggle that switches between dark mode and light mode:

<div >
    <input type="checkbox" id="dark-mode-toggler"/>
    <label for="dark-mode-toggler" aria-label="Toggler for Dark Mode"></label>
</div>

Then I got a script that switches to dark mode when the toggle switch is clicked:

<script>
              // check for saved 'darkMode' and 'darkModeToggle' in localStorage
              let darkMode = localStorage.getItem('darkMode');

              const darkModeToggle = document.querySelector('#dark-mode-toggler');
              

              const enableDarkMode = () => {
                // 1. Add the class to the body
                document.body.classList.add('darkmode');
                // 2. Update darkMode in localStorage
                localStorage.setItem('darkMode', 'enabled');
              }

              const disableDarkMode = () => {
                // 1. Remove the class from the body
                document.body.classList.remove('darkmode');
                // 2. Update darkMode and toggle in localStorage 
                localStorage.setItem('darkMode', null);
              }
              
              // If the user already visited and enabled darkMode
              // start things off with it on
              if (darkMode === 'enabled') {
                enableDarkMode();
              }

              // When someone clicks the button
              darkModeToggle.addEventListener('click', () => {
                // get their darkMode setting
                darkMode = localStorage.getItem('darkMode');
                
                // if it not current enabled, enable it
                if (darkMode !== 'enabled') {
                  enableDarkMode();
                // if it has been enabled, turn it off  
                } else {  
                  disableDarkMode(); 
                }
              });
</script>

But when I refresh or switch page, the toggle switch is reset. How can we use localStorage to save the toggle switch status and load the current status when switching or refreshing pages?

Here is my CSS for completeness

             .dark-mode-toggler {
                position: fixed;
                top: 5px;
                right: 20px;
              }
              .dark-mode-toggler label {
                position: relative;
              }
              .dark-mode-toggler input[type='checkbox'] {
                display: none;
              }
              .dark-mode-toggler input[type='checkbox']   label::before {
                content: '';
                display: block;
                height: 26px;
                width: 60px;
                background: #fff;
                border: 2px solid #96979c;
                border-radius: 15px;
                position: absolute;
                top: 0px;
                left: -65px;
              }
              .dark-mode-toggler input[type='checkbox']   label::after {
                content: '';
                display: block;
                height: 20px;
                width: 20px;
                background: #96979c;
                border: 2px solid #fff;
                border-radius: 50%;
                position: absolute;
                top: 3px;
                left: -62px;
                transition: all 0.4s ease-in;
              }
              .dark-mode-toggler input[type='checkbox']:checked   label::before {
                background: #000;
                border: 2px solid #fff;
              }
              .dark-mode-toggler input[type='checkbox']:checked   label::after {
                left: -28px;
                background: #000;
                border: 2px solid #fff;
                transition: all 0.4s ease-in;
              }
              :root {
                --clr-light: transparent;
                --clr-dark: #00332a;
                --clr-primary: #dbffa2;
                --clr-secondary: #c3fcf2;
                --clr-accent: #ff7750;
              
                --foreground: var(--clr-dark);
                --background: var(--clr-light);
              }
              .darkmode {
                --clr-light: #fdffc4;
                --clr-dark: #00332a;
                --clr-primary: #202302;
                --clr-secondary: #00100d;
                --clr-accent: #ff7750;
              
                --foreground: var(--clr-light);
                --background: var(--clr-dark);
              }
              body {
                background: var(--background);
                color: var(--foreground);
              }

CodePudding user response：

The problem is that you don't set the initial state of the checkbox on page reload. You'll need to set the checked attribute of the checkbox on page refresh to show that the mode is enabled.

const enableDarkMode = () => {
  // 1. Add the class to the body
  document.body.classList.add('darkmode');
  // 2. Update darkMode in localStorage
  localStorage.setItem('darkMode', 'enabled');
  // 3. toggle the checkbox
  darkModeToggle.setAttribute('checked', true);
}

CodePudding user response：

set function call to onl oad event in html