如何让明暗主题切换代码正常运行？

问题根源 #

1. CSS选择器失效：你用了.theme__toggle:checked ~ body这种相邻兄弟选择器，但input.theme__toggle嵌套在label和span内部，和body根本不是相邻元素，样式永远不会生效。
2. JS与CSS逻辑不匹配：JS代码给根元素设置了data-theme属性，但CSS完全没用到这个属性，等于白设置。

修复方案 #

1. 修正CSS样式

改用根元素的data-theme属性控制全局样式，不管开关按钮放在哪里都能生效：

/* 全局默认样式（浅色主题） */
:root {
  --bg-color: white;
  --text-color: #000;
}

/* 深色主题 */
:root[data-theme="dark"] {
  --bg-color: black;
  --text-color: #fff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  min-height: 100vh; /* 确保背景铺满整个视口 */
}

/* 开关按钮基础样式（保证按钮正常显示） */
.theme {
  position: fixed;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.theme__toggle-wrap {
  display: inline-block;
  width: 60px;
  height: 30px;
  position: relative;
}
.theme__toggle {
  opacity: 0;
  width: 0;
  height: 0;
}
.theme__fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 30px;
  transition: background-color 0.3s;
}
.theme__toggle:checked ~ .theme__fill {
  background-color: #2196F3;
}
.theme__icon {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: white;
  transition: transform 0.3s;
}
.theme__toggle:checked ~ .theme__icon {
  transform: translateX(30px);
}
.theme__icon-part {
  display: none;
}

2. 优化JS逻辑

初始化时设置默认主题，同时添加本地存储保存用户选择：

document.addEventListener('DOMContentLoaded', function () {
    const themeToggle = document.getElementById('theme');
    
    // 初始化主题：默认浅色，优先读取本地存储
    const currentTheme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', currentTheme);
    themeToggle.checked = currentTheme === 'dark';

    // 切换主题函数
    function toggleTheme() {
        const newTheme = themeToggle.checked ? 'dark' : 'light';
        document.documentElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme); // 保存主题，刷新页面保持状态
    }

    // 绑定切换事件
    themeToggle.addEventListener('change', toggleTheme);
});

3. HTML保持不变

你的HTML结构无需修改，直接保留：

<label for="theme" class="theme">
   <span class="theme__toggle-wrap">
    <input id="theme"
     class="theme__toggle"
     type="checkbox" role="switch"
     name="theme" value="dark">
    <span class="theme__fill"></span>
    <span class="theme__icon">
     <span class="theme__icon-part"></span>
     <span class="theme__icon-part"></span>
     <span class="theme__icon-part"></span>
     <span class="theme__icon-part"></span>
     <span class="theme__icon-part"></span>
     <span class="theme__icon-part"></span>
     <span class="theme__icon-part"></span>
     <span class="theme__icon-part"></span>
     <span class="theme__icon-part"></span>
    </span>
   </span>
</label>

修复后效果 #

• 默认页面背景为白色，切换开关后变为黑色，文本颜色同步反转
• 刷新页面会记住上次选择的主题
• 开关按钮有平滑的切换动画

内容的提问来源于stack exchange，提问作者Awm