Question

我具有暗模式功能。 HTML，SCSS和javascript正常运行。

但是当我刷新页面时，一切恢复正常，而不是在暗模式下。

我想将暗模式和亮模式的值保存到localStorage中。但是我很困惑，我不知道怎么做。有没有人可以帮助我？请帮助我

我已经搜索了几次搜索，但仍然无法正常工作。如果您无法回答我的问题，请不要将此帖子设为类似的帖子。因为我已经阅读并实现了它，但是它不起作用。

这是我的CODEPEN

模式切换器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');
}

Answer 1

在CSS中对此进行修改：

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

在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";
});

Answer 2

您可以在此行localStorage.setItem('darkMode', 'true');

中存储数据

，您可以使用此var darkMode = localStorage.getItem('darkMode');

进行检索

然后按照自己的逻辑运用您的风格

将暗模式/亮模式保存到本地

2 个答案: