本文详解如何通过 CSS 变量 + JavaScript 事件监听，实现开关（toggle）触发时全局背景色的平滑切换，核心是利用 :checked 状态联动 DOM 类名与 transition 动画。
本文详解如何通过 css 变量 + javascript 事件监听，实现开关（toggle）触发时全局背景色的平滑切换，核心是利用 `:checked` 状态联动 dom 类名与 `transition` 动画。
在现代 Web 开发中，仅靠纯 CSS 很难实现「开关状态变化 → 修改 <body> 背景色」这类跨层级样式响应（因 CSS 无法向上选择父元素）。因此，需结合轻量级 JavaScript 实现状态驱动的类名控制，再配合 CSS 过渡完成视觉反馈。
✅ 正确实现步骤
1. 增强 CSS：定义主题变量与过渡效果
首先确保 CSS 中已正确定义颜色变量，并为 <body> 添加背景色过渡：
:root {
--line-color: hsl(234deg 12% 35%);
--active-color: hsl(234deg 100% 98%);
--inactive-color: hsl(234deg 20% 68%);
--body-color: hsl(189deg 49% 87%); /* 默认背景色 */
--background-colour: hsl(189deg 84% 14%); /* 切换后背景色 */
}
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background-color: var(--body-color);
transition: background-color 300ms linear; /* 关键：启用平滑过渡 */
}
/* 当 body 拥有 alt-color 类时，使用深色主题 */
body.alt-color {
background-color: var(--background-colour);
}⚠️ 注意：CSS 中变量命名建议统一拼写（如全用 color 或全用 colour），避免 --body-color 与 --background-colour 混用导致维护困难。
2. 绑定事件：监听开关状态并切换类名
使用 input 事件（比 change 更即时，支持拖拽切换）监听复选框状态，并动态切换 <body> 的 alt-color 类：
document.querySelector('.toggle__check').addEventListener('input', (evt) => {
document.body.classList.toggle('alt-color', evt.currentTarget.checked);
});该代码逻辑清晰：
- evt.currentTarget.checked 返回布尔值（true 表示开启，false 表示关闭）；
- classList.toggle(className, force) 根据 force 值决定添加或移除类——完美匹配开关语义。
3. HTML 结构保持不变（无需修改）
原始结构已足够，只需确保 .toggle__check 是唯一或首个匹配的选择器：
<div class="toggle__content">
<label class="toggle__label">
<input type="checkbox" class="toggle__check">
<div class="toggle__rail">
<span class="toggle__circle"></span>
<span class="toggle__border"></span>
</div>
</label>
</div>? 进阶提示
-
多开关支持：若页面含多个开关，改用 querySelectorAll() 并遍历绑定：
document.querySelectorAll('.toggle__check').forEach(checkbox => { checkbox.addEventListener('input', (evt) => { document.body.classList.toggle('alt-color', evt.currentTarget.checked); }); }); -
持久化状态：可结合 localStorage 记住用户偏好：
const saved = localStorage.getItem('theme') === 'dark'; document.body.classList.toggle('alt-color', saved); document.querySelector('.toggle__check').checked = saved; document.querySelector('.toggle__check').addEventListener('input', (evt) => { localStorage.setItem('theme', evt.currentTarget.checked ? 'dark' : 'light'); document.body.classList.toggle('alt-color', evt.currentTarget.checked); });
✅ 总结
纯 CSS 无法直接响应开关状态修改祖先元素样式，但通过「JS 监听 + 类名控制 + CSS 变量 + transition」四者协同，即可优雅实现主题切换。关键在于：
① 将颜色抽象为 CSS 自定义属性；
② 用 classList.toggle() 精准同步状态；
③ 为 background-color 显式声明 transition；
④ 保持变量命名一致性，提升可维护性。
这样既符合现代 CSS 最佳实践，又具备良好的可扩展性与用户体验。
