能否通过JavaScript API触发CSS的prefers-color-scheme媒体查询？

首先明确：没有原生JavaScript API可以直接修改prefers-color-scheme的查询结果，比如你提到的window.change('prefers-color-scheme', 'dark')这类代码完全无效。因为这个媒体查询是读取系统层面的颜色偏好设置（比如Windows/macOS的系统深色模式开关），浏览器只是被动读取这个值，没有提供修改它的接口。

如果需要通过JS控制组件的深色/浅色模式，推荐用以下替代方案：

方案1：CSS变量+类名切换（最常用） #

先定义两套模式对应的CSS变量，再通过JS给根元素添加/移除类名来切换样式，同时保留系统偏好的 fallback：

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

/* 手动切换的深色模式 */
:root.dark {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

/* 系统偏好深色模式的 fallback（仅当未手动切换时生效） */
@media (prefers-color-scheme: dark) {
  :root:not(.dark) {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
  }
}

/* 组件使用变量 */
.your-component {
  background: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

对应的JS控制代码：

// 切换到深色模式
document.documentElement.classList.add('dark');

// 切换回浅色模式
document.documentElement.classList.remove('dark');

// 一键切换（来回切换）
document.documentElement.classList.toggle('dark');

方案2：覆盖媒体查询结果（不推荐） #

你可以通过window.matchMedia()监听原生媒体查询，但无法修改它的匹配状态，只能通过自定义状态覆盖样式。比如：

const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
let manualMode = null; // null=跟随系统，'dark'=手动深色，'light'=手动浅色

// 监听系统模式变化
darkModeQuery.addEventListener('change', (e) => {
  if (manualMode === null) {
    updateComponentTheme(e.matches ? 'dark' : 'light');
  }
});

// 手动切换模式
function setManualMode(mode) {
  manualMode = mode;
  updateComponentTheme(mode);
}

// 更新组件主题
function updateComponentTheme(mode) {
  document.querySelector('.your-component').dataset.theme = mode;
}

然后CSS通过data-theme属性覆盖原生媒体查询：

.your-component[data-theme="dark"] {
  /* 深色样式 */
}
.your-component[data-theme="light"] {
  /* 浅色样式 */
}

这种方式比类名切换更繁琐，除非有特殊需求，否则优先用方案1。

总结：原生prefers-color-scheme的结果是只读的，只能通过JS控制自定义状态（类名、属性）来覆盖组件样式，实现手动切换的效果。

内容的提问来源于stack exchange，提问作者Jon Sud