通过CSS变量与渐变结合实现主题切换，定义在:root和[data-theme="dark"]中的颜色与渐变可全局复用，利用var()引用--gradient-primary等变量，配合JavaScript切换data-theme属性，即可动态更新所有样式，包括背景渐变，无需重绘，性能更优。
在现代网页开发中，使用CSS变量和渐变实现主题切换是一种高效且灵活的方式。通过定义可复用的颜色变量，并结合 linear-gradient 创建丰富的视觉效果，可以轻松在不同主题（如亮色/暗色模式）之间切换。
定义CSS颜色变量
将常用颜色定义为CSS自定义属性（变量），便于统一管理和动态修改。通常将变量写在 :root 中，以便全局访问。
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--bg-color: #ffffff;
--text-color: #333333;
--gradient-primary: linear-gradient(45deg, #007bff, #6610f2);
}
[data-theme="dark"] {
--primary-color: #0056b3;
--secondary-color: #495057;
--bg-color: #1a1a1a;
--text-color: #f8f9fa;
--gradient-primary: linear-gradient(45deg, #0056b3, #492786);
}
通过给 html 或 body 添加 data-theme="dark" 类，即可切换到暗色主题。所有使用这些变量的样式会自动更新。
在渐变中使用变量
CSS 渐变本身不直接接受变量作为参数，但可以通过 var() 在 background 属性中引用已定义的渐变变量。
Java 接口排错助手
下载
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
立即学习“前端免费学习笔记（深入）”；
.btn-gradient {
background: var(--gradient-primary);
color: var(--text-color);
border: none;
padding: 12px 24px;
border-radius: 6px;
}
这样按钮的背景会根据当前主题显示对应的渐变效果。无需JavaScript重绘，性能更优。
通过JavaScript切换主题
使用一小段JS即可实现主题切换，改变根元素的 data-theme 属性，触发CSS变量更新。
function toggleTheme() {
const html = document.documentElement;
if (html.getAttribute('data-theme') === 'dark') {
html.removeAttribute('data-theme');
} else {
html.setAttribute('data-theme', 'dark');
}
}
绑定到按钮点击事件后，用户点击即可切换主题，所有依赖变量的样式（包括渐变）会自动响应变化。
提示： 渐变变量必须完整定义为字符串（如linear-gradient(...)），不能只传颜色值进去拼接，否则语法无效。
基本上就这些。用好CSS变量和渐变，主题系统变得简洁又强大。 
