本文介绍如何利用javascript在用户点击按钮时动态修改css自定义属性（如 --background-blue-primary），实现无需刷新页面的主题切换效果，核心是通过 document.documentelement.style.setproperty() 操作根元素的css变量。
本文介绍如何利用javascript在用户点击按钮时动态修改css自定义属性（如 --background-blue-primary），实现无需刷新页面的主题切换效果，核心是通过 document.documentelement.style.setproperty() 操作根元素的css变量。
在现代Web开发中，CSS自定义属性（又称CSS变量）为动态主题切换提供了简洁高效的解决方案。相比传统替换整个CSS文件或内联样式，直接修改:root作用域下的变量既能保持样式结构清晰，又能实现即时、可维护的视觉更新。
✅ 基础实现步骤
- 在CSS中定义变量：将颜色等可变值声明在 :root 伪类中，确保全局可访问；
- 在样式规则中使用 var() 引用变量；
- 通过JavaScript监听按钮点击事件，并调用 setProperty() 修改变量值。
以下是一个完整、可运行的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态主题切换</title>
<style>
:root {
--background-blue-primary: #005a9e;
}
body {
margin: 0;
padding: 2rem;
background-color: var(--background-blue-primary);
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
transition: background-color 0.3s ease; /* 添加平滑过渡 */
}
.content {
max-width: 600px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.1);
padding: 1.5rem;
border-radius: 8px;
}
button {
padding: 0.75rem 1.5rem;
font-size: 1rem;
background: #fff;
color: var(--background-blue-primary);
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 1rem;
transition: all 0.2s;
}
button:hover {
opacity: 0.9;
transform: translateY(-1px);
}
</style>
</head>
<body>
<div class="content">
<h1>主题切换演示</h1>
<p>点击下方按钮，实时更改页面主色调。</p>
</div>
<button id="themeChangeButton">切换为橙色主题</button>
<script>
const button = document.getElementById('themeChangeButton');
let isBlue = true;
button.addEventListener('click', () => {
if (isBlue) {
// 切换为橙色主题
document.documentElement.style.setProperty('--background-blue-primary', '#ff4500');
button.textContent = '切换回蓝色主题';
} else {
// 切换回蓝色主题
document.documentElement.style.setProperty('--background-blue-primary', '#005a9e');
button.textContent = '切换为橙色主题';
}
isBlue = !isBlue;
});
</script>
</body>
</html>⚠️ 注意事项与最佳实践
- 作用域关键：务必使用 document.documentElement.style.setProperty()（而非 document.body.style），因为 :root 对应 <html> 元素，只有操作其 style 才能覆盖全局变量；
- 性能友好：修改CSS变量会自动触发浏览器重绘，但不会导致重排（reflow），因此性能开销极小；
-
可扩展性建议：
- 将多套主题预定义为对象（如 { light: { '--primary': '#333' }, dark: { '--primary': '#eee' } }），便于统一管理；
- 结合 localStorage 持久化用户偏好，刷新后仍保留主题；
- 使用 CSS.supports('color', 'var(--test)') 检测浏览器兼容性（现代浏览器均支持）；
- 避免硬编码：生产环境中建议将颜色值提取为常量或配置项，提升可维护性。
通过这种方式，你不仅能轻松实现单变量切换，还可批量更新多个相关变量（如 --text-color、--border-color 等），构建完整的深色/浅色模式系统。
