深色/浅色模式切换核心是操作document.documentElement的data-theme属性并配合CSS变量。通过localStorage持久化用户选择，fallback至系统偏好prefers-color-scheme，并监听其变化；按钮需支持ARIA属性实现无障碍。
JavaScript 实现深色/浅色模式切换，核心是操作 document.documentElement 的 class 或 data-theme 属性，并配合 CSS 变量和媒体查询做样式适配。关键不在于 JS 多复杂，而在于结构清晰、状态可持久、响应及时。
1. 基础 HTML 结构与 CSS 变量准备
先在 CSS 中定义两套主题变量，用 :root 和 [data-theme="dark"] 区分：
:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e0e0e0;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #e0e0e0;
--border-color: #333333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
border-color: var(--border-color);
}
这样只需切换 data-theme，整个页面样式就自动更新。
2. JavaScript 切换逻辑（含系统偏好与手动控制）
用一个函数统一处理主题设置，支持三种来源：用户手动选择、系统偏好、默认回退：
立即学习“Java免费学习笔记（深入）”；
- 读取 localStorage 获取上次保存的主题（优先级最高）
- 若无保存，则监听
prefers-color-scheme获取系统设置（dark或light） - 设置
document.documentElement.dataset.theme并存入 localStorage - 为按钮绑定点击事件，调用该函数并传入目标主题
示例代码：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
function setTheme(theme) {
const root = document.documentElement;
root.dataset.theme = theme;
localStorage.setItem('theme', theme);
}
// 初始化
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme) {
setTheme(savedTheme);
} else {
setTheme(systemPrefersDark ? 'dark' : 'light');
}
// 切换按钮示例（假设有一个 id="theme-toggle" 的按钮）
document.getElementById('theme-toggle').addEventListener('click', () => {
const current = document.documentElement.dataset.theme;
const next = current === 'dark' ? 'light' : 'dark';
setTheme(next);
});
3. 响应系统主题变化（可选但推荐）
如果用户系统设置变更（比如夜间自动切深色），网页也应同步更新，避免体验割裂：
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
setTheme(e.matches ? 'dark' : 'light');
}
});
注意：仅在用户未手动设置时才响应系统变化，否则会覆盖用户选择。
4. 提供 UI 控件与无障碍支持
按钮建议用语义化标签，添加 ARIA 属性说明当前状态：
<button id="theme-toggle" aria-label="切换深色模式" aria-pressed="false" > ? </button>
JS 中同步更新 aria-pressed：
const btn = document.getElementById('theme-toggle');
btn.setAttribute('aria-pressed', document.documentElement.dataset.theme === 'dark');
这样屏幕阅读器能准确传达当前模式，也方便后续加图标或文字提示。
