开关控件切换时动态改变页面背景色的实现方法
通过JavaScript监听复选框的input事件，根据checked状态切换body的alt-color类，配合CSS的transition属性，实现背景色从--body-color到--background-colour的平滑过渡。注意CSS变量命名统一，避免拼写差异导致引用失败。
本文详细解析如何通过 JavaScript 监听复选框状态变化，结合 CSS 自定义属性与类名切换，实现开关触发后整个页面背景色从 --body-color 平滑过渡到 --background-colour 的完整过程。
在现代 Web 开发中，开关（toggle）控件早已不局限于简单的交互入口，而是成为主题切换、深色/浅色模式等核心功能的关键载体。你现有的 CSS 已经构建了一个基于 HSL、结构清晰的可定制开关组件，但美中不足的是，视觉反馈目前仅局限于开关轨道和圆点的局部变化。如果希望全局背景色随开关状态联动变化（例如，开启时自动切换到深色背景 --background-colour），就需要借助 JavaScript 驱动 DOM 的类名控制，并配合 CSS 过渡动画，才能实现平滑的变色效果。
实现思路并不复杂，核心步骤仅需三步。
✅ 核心实现思路
- 监听开关状态：使用 input 事件（比 change 事件更即时，连拖拽切换也能响应）监听 .toggle__check 复选框的状态；
- 动态切换 body 类名：根据 checked 的布尔值，为 添加或移除一个名为 alt-color 的类；
- CSS 状态响应：通过 body.alt-color 选择器覆盖默认的 background-color，并启用 transition，使颜色变化呈现渐变过渡效果。
?️ 完整代码实现
HTML（这部分完全无需修改）：
JavaScript（建议放在