如何为你的网站添加深色模式支持
内容提要
本文介绍用CSS变量和少量JavaScript实现网站明暗主题切换：通过:root定义颜色变量，用data-theme属性区分主题，借助matchMedia检测系统偏好自动切换并监听系统主题变化实时更新；使用Bootstrap 5.3时可用data-bs-theme属性，但需自行添加自动切换脚本。
延伸解读
CSS变量：主题切换的基石
文章使用CSS变量（自定义属性）来管理颜色，将颜色值集中定义在:root或[data-theme]选择器下。这样切换主题时只需更改变量值，无需重写大量CSS规则。变量通过var()函数引用，使得样式表更易维护和扩展。这种方法不仅适用于明暗模式，还可用于多主题场景。
自动跟随系统主题的实现
通过window.matchMedia('(prefers-color-scheme: dark)')检测系统偏好，并设置html元素的data-theme属性。同时监听change事件，当系统主题变化时实时更新页面，无需刷新。这提供了无缝的用户体验，尤其适合尊重用户系统设置的应用。
Bootstrap 5.3的集成与差异
Bootstrap 5.3内置了明暗主题支持，使用data-bs-theme属性控制，并提供了所有组件的颜色定义。但Bootstrap未包含自动切换脚本，需自行添加基于系统偏好的逻辑。若项目已用Bootstrap，可减少自定义变量，但仍需实现自动检测。
用户手动覆盖与本地存储
文章建议允许用户手动选择主题（亮、暗或自动），并将选择保存在localStorage中，以便后续访问时恢复。这平衡了自动检测与用户控制，但实现需额外代码。注意，手动选择应优先于系统偏好，且需在页面加载时尽早应用以避免闪烁。
Q&A
如何用CSS变量实现网站明暗主题切换？
在:root中定义颜色变量（如--page-bg-color），通过[data-theme="dark"]覆盖变量值，并在元素上设置data-theme属性来切换主题。
怎样让网站自动跟随操作系统的深色模式？
使用window.matchMedia('(prefers-color-scheme: dark)').matches检测系统偏好，然后通过document.documentElement.setAttribute('data-theme', theme)设置主题。
如何监听系统主题变化并实时更新网站主题？
将媒体查询保存在变量中，添加change事件监听器，在回调中重新计算主题并更新data-theme属性。
使用Bootstrap 5.3时如何实现深色模式？
Bootstrap 5.3使用data-bs-theme属性控制主题，但需自行添加JavaScript脚本根据系统偏好自动切换。
如何让用户手动选择主题并记住选择？
提供light、dark、auto三个选项，默认auto跟随系统；用户手动选择后，将选择存储在localStorage中，以便后续访问时恢复。
实现深色模式需要修改哪些CSS颜色属性？
需要将涉及颜色的属性（如color、background-color、border）改为使用CSS变量，并为深色模式定义对应的变量值。
