如何通过开关按钮覆盖prefers-color-scheme的默认深色模式设置？

当然可以基于prefers-color-scheme: dark的媒体查询来做覆盖开关，核心思路是利用CSS的权重优先级和层叠特性，结合JavaScript保存用户偏好，实现系统默认与手动切换的兼容。下面是具体实现方案：

1. CSS层叠与变量设置 #

先通过CSS变量定义基础样式，再用媒体查询适配系统深色模式，最后用自定义类实现手动覆盖——这个类的权重会高于媒体查询的样式，从而实现强制切换：

/* 浅色模式默认变量 */
:root {
  --bg-color: #fff;
  --text-color: #333;
}

/* 系统深色模式自动适配 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
  }
}

/* 手动切换的深色模式类（权重高于媒体查询） */
:root.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

/* 把变量应用到页面元素 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

这里:root.dark-theme的权重（类选择器 + 伪类）比媒体查询里单独的:root更高，所以添加这个类后，会直接覆盖系统媒体查询的样式；移除类则回到跟随系统的状态。

2. 切换按钮的HTML与JavaScript实现 #

用按钮触发类的切换，同时通过localStorage保存用户的选择，确保刷新页面或重新打开时记住偏好：

<button id="theme-toggle">切换深色模式</button>

const toggleBtn = document.getElementById('theme-toggle');
const root = document.documentElement;

// 初始化主题：优先用用户保存的设置，否则跟随系统
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (savedTheme) {
  root.classList.toggle('dark-theme', savedTheme === 'dark');
} else {
  root.classList.toggle('dark-theme', prefersDark);
}

// 更新按钮显示文本
updateToggleText();

// 切换按钮点击事件
toggleBtn.addEventListener('click', () => {
  root.classList.toggle('dark-theme');
  const currentTheme = root.classList.contains('dark-theme') ? 'dark' : 'light';
  localStorage.setItem('theme', currentTheme);
  updateToggleText();
});

// 监听系统主题变化（仅当用户未手动切换过时生效）
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  if (!localStorage.getItem('theme')) {
    root.classList.toggle('dark-theme', e.matches);
    updateToggleText();
  }
});

// 更新按钮文本的辅助函数
function updateToggleText() {
  toggleBtn.textContent = root.classList.contains('dark-theme') 
    ? '切换浅色模式' 
    : '切换深色模式';
}

3. 核心逻辑说明 #

• 权重覆盖：自定义类dark-theme的CSS权重更高，能直接覆盖媒体查询的样式，实现手动切换优先。
• 持久化偏好：用localStorage保存用户选择，避免刷新后丢失设置。
• 系统兼容：如果用户没手动切换过，页面会跟随系统的深色模式变化；一旦手动切换，就锁定用户选择，直到再次切换。

这种方案既保留了prefers-color-scheme的自动适配能力，又提供了手动覆盖的入口，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Daniel Vartan