用class切换背景色应将颜色变量抽离到主题类名（如theme-light/theme-dark），通过CSS选择器层级或CSS变量统一控制，避免硬编码和!important；需同步设置HTML根元素class防FOUC，并显式重置表单控件及SVG等所有颜色上下文。
怎么用 class 切换背景色，而不是写一堆重复 CSS
靠 class 切换主题，本质是把颜色变量抽离到类名上，而不是在每个元素里硬写 background-color: #3b82f6。否则换主题时得改几十个地方，漏一个就错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给根容器（比如
或最外层<div id="app">）加一个可变的 class，如 <code>theme-light/theme-dark - 所有颜色定义都基于这个 class 前缀写，例如：
.theme-light .card { background-color: #ffffff; }</code><br><pre class="brush:php;toolbar:false;">.theme-dark .card { background-color: #1f2937; } - 避免用
!important 覆盖，它会让后续调试和扩展变得不可控 - 在不同主题 class 下定义同一组变量：
.theme-light { --bg-base: #ffffff; --text-primary: #111827; }</code><br><pre class="brush:php;toolbar:false;">.theme-dark { --bg-base: #111827; --text-primary: #f9fafb; } - 组件内直接用
background-color: var(--bg-base)，不用重复写 class 层级 - 注意：CSS 变量不支持 IE，如果必须兼容，得 fallback 到 class 方案或用 PostCSS 插件降级
- 只在
window.addEventListener('DOMContentLoaded', ...)里切 class，但 HTML 已开始渲染 - 从 localStorage 读主题后才操作 DOM，中间有毫秒级延迟
- 服务端或构建时就注入初始 class（如根据请求头或构建参数），让 HTML 一出来就是对的主题
- 如果必须前端控制，把 class 写在
标签上，并在里用内联 script 同步读取并设置：<script>document.documentElement.className = localStorage.getItem('theme') || 'theme-light';</script> - 别等
DOMContentLoaded，那太晚了 - 显式重置这些元素的背景和文字色：
.theme-dark input, .theme-dark button { background-color: var(--bg-base); color: var(--text-primary); } - 注意
<textarea></textarea>和<input type="checkbox">的伪元素（如::-webkit-inner-spin-button）可能也需要单独处理 - 某些系统级控件（如 macOS 的原生
select下拉箭头）无法完全样式化，得接受它的存在
CSS 变量（custom properties）配合 class 切换更灵活
纯 class 方案适合主题少、颜色固定的情况；一旦要支持用户自定义色、或需要 JS 动态读取颜色值，就得上 --primary-color 这类 CSS 变量。
实操建议：
立即学习“前端免费学习笔记（深入）”；
JavaScript 切换 class 时容易卡顿或闪烁
页面刚加载时如果 JS 还没执行完，用户会先看到默认主题（比如亮色），然后闪一下变成暗色——这是典型 FOUC（Flash of Unstyled Content）。
常见错误现象：
实操建议：
立即学习“前端免费学习笔记（深入）”；
切换后按钮/输入框等表单控件颜色没变
很多开发者只改了容器背景，却忘了 <input>、<button></button>、<select></select> 这些原生控件的颜色继承规则很弱，它们常自带 UA 样式，不会自动响应 var(--bg-base)。
实操建议：
立即学习“前端免费学习笔记（深入）”；
真正难的不是切 class，而是确保所有颜色上下文都被覆盖——包括 SVG 的 fill、阴影的 color、甚至第三方组件库的 slot 样式。漏掉一个，主题就不完整。
