能否通过JavaScript控制CSS媒体查询，模拟prefers-color-scheme属性值变更

结论 #

没有原生DOM API可以直接修改prefers-color-scheme这类系统级媒体查询的匹配结果，也无法单独为某个DOM元素覆盖媒体查询的匹配状态。
这类媒体查询读取的是操作系统或浏览器层面的用户全局偏好，属于用户代理提供的只读属性，浏览器没有开放修改权限，避免网页随意篡改用户的全局设置导致体验冲突。

满足需求的替代方案（无需修改原有媒体查询规则） #

方案1：CSS变量覆盖（兼容性好，侵入性极低）

你只需要在原有CSS基础上补充变量映射规则，无需修改原来的媒体查询逻辑：

/* 新增补充规则，不用动原有媒体查询 */
:root {
  --bg: initial;
  --text: initial;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-override-scheme]) {
    --bg: black;
    --text: white;
  }
}
@media (prefers-color-scheme: light) {
  :root:not([data-override-scheme]) {
    --bg: white;
    --text: black;
  }
}
:root[data-override-scheme="dark"] {
  --bg: black;
  --text: white;
}
:root[data-override-scheme="light"] {
  --bg: white;
  --text: black;
}

/* 原有div的样式替换成变量即可，媒体查询规则完全不用改 */
div {
  background: var(--bg);
  color: var(--text);
}

JS控制逻辑非常简单：

// 强制切换为亮色
document.documentElement.dataset.overrideScheme = 'light'
// 强制切换为暗色
document.documentElement.dataset.overrideScheme = 'dark'
// 恢复跟随系统主题
delete document.documentElement.dataset.overrideScheme

方案2：动态样式覆盖（完全不修改原有CSS）

如果完全不想动现有CSS代码，可以通过JS动态插入高优先级样式覆盖原有规则：

function switchColorScheme(scheme) {
  // 清理之前插入的覆盖样式
  const prevStyle = document.getElementById('scheme-override')
  prevStyle?.remove()
  // 传system则直接恢复系统默认
  if (scheme === 'system') return

  const style = document.createElement('style')
  style.id = 'scheme-override'
  if (scheme === 'dark') {
    style.textContent = 'div { background: black !important; color: white !important; }'
  } else {
    style.textContent = 'div { background: white !important; color: black !important; }'
  }
  document.head.appendChild(style)
}

// 调用示例
switchColorScheme('light')
// switchColorScheme('dark')
// switchColorScheme('system')

内容的提问来源于stack exchange，提问作者shau-kote