能否通过切换按钮切换CSS媒体查询，覆盖系统主题偏好？

步骤1：重构CSS，用CSS变量+类控制主题 #

把原来写在媒体查询里的主题样式，改成用CSS变量定义，通过类来切换变量值，同时保留媒体查询做初始主题判断：

/* 基础样式：不依赖主题的通用样式 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s, color 0.3s; /* 添加平滑过渡 */
}

/* 定义默认（浅色）主题变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --link-color: #2563eb;
}

/* 深色主题变量 */
.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --link-color: #60a5fa;
}

/* 应用主题变量到页面元素 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}
a {
  color: var(--link-color);
}

/* 系统主题检测：初始化默认主题（仅当用户未手动设置时生效） */
@media screen and (prefers-color-scheme: dark) {
  :root:not(.dark-theme):not(.light-theme) {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
    --link-color: #60a5fa;
  }
}

步骤2：添加HTML切换按钮 #

在页面合适位置（比如导航栏）添加切换按钮：

<button id="theme-toggle">切换到深色主题</button>

步骤3：编写JavaScript逻辑处理切换与存储 #

实现三个核心功能：页面加载时初始化主题、点击按钮切换主题、记住用户的选择：

const themeToggleBtn = document.getElementById('theme-toggle');
const rootElement = document.documentElement;

// 初始化主题：优先读取本地存储，无则跟随系统
function initTheme() {
  const savedTheme = localStorage.getItem('user-theme');
  const systemIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  
  if (savedTheme === 'dark') {
    rootElement.classList.add('dark-theme');
    themeToggleBtn.textContent = '切换到浅色主题';
  } else if (savedTheme === 'light') {
    rootElement.classList.remove('dark-theme');
    themeToggleBtn.textContent = '切换到深色主题';
  } else {
    // 跟随系统主题
    if (systemIsDark) {
      rootElement.classList.add('dark-theme');
      themeToggleBtn.textContent = '切换到浅色主题';
    }
  }
}

// 切换主题函数
function toggleTheme() {
  const isDarkMode = rootElement.classList.contains('dark-theme');
  
  if (isDarkMode) {
    rootElement.classList.remove('dark-theme');
    themeToggleBtn.textContent = '切换到深色主题';
    localStorage.setItem('user-theme', 'light');
  } else {
    rootElement.classList.add('dark-theme');
    themeToggleBtn.textContent = '切换到浅色主题';
    localStorage.setItem('user-theme', 'dark');
  }
}

// 绑定事件
themeToggleBtn.addEventListener('click', toggleTheme);
document.addEventListener('DOMContentLoaded', initTheme);

// 监听系统主题变化（仅当用户未手动设置时更新）
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
  if (!localStorage.getItem('user-theme')) {
    if (e.matches) {
      rootElement.classList.add('dark-theme');
      themeToggleBtn.textContent = '切换到浅色主题';
    } else {
      rootElement.classList.remove('dark-theme');
      themeToggleBtn.textContent = '切换到深色主题';
    }
  }
});

核心逻辑说明 #

1. CSS变量管理：用var()引用主题色，切换主题只需修改变量值，避免重复编写样式。
2. 优先级控制：用户手动选择的主题存在localStorage，优先级高于系统主题，确保用户选择不会被系统设置覆盖。
3. 平滑过渡：给body添加过渡属性，切换主题时颜色变化更自然。
4. 系统主题监听：当用户未手动设置主题时，仍会跟随系统主题变化；一旦用户手动切换，就固定使用用户选择的主题。

内容的提问来源于stack exchange，提问作者The DST