通过 css 自定义属性（css variables）配合 javascript 动态切换，可在一处修改颜色值，实时更新全站主题色，无需重复编写多套 css 类。
实现“一处定义、全局生效”的多色主题切换，核心在于将主题色抽离为可动态更新的 CSS 自定义属性（CSS Custom Properties），再通过 JavaScript 修改其值，从而驱动所有依赖该变量的样式自动重绘。这种方式比传统 class 切换更简洁、可维护性更强，也更符合现代 Web 开发实践。
✅ 推荐实现方案：CSS 变量 + JavaScript 控制
1. 定义全局主题变量（在 :root 中）
:root {
--primary-color: #3498db;
--secondary-color: #2c3e50;
--accent-color: #e74c3c;
--text-color: #333;
--bg-color: #f9f9f9;
}2. 在 CSS 中统一使用这些变量
header, .navbar {
background-color: var(--primary-color);
color: white;
}
button, .btn {
background-color: var(--accent-color);
border-color: var(--primary-color);
}
a {
color: var(--primary-color);
}
body {
color: var(--text-color);
background-color: var(--bg-color);
}3. 用 JavaScript 动态更新变量（例如点击色块时）
<!-- 左侧颜色选择器 --> <div class="theme-switcher"> <button data-color="#3498db">蓝色</button> <button data-color="#2ecc71">绿色</button> <button data-color="#e74c3c">红色</button> <button data-color="#9b59b6">紫色</button> </div>
document.querySelectorAll('.theme-switcher button').forEach(btn => {
btn.addEventListener('click', () => {
const color = btn.dataset.color;
document.documentElement.style.setProperty('--primary-color', color);
// 可选：同步更新其他关联色（如根据主色自动生成对比色）
document.documentElement.style.setProperty('--accent-color',
color === '#3498db' ? '#e74c3c' :
color === '#2ecc71' ? '#f39c12' : '#9b59b6'
);
});
});⚠️ 注意事项
- 作用域准确：务必在 :root（即 document.documentElement）上设置变量，确保全局可访问；
- 性能友好：CSS 变量更新是原生触发的样式重计算，无 DOM 重排开销，响应迅速；
- 兼容性：支持 Chrome 49+、Firefox 31+、Safari 9.1+、Edge 16+；如需兼容 IE，需降级为 class 切换方案（如 body.theme-blue）；
- 可扩展性：可结合 localStorage 持久化用户偏好，页面刷新后自动恢复主题；
- 设计系统友好：变量命名建议语义化（如 --color-brand-primary），便于团队协作与主题包管理。
通过该方式，你不仅能实现类似 Rikada 主题中左侧调色盘的交互体验，还能为后续深色模式、高对比度模式等扩展打下坚实基础——真正实现“写一次，处处生效”的现代 CSS 主题管理。
