如何让单个按钮智能切换亮色/暗色模式-html教程-PHP中文网

如何让单个按钮智能切换亮色/暗色模式

本文介绍如何通过检测用户系统偏好并维护内部状态，实现仅用一个按钮即可在亮色与暗色模式间双向切换，避免因初始模式不匹配导致按钮失效的问题。

本文介绍如何通过检测用户系统偏好并维护内部状态，实现仅用一个按钮即可在亮色与暗色模式间双向切换，避免因初始模式不匹配导致按钮失效的问题。

要让单个按钮真正“智能”地切换主题（无论页面初始加载为亮色还是暗色模式），关键在于：主动感知当前系统偏好，并在 JavaScript 中维护一个准确的模式状态变量，而非依赖 classList.toggle() 的“盲切”行为。

classList.toggle() 本身没有问题，但它只检查元素当前是否含有该 class，而无法反映用户真实意图或系统实际偏好——尤其当页面通过 CSS @media (prefers-color-scheme: dark) 自动启用暗色样式（但未添加 .dark-mode class）时，toggle() 会误判状态，导致点击无效。

✅ 正确做法是：

首次加载时主动读取系统偏好
使用 window.matchMedia('(prefers-color-scheme: dark)').matches 获取用户系统设置，并据此初始化页面状态（如添加 class、设置布尔值）；
用单一状态变量（如 isDarkMode）统一管理模式逻辑；
切换函数基于该状态决定增删 class，而非依赖 DOM 现状。

以下是完整、健壮的实现示例：

<!-- 推荐使用语义化按钮文本 -->
<button id="theme-toggle" aria-label="切换深色/浅色模式">? 切换主题</button>

/* 基础样式（浅色模式为默认） */
body {
  background: #fff;
  color: #333;
  transition: background 0.3s, color 0.3s;
}

.dark-mode {
  background: #1a1a1a;
  color: #e0e0e0;
}

// 1. 初始化：读取系统偏好并同步 DOM
const isSystemDark = window.matchMedia && 
                     window.matchMedia('(prefers-color-scheme: dark)').matches;
let isDarkMode = isSystemDark;

// 应用初始主题
if (isDarkMode) {
  document.body.classList.add('dark-mode');
}

// 2. 定义切换函数
function toggleColorScheme() {
  isDarkMode = !isDarkMode; // 清晰的布尔翻转

  if (isDarkMode) {
    document.body.classList.add('dark-mode');
  } else {
    document.body.classList.remove('dark-mode');
  }
}

// 3. 绑定事件（推荐用 addEventListener 替代内联 onclick）
document.getElementById('theme-toggle').addEventListener('click', toggleColorScheme);

// ✅ 可选增强：监听系统偏好变化（如用户中途切换系统主题）
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  // 注意：此处不自动切换页面主题，而是可选地提示用户或同步状态
  // 若需自动同步，可调用 toggleColorScheme()，但通常建议由用户显式触发更友好
});

⚠️ 注意事项：