本文介绍如何利用 JavaScript 动态修改 HTML 中的 CSS 自定义属性（如 --background-blue-primary），实现点击按钮即时切换主题色，无需重载页面或替换整个 CSS 文件。
本文介绍如何利用 javascript 动态修改 html 中的 css 自定义属性（如 `--background-blue-primary`），实现点击按钮即时切换主题色，无需重载页面或替换整个 css 文件。
在现代 Web 开发中，CSS 自定义属性（又称 CSS 变量）为动态主题切换提供了轻量、高效且语义清晰的解决方案。与传统通过切换 class 或加载不同样式表的方式相比，直接修改 :root 下的变量值，能实现毫秒级响应，并天然支持继承与级联。
✅ 基础实现：修改根级 CSS 变量
首先，在 CSS 中定义变量并应用：
:root {
--background-blue-primary: #005a9e;
}
body {
background-color: var(--background-blue-primary);
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
HTML 结构简洁明了：
<div class="content"> This is some content to see the effect of theme change. </div> <button id="themeChangeButton">Change Theme</button>
关键在于 JavaScript：通过 document.documentElement.style.setProperty() 直接更新 :root 作用域下的变量值：
document.getElementById('themeChangeButton')
.addEventListener('click', () => {
document.documentElement.style.setProperty('--background-blue-primary', '#ff4500');
});
✅ 此方式的优势在于：
- 修改的是全局根变量，所有使用 var(--background-blue-primary) 的元素会自动重新计算样式；
- 无需操作 DOM 类名或样式表，代码简洁、可维护性强；
- 支持链式调用，可一次性设置多个变量（例如同时更新背景、文字、边框等主题色）。
? 进阶技巧：多主题切换与状态管理
若需支持“深色/浅色”或“蓝/橙/紫”多主题，推荐将配色方案预设为对象，并记录当前主题状态：
const themes = {
blue: { '--background-blue-primary': '#005a9e', '--text-primary': '#333' },
orange: { '--background-blue-primary': '#ff4500', '--text-primary': '#fff' },
dark: { '--background-blue-primary': '#1a1a2e', '--text-primary': '#e6e6e6' }
};
let currentTheme = 'blue';
function applyTheme(themeName) {
const vars = themes[themeName];
Object.entries(vars).forEach(([prop, value]) => {
document.documentElement.style.setProperty(prop, value);
});
currentTheme = themeName;
}
// 切换到橙色主题
document.getElementById('themeChangeButton').addEventListener('click', () => {
const next = currentTheme === 'blue' ? 'orange' : 'blue';
applyTheme(next);
});
⚠️ 注意事项
- ❗ setProperty() 仅影响 内联样式层（element.style），但因 :root 对应 document.documentElement，其 .style 实际映射到 元素的内联样式，而 CSS 变量具有全局作用域，因此完全生效；
- ❗ 变量名必须严格匹配（含 -- 前缀），大小写敏感；
- ✅ 推荐配合 prefers-color-scheme 自动适配系统偏好，提升用户体验；
- ✅ 若需持久化用户选择，可结合 localStorage 存储主题名称并在页面加载时恢复。
通过以上方法，你已掌握基于 CSS 变量的主题动态切换核心能力——轻量、标准、可扩展，是构建现代化响应式界面的重要实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
