说明

参照Doks主题实现, 一切从简

1. JavaScript监听按钮点击
   
2. 在存储中写入主题模式
   
3. 根据存储中主题模式值, 为元素设置/移除属性
   

JavaScript实现

Copy 1const mode = document.getElementById('mode');
 2
 3// console.log(mode);
 4
 5mode.addEventListener('click', () => {
 6    console.log("click");
 7    document.documentElement.toggleAttribute('dark-mode');
 8    localStorage.setItem('theme', document.documentElement.hasAttribute('dark-mode') ? 'dark' : 'light');
 9});
10
11if (localStorage.getItem('theme') === 'dark')
12{
13    document.documentElement.setAttribute('dark-mode', '');
14}
15else
16{
17    document.documentElement.removeAttribute('dark-mode');
18}

CSS样式

也是我选择参照Doks主题实现的原因: 拿body-panel类举例, 只需为其添加选择器, 设置暗色主题的颜色

Copy1.body-panel {
2    color: $whole-color;
3    background: $whole-bg;
4}
5
6[dark-mode] .body-panel {
7    color: $dark-whole-color;
8    background: $dark-whole-bg;
9}

HTML

1. 按钮id为mode, 与JS代码中元素id一致
   
2. 使用切换主题图标
   

Copy1<div class="div-header-icon">
2    <button id="mode" type="button" style="cursor: pointer; border:none; background: transparent; ">
3        <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="currentColor" d="M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>
4    </button>
5</div>

便签