JS如何实现暗黑模式

JS实现暗黑模式的核心步骤如下：

• 预定义CSS变量区分主题在CSS中通过:root定义亮色模式变量，通过.dark-mode类定义暗黑模式变量。例如：

  :root { --bg-color: #ffffff; --text-color: #000000; --icon-color: #000000;}.dark-mode { --bg-color: #333333; --text-color: #ffffff; --icon-color: #ffffff;}body { background-color: var(--bg-color); color: var(--text-color);}.icon { fill: var(--icon-color);}
  通过CSS变量统一管理颜色，便于后续切换。

• 监听按钮事件切换主题使用JavaScript监听按钮点击，切换body的dark-mode类，并保存用户偏好到localStorage：

  const toggleButton = document.getElementById('darkModeToggle');const body = document.body;toggleButton.addEventListener('click', () => { body.classList.toggle('dark-mode'); localStorage.setItem('darkMode', body.classList.contains('dark-mode') ? 'enabled' : 'disabled');});

  HTML结构需包含切换按钮：

  <button id="darkModeToggle">切换暗黑模式</button>

• 页面加载时恢复用户偏好检查localStorage中的设置，若无记录则检测系统偏好（prefers-color-scheme）：

  if (localStorage.getItem('darkMode') === 'enabled') { body.classList.add('dark-mode');} else if (localStorage.getItem('darkMode') === null) { const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; if (prefersDarkMode) body.classList.add('dark-mode');}

• 处理图片与图标适配

  SVG图标：通过CSS变量控制填充色，无需切换资源。

  位图图片：提供双版本资源，使用srcset或动态修改src：<img src="light-mode-image.png" srcset="dark-mode-image.png 2x" alt="描述">或通过JavaScript切换：const img = document.getElementById('themeImage');img.src = body.classList.contains('dark-mode') ? 'dark-mode-image.png' : 'light-mode-image.png';

  CSS滤镜：对简单图片使用filter: invert(1)反转颜色（效果可能不完美）。

• 动态修改CSS变量实现高级定制通过document.documentElement.style.setProperty动态调整变量，例如修改字体或间距：

  :root { --font-family: 'Arial, sans-serif'; --padding: 10px;}.dark-mode { --font-family: 'Helvetica, sans-serif'; --padding: 15px;}body { font-family: var(--font-family); padding: var(--padding);}

  JavaScript动态修改：

  document.documentElement.style.setProperty('--font-family', 'Verdana, sans-serif');

• 结合系统偏好与手动切换监听系统主题变化并更新界面：

  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { if (localStorage.getItem('darkMode') === null) { body.classList.toggle('dark-mode', e.matches); }});

完整实现流程：

1. 定义CSS变量：区分亮色/暗黑模式的颜色、字体等属性。
2. 监听用户操作：通过按钮切换dark-mode类，并保存偏好到localStorage。
3. 初始化主题：页面加载时优先读取localStorage，无记录则检测系统偏好。
4. 适配图片/图标：使用SVG变量、双资源或滤镜处理视觉元素。
5. 动态定制：通过JS修改CSS变量实现高级主题控制。

注意事项：

• 避免直接操作样式表，优先使用CSS变量和类切换。
• 测试不同浏览器的prefers-color-scheme支持情况。
• 对动态内容（如AJAX加载的图片）需额外处理主题适配。

通过以上方法，可实现一个兼容用户偏好、系统设置且支持持久化的暗黑模式方案。