将暗模式/亮模式保存到本地 [英] save dark mode/light mode to localStoage

问题描述

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

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.

我想将暗模式和亮模式的值保存到localStorage中.但我很困惑，我不知道如何.有没有人可以帮助我?请帮助我

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.

这是我的 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');
}

推荐答案

在CSS中进行修改:

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

在javascript中对此进行修改:

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

这篇关于将暗模式/亮模式保存到本地的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！