如何实现HTML页面主题切换及换肤功能？

本文共计883个文字，预计阅读时间需要4分钟。

主题切换不是加个+class+就完事，核心在于CSS+变量+localStorage三者协同，缺一不可。仅改+class+易被其他样式覆盖，仅靠+prefers-color-scheme+会无视用户选择，不存在+localStorage+则刷新即丢失。

用 document.documentElement.dataset.theme 控制主题状态

别碰 body.className 或随意加 class="dark"——它可能和 Tailwind、BEM 或第三方库冲突。统一用 data-theme 属性更语义化、隔离性好：

• document.documentElement.dataset.theme = "dark" 设为深色
• document.documentElement.dataset.theme = "" 清空（等价于浅色）
• CSS 中必须写 html[data-theme="dark"] { ... }，不能漏掉 html 前缀，否则层级可能被子元素样式压住
• 切完立刻触发重绘，无需手动 force reflow，浏览器自动响应变量变化

CSS 变量定义要分层，:root + [data-theme="dark"] 配合写

所有可变颜色、间距、阴影都得从变量取值，否则切换无效。