javascript可通过dom操作css自定义属性实现动态主题切换，核心是style.setproperty()设置和getcomputedstyle().getpropertyvalue()读取；推荐用类名切换预设主题、监听prefers-color-scheme及持久化用户选择。
JavaScript可以通过DOM直接读写CSS自定义属性（即CSS变量），实现无需刷新页面的主题切换，核心在于操作style.setProperty()和getComputedStyle()，并结合:root或特定元素的style对象。
获取与设置CSS变量的DOM方法
设置变量需调用元素的style.setProperty()，读取则需通过getComputedStyle()再用getPropertyValue()。对全局主题而言，通常操作document.documentElement（即:root）：
- 设置：
document.documentElement.style.setProperty('--primary-color', '#4a6fa5'); - 读取：
getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); - 注意：读取值始终为字符串，可能带空格，建议
trim()；未定义的变量返回空字符串，不是undefined
基于类名切换预设主题（推荐做法）
比起逐个设置变量，更可靠的方式是预先在CSS中定义多套主题规则，用JavaScript切换或的类名，让CSS引擎自动计算变量值：
- CSS中写：
:root.dark { --bg: #121212; --text: #e0e0e0; } - JS切换：
document.documentElement.classList.toggle('dark'); - 优势：样式集中管理、支持CSS过渡动画、避免JS硬编码颜色值、便于维护深色/高对比等模式
监听系统级主题变化并同步
利用window.matchMedia()可响应操作系统或浏览器的主题偏好，实现自动适配：
- 监听代码：
const darkMode = window.matchMedia('(prefers-color-scheme: dark)'); - 初始设置：
document.documentElement.classList.toggle('dark', darkMode.matches); - 绑定事件：
darkMode.addEventListener('change', e => { document.documentElement.classList.toggle('dark', e.matches); }); - 注意：Safari需用
addListener旧API兼容，现代浏览器推荐addEventListener
保存用户选择并持久化
用户手动切换的主题应存入localStorage，页面加载时优先读取，再回退到系统偏好：
- 保存：
localStorage.setItem('theme', 'dark'); - 读取并应用：
const saved = localStorage.getItem('theme'); if (saved) document.documentElement.setAttribute('data-theme', saved); - 配合CSS规则：
:root[data-theme="dark"] { --bg: #1a1a1a; }，比class更灵活，支持多主题扩展 - 注意：避免在
DOMContentLoaded前读取localStorage，否则可能因执行时机问题失效
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
