当前位置：首页 > 文章列表 > 文章 > 前端 > 暗黑模式切换与媒体查询设置教程

暗黑模式切换与媒体查询设置教程

2025-11-08 14:09:53 0浏览收藏

1. 使用 prefers-color-scheme 媒体查询

通过 CSS 的 prefers-color-scheme 可以检测用户操作系统的亮色或暗色主题偏好。

示例代码：


@media (prefers-color-scheme: light) {
  :root {
    --bg-color: #ffffff;
    --text-color: #000000;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
  }
}

页面加载时会自动根据系统设置应用对应的主题颜色。

2. 添加手动切换按钮（JavaScript 控制）

仅靠媒体查询无法让用户手动切换主题，需要 JavaScript 动态添加类或修改属性。

HTML 结构：

CSS 设置数据属性控制主题：


[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease;
}

JavaScript 实现切换逻辑：


const toggleButton = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme') || 'auto'; // 默认自动

// 应用主题
function applyTheme(theme) {
  if (theme === 'auto') {
    document.body.removeAttribute('data-theme');
    // 使用媒体查询判断
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.body.setAttribute('data-theme', systemPrefersDark ? 'dark' : 'light');
  } else {
    document.body.setAttribute('data-theme', theme);
  }
}

// 切换按钮点击事件
toggleButton.addEventListener('click', () => {
  const current = localStorage.getItem('theme') || 'auto';
  let nextTheme;

  if (current === 'light') {
    nextTheme = 'dark';
  } else if (current === 'dark') {
    nextTheme = 'auto';
  } else {
    nextTheme = 'light';
  }

  localStorage.setItem('theme', nextTheme);
  applyTheme(nextTheme);
});

// 页面加载时初始化
applyTheme(currentTheme);

// 监听系统主题变化（当设置为 auto 时生效）
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  const current = localStorage.getItem('theme');
  if (current === 'auto') {
    applyTheme('auto');
  }
});