JavaScript实现主题切换的核心是通过动态修改CSS变量或类名，并结合localStorage持久化用户偏好。以下是具体实现方案及关键细节：
一、CSS变量定义与主题结构- 基础变量定义在:root中定义默认主题变量，采用语义化命名（如--color-primary而非--red），便于维护和扩展：
:root { --color-primary: #007bff; --color-text-default: #333; --color-background-page: #fff; --font-family-base: "Helvetica Neue", sans-serif; --spacing-md: 16px; --shadow-elevation-1: 0 1px 3px rgba(0,0,0,0.1);}- 暗色主题覆盖通过.dark-theme类覆盖需要修改的变量，实现增量式更新：
.dark-theme { --color-primary: #61dafb; --color-text-default: #e0e0e0; --color-background-page: #282c34; --shadow-elevation-1: 0 2px 8px rgba(0,0,0,0.3);}- 应用变量到元素将变量绑定到实际DOM元素的样式属性：
body { background-color: var(--color-background-page); color: var(--color-text-default); font-family: var(--font-family-base); transition: all 0.3s ease; /* 平滑过渡效果 */}button { background-color: var(--color-primary); padding: var(--spacing-md); box-shadow: var(--shadow-elevation-1);}二、JavaScript实现逻辑- 初始化主题状态页面加载时从localStorage读取保存的主题，并应用到<body>：
document.addEventListener('DOMContentLoaded', () => { const body = document.body; const savedTheme = localStorage.getItem('theme') || 'light-theme'; body.classList.add(savedTheme);});- 切换主题函数通过按钮点击事件切换类名，并更新存储：
function toggleTheme() { const body = document.body; const isDark = body.classList.contains('dark-theme'); // 切换类名 body.classList.toggle('dark-theme'); // 更新localStorage const theme = isDark ? 'light-theme' : 'dark-theme'; localStorage.setItem('theme', theme);}// 绑定按钮事件document.getElementById('theme-toggle').addEventListener('click', toggleTheme);三、JavaScript与CSS变量直接交互- 动态修改变量值直接操作document.documentElement.style修改全局变量：
// 设置变量document.documentElement.style.setProperty('--color-primary', '#ff5722');// 获取变量值const primaryColor = getComputedStyle(document.documentElement) .getPropertyValue('--color-primary');console.log(primaryColor); // 输出当前值- 动态场景应用示例根据滚动位置调整头部透明度：
window.addEventListener('scroll', () => { const scrollY = window.scrollY; const opacity = Math.min(1, scrollY / 200); // 滚动200px后完全不透明 document.documentElement.style.setProperty('--header-opacity', opacity);});header { opacity: var(--header-opacity, 1); /* 默认值为1 */}四、主题变量的扩展应用除颜色外，主题可控制以下维度：
字体排版
--font-family-base: 基础字体族（如衬线/无衬线）
--font-size-body: 正文字号（支持阅读模式/紧凑模式切换）
--line-height-base: 行高影响阅读舒适度
间距与布局
--spacing-unit: 统一间距单位（如8px/16px）
--border-radius-base: 圆角大小（锐利/圆润风格）
--max-width-content: 内容区域最大宽度（优化阅读体验）
阴影与深度
--shadow-elevation-1/2: 不同层级的阴影效果（暗色主题需更柔和）
动画与过渡
--transition-speed-base: 控制动画速度（可提供“减少动画”主题）
图片与图标
通过CSS类名切换background-image或直接修改<img>的src属性。
SVG图标使用fill: var(--icon-color)实现颜色动态变化。
五、方案优势与适用场景- 类名切换：适合主题变量较多且结构固定的场景，代码清晰，维护方便。
- 直接操作变量：适用于需要动态计算的场景（如根据用户行为调整样式）。
- 扩展性：通过语义化变量命名和分层设计，可轻松支持高对比度、节日主题等复杂需求。
（示例图：亮色与暗色主题切换的平滑过渡效果）通过上述方法，可构建一个灵活、可维护的主题系统，满足用户个性化需求的同时保持代码简洁性。
