通过CSS变量和JavaScript实现主题切换，先定义:root中的--变量，用var()引用并设置默认值，再通过classList.toggle('dark-theme')切换主题类，结合localStorage保存偏好，实现多主题动态换肤。
在CSS中使用CSS变量（也称自定义属性）可以轻松实现主题颜色的动态切换。通过 var() 函数调用变量，配合简单的JavaScript操作，能快速改变页面整体风格，比如从“白天模式”切换到“夜间模式”。
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() 函数用于引用已定义的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');
基本上就这些。用好CSS变量 + var()，再配合一点JS，就能实现高效、灵活的主题切换系统，无需重复写样式，维护也更方便。不复杂但容易忽略细节。
以上就是如何在CSS中使用CSS变量修改主题颜色_var()快速切换风格的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
531
收藏
