CSS变量var()快速切换主题颜色教程

本文详解了如何利用CSS自定义属性（以--开头的变量）配合var()函数与轻量JavaScript，实现高效、可维护的多主题动态换肤功能——从定义全局主题变量、设置优雅降级默认值，到通过classList切换主题类并结合localStorage持久化用户偏好，全程无需重复编写CSS样式，轻松支持日间/夜间及多种色彩主题（如护眼绿、深蓝等），让界面风格切换既简洁又强大。

在CSS中使用CSS变量（也称自定义属性）可以轻松实现主题颜色的动态切换。通过 var() 函数调用变量，配合简单的JavaScript操作，能快速改变页面整体风格，比如从“白天模式”切换到“夜间模式”。

定义CSS变量

CSS变量以两个连字符（--）开头，通常定义在 :root 选择器中，这样变量可以在整个文档中被访问。

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --text-color: #212529;
  --bg-color: #ffffff;
}
<p>body {
background-color: var(--bg-color);
color: var(--text-color);
}</p><p>.btn-primary {
background-color: var(--primary-color);
}</p>

利用 var() 使用变量

var() 函数用于引用已定义的CSS变量。它还可以设置默认值，以防变量未定义：

.element {
  color: var(--text-color, #000); /* 如果 --text-color 不存在，使用黑色 */
}

切换主题：通过类控制变量

要实现快速换肤，可以在不同主题下重写变量值。例如，为“暗色主题”添加一个 .dark-theme 类：

.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --primary-color: #00bcd4;
  --secondary-color: #9c27b0;
}

然后通过JavaScript在 body 或 html 上添加或移除该类：

document.documentElement.classList.toggle('dark-theme');

实际应用场景示例

• 用户点击“切换主题”按钮时，执行JS更改类名，所有使用 var() 的样式自动更新
• 结合 localStorage 记住用户偏好，刷新后仍保持主题
• 可扩展支持多种主题，如红色系、深蓝、护眼绿等，只需定义对应变量组

基本上就这些。用好CSS变量 + var()，再配合一点JS，就能实现高效、灵活的主题切换系统，无需重复写样式，维护也更方便。不复杂但容易忽略细节。

本篇关于《CSS变量var()快速切换主题颜色教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！