答案是通过 css 变量与 javaScript 动态切换 data-theme 属性实现多主题。利用：root 定义不同主题的 CSS 变量，应用到页面样式，并通过js 切换 html 标签的 data-theme 值，结合 localStorage 保存用户偏好，实现主题持久化，结构清晰且易于扩展。
实现多主题切换效果，核心思路是动态改变页面的 css 样式。常用方法是通过 CSS 变量配合javascript 操作 HTML 根元素的类名或属性，从而快速切换不同主题。下面介绍一种实用且易于维护的方式。
使用 CSS 自定义变量定义主题
在 CSS 中，可以利用 :root 定义 全局变量，每个主题对应一组变量值。例如定义亮色和暗色两种主题：
:root[data-theme="light"] {--bg-color: #ffffff; --text-color: #000000; --border-color: #cccccc;} :root[data-theme="dark"] {--bg-color: #1a1a1a; --text-color: #ffffff; --border-color: #444444;} :root[data-theme="blue"] {--bg-color: #e6f7ff; --text-color: #003366; --border-color: #91d5ff;}通过给 <html> 标签设置 data-theme 属性，即可激活对应主题。
统一应用变量到页面样式
将定义好的 CSS 变量应用到页面通用样式中，确保所有元素都能响应主题变化：
立即学习 “ 前端免费学习笔记（深入）”；
body {background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; } .card {border: 1px solid var(--border-color); padding: 16px; margin: 10px 0; }加入 transition 可以让颜色切换更平滑，提升用户体验。
用 JavaScript 切换主题
通过 JS 读取用户选择，并更新 data-theme 属性。例如有三个按钮：
<button onclick="setTheme('light')"> 浅色 </button> <button onclick="setTheme('dark')"> 深色 </button> <button onclick="setTheme('blue')"> 蓝色 </button>对应的 JS 函数：
function setTheme(theme) {document.documentElement.setAttribute('data-theme', theme); // 可选：保存用户偏好 localStorage.setItem('theme', theme); } // 页面加载时恢复上次选择的主题 window.onload = function() { const savedTheme = localStorage.getItem('theme') || 'light'; setTheme(savedTheme); }这样用户刷新页面后仍能保持之前的选择。
扩展支持更多主题或组件
如果需要支持更多主题，只需在 :root 中添加新的 [data-theme=”xxx”] 规则。对于复杂组件，也可以在其样式中使用这些变量，或为特定组件定义专属变量，实现更精细的控制。
基本上就这些。这种方式结构清晰、维护方便，适合大多数需要多主题切换的项目。关键点在于统一变量命名、合理组织 CSS 结构，并通过 JS 灵活控制根属性。不复杂但容易忽略细节，比如初始状态和 持久化存储。
