如何用HTML函数实现暗黑模式切换并适配偏好设置的媒体查询

暗黑模式实现的核心思路

实现暗黑模式切换并适配系统偏好，核心分为三个部分：首先通过prefers-color-scheme媒体查询获取用户系统的默认偏好，其次用CSS变量定义不同模式下的样式，最后用HTML函数封装切换逻辑，同时把用户选择的状态存储到本地，避免刷新后模式重置。

1. 定义CSS变量和默认样式

首先需要在CSS根节点定义两套模式的颜色变量，然后通过媒体查询设置默认模式。如果用户没有手动切换过模式，就优先使用系统偏好设置。

:root {
  /* 浅色模式变量 */
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #f5f5f5;
}

/* 适配系统暗黑模式偏好 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-color: #1a1a1a;
    --text-color: #e5e5e5;
    --card-bg: #2d2d2d;
  }
}

/* 手动切换的暗黑模式 */
[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e5e5e5;
  --card-bg: #2d2d2d;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
  margin: 0;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.card {
  background-color: var(--card-bg);
  padding: 16px;
  border-radius: 8px;
  margin-top: 20px;
}

2. 封装HTML切换函数

接下来封装一个切换函数，这个函数需要处理三个逻辑：切换当前页面的主题属性、把用户选择存储到localStorage、更新切换按钮的显示文本。

// 定义暗黑模式切换函数
function toggleDarkMode() {
  const htmlElement = document.documentElement;
  const currentTheme = htmlElement.getAttribute('data-theme');
  const toggleBtn = document.getElementById('theme-toggle');
  
  if (currentTheme === 'dark') {
    // 切换到浅色模式
    htmlElement.removeAttribute('data-theme');
    localStorage.setItem('theme-preference', 'light');
    toggleBtn.textContent = '切换暗黑模式';
  } else {
    // 切换到暗黑模式
    htmlElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme-preference', 'dark');
    toggleBtn.textContent = '切换浅色模式';
  }
}

// 页面加载时初始化主题
function initTheme() {
  const savedTheme = localStorage.getItem('theme-preference');
  const toggleBtn = document.getElementById('theme-toggle');
  
  if (savedTheme) {
    // 优先使用用户手动保存的偏好
    if (savedTheme === 'dark') {
      document.documentElement.setAttribute('data-theme', 'dark');
      toggleBtn.textContent = '切换浅色模式';
    } else {
      document.documentElement.removeAttribute('data-theme');
      toggleBtn.textContent = '切换暗黑模式';
    }
  } else {
    // 没有手动偏好时，使用系统默认，按钮显示对应文本
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (systemPrefersDark) {
      toggleBtn.textContent = '切换浅色模式';
    } else {
      toggleBtn.textContent = '切换暗黑模式';
    }
  }
}

// 页面加载完成后初始化
window.addEventListener('load', initTheme);

3. 页面结构和功能绑定

最后在HTML中添加切换按钮和基础内容，绑定切换函数的点击事件即可。

<button id="theme-toggle" onclick="toggleDarkMode()">切换暗黑模式</button>

<div class="card">
  <h2>暗黑模式示例内容</h2>
  <p>这是一段测试文本，切换模式后可以观察文字和背景颜色的变化。</p>
  <p>当前模式会优先使用你手动选择的结果，刷新页面也不会重置，如果没有手动选择则适配系统偏好。</p>
</div>

注意事项

• CSS变量需要定义在根节点，才能保证所有子元素都能读取到对应的颜色值
• prefers-color-scheme媒体查询只会在用户没有手动设置data-theme属性时生效，避免和系统偏好冲突
• localStorage存储的偏好需要在页面初始化时优先读取，保证用户体验的一致性
• 切换时添加过渡动画可以让模式切换更平滑，提升用户感受

如果需要监听用户系统偏好的实时变化，可以添加matchMedia的监听事件，当系统切换模式且用户没有手动设置偏好时，同步更新页面主题。

HTML函数prefers-color-scheme暗黑模式切换媒体查询CSS变量修改时间：2026-06-03 22:48:49