网页暗黑模式切换并持久化需结合window.matchmedia监听系统偏好、localstorage保存用户选择、document.documentelement.classlist控制样式：先读localstorage，未设置则fallback至系统偏好，按钮点击时切换并同步存储与class。
网页暗黑模式切换并持久化，核心是结合 BOM（Browser Object Model）中的 window.matchMedia、localStorage 和 document.documentElement.classList 来实现：监听系统偏好、响应用户手动切换、保存选择、初始化时还原。
监听系统暗黑偏好（自动适配）
利用 window.matchMedia('(prefers-color-scheme: dark)') 获取当前系统主题，并可添加监听器，在系统设置变更时自动同步页面：
- 调用
matchMedia返回一个MediaQueryList对象，其matches属性为true表示系统处于暗黑模式 - 使用
.addEventListener('change', handler)监听系统主题变化（注意：旧版 Safari 需用addListener） - 建议在初始化时先读取 localStorage，仅当未手动设置过时才按系统偏好启用暗黑模式
保存与读取用户选择（localStorage）
用户主动点击切换按钮后，把模式写入 localStorage，下次访问时优先以此为准：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 存值：例如
localStorage.setItem('theme', 'dark')或'light' - 读值：用
localStorage.getItem('theme')，返回null表示未设置过 - 推荐统一用小写字符串存储，避免大小写歧义；也可存布尔值，但字符串更易调试
切换 DOM 样式类（class 控制 CSS）
不建议直接改内联样式或重写 CSS 规则，而是通过给 或 添加 class 控制主题：
- 例如：启用暗黑模式时执行
document.documentElement.classList.add('dark') - 关闭时用
.remove('dark')，或统一用.toggle('dark', isDark)更简洁 - CSS 中用
.dark { --bg: #121212; --text: #e0e0e0; }配合 CSS 变量，实现高效主题切换
初始化与按钮交互逻辑（完整闭环）
页面加载时需完成「读取 → 应用 → 绑定」三步；按钮点击则触发「切换 → 存储 → 更新 class」：
- 初始化函数中：先读
localStorage，有值就用它；无值则 fallback 到matchMedia结果 - 为切换按钮绑定
click事件，反转当前模式（如当前是 light，则设为 dark），再存入 localStorage 并更新 class - 可选：在页面右上角加一个图标按钮，用 ? / ☀️ 表情或 SVG 提示当前状态，提升体验
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
