实现暗黑模式切换的JavaScript插件需要构建一个完整的闭环系统，涵盖系统偏好检测、主题切换、状态持久化和样式适配。以下是具体实现方法：
一、核心实现逻辑- 系统偏好检测
// 检测系统暗黑模式偏好const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;// 初始化主题（优先级：localStorage > 系统偏好）function initTheme() { const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'dark' || (savedTheme === 'auto' && isDarkMode)) { enableDarkMode(); } else if (savedTheme === 'light') { disableDarkMode(); } else { // 默认回退到系统偏好 isDarkMode ? enableDarkMode() : disableDarkMode(); }}// 监听系统主题变化window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', e => { const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'auto') { e.matches ? enableDarkMode() : disableDarkMode(); } });- 主题切换与状态存储
function toggleTheme() { const current = localStorage.getItem('theme') || 'auto'; if (current === 'dark') { disableDarkMode(); localStorage.setItem('theme', 'light'); } else { enableDarkMode(); localStorage.setItem('theme', 'dark'); }}function enableDarkMode() { document.body.classList.add('dark-mode'); document.body.classList.remove('light-mode');}function disableDarkMode() { document.body.classList.remove('dark-mode'); document.body.classList.add('light-mode');}二、CSS变量体系:root { /* 亮色主题变量 */ --bg-color: #ffffff; --text-color: #333333; --primary-color: #4285f4;}.dark-mode { /* 暗色主题变量 */ --bg-color: #1a1a1a; --text-color: #f0f0f0; --primary-color: #8ab4f8;}/* 组件样式使用变量 */body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s;}button { background-color: var(--primary-color); color: white;}三、插件封装方案class ThemeManager { constructor(options = {}) { this.options = { defaultTheme: 'auto', autoModeKey: 'theme', ...options }; this.init(); } init() { const savedTheme = localStorage.getItem(this.options.autoModeKey); const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches; if (savedTheme === 'dark' || (savedTheme === 'auto' && systemTheme)) { this.enableDarkMode(); } else if (savedTheme === 'light') { this.disableDarkMode(); } else { systemTheme ? this.enableDarkMode() : this.disableDarkMode(); } this.bindEvents(); } bindEvents() { window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', e => { if (localStorage.getItem(this.options.autoModeKey) === 'auto') { e.matches ? this.enableDarkMode() : this.disableDarkMode(); } }); } toggle() { const current = localStorage.getItem(this.options.autoModeKey) || 'auto'; if (current === 'dark') { this.disableDarkMode(); localStorage.setItem(this.options.autoModeKey, 'light'); } else { this.enableDarkMode(); localStorage.setItem(this.options.autoModeKey, 'dark'); } } set(theme) { if (['light', 'dark', 'auto'].includes(theme)) { localStorage.setItem(this.options.autoModeKey, theme); this.init(); // 重新初始化应用主题 } } enableDarkMode() { document.body.classList.add('dark-mode'); document.body.classList.remove('light-mode'); this.triggerCallback('dark'); } disableDarkMode() { document.body.classList.remove('dark-mode'); document.body.classList.add('light-mode'); this.triggerCallback('light'); } onThemeChange(callback) { this.themeChangeCallback = callback; } triggerCallback(theme) { if (typeof this.themeChangeCallback === 'function') { this.themeChangeCallback(theme); } }}// 使用示例const themeManager = new ThemeManager();themeManager.onThemeChange(theme => { console.log('当前主题:', theme);});四、关键实现要点优先级控制
用户手动设置 > localStorage存储 > 系统偏好 > 插件默认值
性能优化
使用CSS变量实现样式集中管理
添加0.3s过渡效果提升体验
避免频繁DOM操作
扩展性设计
支持自定义存储键名
提供主题变更回调
可配置默认主题策略
兼容性处理
对不支持CSS变量的浏览器提供降级方案
检测localStorage可用性
五、完整使用流程- 引入插件
<script src="theme-manager.js"></script>- 初始化插件
const theme = new ThemeManager({ defaultTheme: 'auto', autoModeKey: 'app-theme'});- HTML结构
<button onclick="theme.toggle()">切换主题</button><select onchange="theme.set(this.value)"> <option value="auto">跟随系统</option> <option value="light">亮色模式</option> <option value="dark">暗黑模式</option></select>- 监听主题变化
theme.onThemeChange(theme => { // 执行自定义逻辑（如更新图标等）});该实现方案通过模块化封装，提供了完整的暗黑模式生命周期管理，开发者只需关注业务逻辑，无需重复处理主题切换的基础功能。CSS变量与JavaScript的配合实现了样式与逻辑的解耦，大幅提升了代码的可维护性。
