系统暗黑模式生效时，CSS与浏览器设置禁用暗黑模式失效的解决咨询

CSS层面强化配置 #

• 给根元素明确声明浅色方案的同时，强制锁定背景与文本色，避免浏览器自动反转：

:root {
  color-scheme: light only;
  background-color: #ffffff;
  color: #000000;
}

• 禁止浏览器对媒体元素（图片、SVG、视频）进行颜色反转：

img, svg, video {
  color-scheme: light only;
  filter: none !important;
}

• 覆盖表单控件的默认暗黑样式：

input, button, select, textarea {
  color-scheme: light only;
  background-color: #ffffff;
  color: #000000;
}

浏览器站点专属设置 #

Chrome浏览器 #

• 单站点配置：打开目标应用后，点击地址栏左侧锁图标 → 「网站设置」→ 「外观」→ 「颜色方案」选择「仅浅色」
• 本地策略配置（需重启Chrome生效）：编辑~/Library/Application Support/Google/Chrome/Preferences文件，添加JSON配置：

"profile.content_settings.exceptions.color_scheme": {
  "[*.]你的应用域名.com": {
    "setting": 1
  }
}

Firefox浏览器 #

• 单站点配置：打开目标应用后，点击地址栏左侧锁图标 → 「连接安全」→ 「更多信息」→ 「权限」→ 「颜色方案」选择「强制浅色」
• about:config配置：
  1. 输入about:config确认风险提示
  2. 将browser.display.theme.inversion.siteOverride设为true
  3. 在browser.display.theme.inversion.permitted中添加你的应用域名

JavaScript辅助处理 #

检测浏览器暗黑模式状态并强制切换浅色样式：

// 初始检测
if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('force-light');
}

// 监听模式变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  document.documentElement.classList.toggle('force-light', e.matches);
});

配套CSS：

.force-light {
  color-scheme: light only !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

内容的提问来源于stack exchange，提问作者Alex Reynolds