save dark mode/light mode to localStoage

问题

I have a dark mode feature. HTML and SCSS and javascript are working properly.

But when I refreshed the page, everything returned to normal, not in dark mode.

I want to save the values of dark mode and light mode to localStorage. but I'm confused, I don't know how. is there anyone can help me? Please help me

I've searched on several searches but it still doesn't work. If you can't answer my question, please don't make this post a similar post. because I've read and implemented it but it doesn't work.

this is my CODEPEN

Mode Switcher HTML

 <div id="modeSwitcher">
   <input type="checkbox" class="checkbox" id="chk" />
   <label class="label" for="chk">
     <i class="fas fa-moon"></i>
     <div class="ball"></div>
   </label>
</div>

SCSS

#modeSwitcher{
    margin: 5% 50%;

    .checkbox {
        opacity: 0;
        position: absolute;
        &:checked + {
            .label {
                .ball {
                    transform: translateX(35px);

                    &::after{
                        content: '';
                        position: absolute;
                        background-color: #0A0E27;
                        width: 13px;
                        height: 13px;
                        border-radius: 50%;
                        bottom: 50%;
                        left: -5%;
                        transform: translateY(50%);

                    }
                }
            }
        }
    }

    .label {
        background-color: #0A0E27;
        border-radius: 50px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
        margin: 0;
        position: relative;
        height: 16px;
        width: 50px;
        transform: scale(1.5);

        .fa-moon{
            color:#0A0E27 ;
        }

        .ball {
            background-color: #FDC503;
            border-radius: 50%;
            position: absolute;
            top: 3px;
            left: 3px;
            height: 20px;
            width: 20px;
            transform: translateX(0px);
            transition: transform 0.2s linear;
        }
    }
}

body{
  background-color: #fff;
    &.dark{
        background-color: black;
    }
}

Javascript

const check = document.getElementById('chk');

check.addEventListener('change', () => {
  document.body.classList.toggle('dark');
  localStorage.darkMode=!localStorage.darkMode;
});

window.onload=function() {
  if(localStorage.darkMode) document.body.classList.toggle('dark');
}

回答1:

Modify this in css:

body.dark {
  background-color: black;
}
body.light {
  background-color: whitesmoke;
}

Modify this in javascript:

window.onload=function() {
  if(localStorage.darkMode=="true") {
    document.body.classList.toggle('dark');
    document.getElementById("chk").checked=true;
  }
  else {
    document.body.classList.toggle('light');
  }
};
document.getElementById("chk").addEventListener('change', () => {
  document.body.classList.toggle('dark');
  document.body.classList.toggle('light');
  localStorage.darkMode=(localStorage.darkMode=="true")?"false":"true";
});

回答2:

You can store data with this line localStorage.setItem('darkMode', 'true');

and you can retrieve with this one var darkMode = localStorage.getItem('darkMode');

then just apply your style with your own logic

来源：https://stackoverflow.com/questions/63577939/save-dark-mode-light-mode-to-localstoage

标签

javascript

Sass

local-storage