如何用JavaScript/CSS模拟CSS媒体特性prefers-color-scheme（非DevTools）

你之前用color-scheme: light/dark没达到预期，是因为这个属性仅控制浏览器默认UI元素（比如滚动条、表单控件）的配色，不会自动切换你自定义的页面样式。要实现完整的明暗模式切换，需要结合CSS变量和JavaScript来手动控制样式。

方法一：自定义CSS变量 + 类切换（通用方案） #

这是兼容性最好的方案，核心思路是用CSS变量定义明暗模式的样式值，通过JavaScript给根元素切换类来覆盖变量值，同时可以保留系统偏好的默认行为。

CSS 代码 #

/* 定义基础样式变量 */
:root {
  --bg-color: #fff;
  --text-color: #111;
  --link-color: #1a73e8;
}

/* 跟随系统暗色模式的默认样式 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #111;
    --text-color: #fff;
    --link-color: #8ab4f8;
  }
}

/* 手动切换的亮色模式类 */
.light-mode {
  color-scheme: light; /* 同步浏览器UI样式 */
  --bg-color: #fff !important;
  --text-color: #111 !important;
  --link-color: #1a73e8 !important;
}

/* 手动切换的暗色模式类 */
.dark-mode {
  color-scheme: dark; /* 同步浏览器UI样式 */
  --bg-color: #111 !important;
  --text-color: #fff !important;
  --link-color: #8ab4f8 !important;
}

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

a {
  color: var(--link-color);
}

JavaScript 代码 #

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

// 初始化主题：优先用户保存的设置，其次系统偏好
const savedTheme = localStorage.getItem('user-theme');
if (savedTheme) {
  document.documentElement.classList.add(savedTheme);
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark-mode');
}

// 绑定切换事件
toggleBtn.addEventListener('click', () => {
  const root = document.documentElement;
  if (root.classList.contains('dark-mode')) {
    root.classList.replace('dark-mode', 'light-mode');
    localStorage.setItem('user-theme', 'light-mode');
  } else {
    root.classList.replace('light-mode', 'dark-mode');
    localStorage.setItem('user-theme', 'dark-mode');
  }
});

方法二：模拟媒体查询匹配（接近DevTools效果） #

如果想要完全模拟prefers-color-scheme媒体查询的触发行为，可以通过修改matchMedia对象的matches属性来实现，但这个方法是非标准的，仅在Chromium系浏览器（Chrome、Edge）支持。

JavaScript 代码 #

// 获取暗色模式的媒体查询对象
const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

// 模拟暗色模式
function triggerDarkMode() {
  darkMediaQuery.matches = true;
  // 触发媒体查询变化事件，让依赖该查询的CSS样式更新
  darkMediaQuery.dispatchEvent(new Event('change'));
}

// 模拟亮色模式
function triggerLightMode() {
  darkMediaQuery.matches = false;
  darkMediaQuery.dispatchEvent(new Event('change'));
}

// 绑定按钮事件
document.getElementById('dark-btn').addEventListener('click', triggerDarkMode);
document.getElementById('light-btn').addEventListener('click', triggerLightMode);

注意事项 #

• 这个方法不需要额外定义切换类，直接让原本依赖@media (prefers-color-scheme: dark)的CSS样式生效。
• 兼容性有限，Firefox等浏览器不支持修改matches属性，建议优先用方法一。

关键说明 #

• 单独设置color-scheme只会改变浏览器自带UI的样式，不会影响你自定义的页面元素，必须配合CSS变量或媒体查询的样式定义才能实现完整的明暗切换。
• 方法一中的localStorage用于保存用户的主题选择，避免页面刷新后恢复系统默认。

内容的提问来源于stack exchange，提问作者Faizan Anwer Ali