实现暗黑模式需构建“检测→切换→存储→适配”闭环。首先通过 prefers-color-scheme 检测系统偏好并初始化主题，监听其变化以实时同步；提供 toggleTheme() 接口供用户手动切换，并将选择存入 localStorage 实现持久化；利用CSS自定义属性集中定义亮/暗色变量，通过JS切换 .dark-mode 类触发全局样式更新；最终封装为插件，暴露 init、toggle、set 等API，自动处理类名注入与回调，提升复用性与维护性。
实现暗黑模式切换的核心在于动态控制页面的CSS主题，并持久化用户偏好。通过JavaScript插件的方式封装这一逻辑，既能提升复用性，又能简化多主题管理。关键点包括：检测系统偏好、切换主题类名、保存用户设置以及适配现有样式。
监听系统偏好与初始化主题
浏览器提供 prefers-color-scheme 媒体查询，可用于获取用户的系统级色彩偏好。插件初始化时应优先读取该设置，确保与系统一致。
代码示例：
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkMode) {
document.body.classList.add('dark-mode');
}
同时可监听变化，实时响应系统主题切换：
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', e => {
if (e.matches) {
enableDarkMode();
} else {
disableDarkMode();
}
});
提供手动切换功能与状态持久化
用户可能希望脱离系统设置自定义主题。插件需暴露切换接口，并将选择存储在 localStorage 中，避免每次刷新重置。
立即学习“Java免费学习笔记（深入）”；
常见操作流程：
- 添加按钮触发 toggleTheme() 函数
- 函数中切换 body 上的 dark-mode 类
- 将当前状态（'dark' 或 'light'）存入 localStorage
- 初始化时优先读取 localStorage，若无则回退到系统偏好
function toggleTheme() {
const current = localStorage.getItem('theme') || 'auto';
if (current === 'dark') {
disableDarkMode();
localStorage.setItem('theme', 'light');
} else {
enableDarkMode();
localStorage.setItem('theme', 'dark');
}
}
CSS主题适配与变量组织
推荐使用CSS自定义属性（CSS Variables）集中管理颜色方案，便于JS操作和维护。
在 :root 中定义默认（亮色）变量，在 .dark-mode 下覆盖为暗色值：
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
.dark-mode {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
这样只需切换一个 class，所有使用变量的元素自动更新样式。
插件封装建议
将上述逻辑封装成独立模块，对外暴露简洁API：
- init() - 初始化主题（根据存储或系统）
- toggle() - 切换主题
- set(theme) - 强制设置主题（'light'/'dark'/'auto'）
插件可自动注入必要的CSS类名，减少开发者配置成本。同时支持事件回调，如 onThemeChange 回调通知主题变更。
基本上就这些。核心是“检测→切换→存储→适配”四步闭环，结合CSS变量能高效实现完整暗黑模式体验。
