CSS变量实现主题切换教程

学习文章要努力，但是不要急！今天的这篇文章《CSS变量与渐变实现主题切换教程》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

通过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 属性中引用已定义的渐变变量。

.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');
  }
}

绑定到按钮点击事件后，用户点击即可切换主题，所有依赖变量的样式（包括渐变）会自动响应变化。

到这里，我们也就讲完了《CSS变量实现主题切换教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！