使用 CSS 自定义属性实现主题切换：在 :root 中定义语义化颜色变量，通过主题类名（如 .theme-dark）覆盖变量值，元素样式用 var() 引用，配合 JS 切换类名并持久化用户偏好。
用 CSS 自定义属性（var()）定义颜色变量，再配合不同主题类名切换根元素的变量值，就能让文字颜色自动随主题变化。
在 :root 中定义基础颜色变量
把常用颜色抽成 CSS 变量，统一放在 :root 里，方便全局复用：
:root {
--text-color: #333;
--bg-color: #fff;
--primary-color: #007bff;
}
这样所有组件都能用 color: var(--text-color) 来引用，而不是写死颜色值。
立即学习“前端免费学习笔记（深入）”；
为不同主题单独覆盖变量值
给 或 添加主题类名（如 theme-dark），并在对应选择器中重设变量：
.theme-dark {
--text-color: #e0e0e0;
--bg-color: #1a1a1a;
--primary-color: #4dabf7;
}
只要切换 class，所有用到这些变量的地方都会实时更新，无需改 HTML 或 JS 样式逻辑。
在元素上使用变量，保持响应式联动
文字、边框、背景等样式直接调用变量即可，确保主题一换，全部同步响应：
p { color: var(--text-color); }.btn { background: var(--primary-color); color: white; }body { background-color: var(--bg-color); }
注意：变量必须在使用前已定义（通常靠顺序或 :root 保证），且作用域正确（:root 定义的是全局变量，类名覆盖也需生效在同级或更广范围）。
配合 JS 切换主题更灵活
用 JavaScript 控制 class 切换，还能存用户偏好到 localStorage：
document.documentElement.classList.toggle('theme-dark');
或者：document.documentElement.className = 'theme-dark';
加载页面时读取本地存储，自动应用上次选的主题，体验更连贯。
基本上就这些。不复杂但容易忽略的是：变量名要语义化（比如别叫 --c1）、覆盖要写对选择器优先级、以及确保初始主题有默认值兜底。
