如何在网站上模拟Windows高对比度模式（forced-colors: dark）？

方案1：CSS媒体查询+手动类切换（前端原生实现） #

虽然你提到自行编写CSS效果不及Chrome内置模拟，但可以通过复用系统高对比度变量来贴近原生体验，同时兼顾系统自动触发和用户手动切换：

/* 基础样式 */
body {
  background: #ffffff;
  color: #333333;
  transition: all 0.2s ease;
}

/* 匹配系统高对比度暗色模式，同时支持手动添加类触发 */
@media (forced-colors: dark), body.forced-colors-active {
  body {
    background: Canvas;
    color: CanvasText;
    border-color: ButtonBorder;
  }
  a {
    color: LinkText;
  }
  button {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonBorder;
  }
  /* 其他组件直接复用系统高对比度变量，无需自定义颜色 */
}

// 切换按钮逻辑
const toggleBtn = document.createElement('button');
toggleBtn.textContent = '切换高对比度暗色模式';
toggleBtn.id = 'toggle-forced-colors';
document.body.appendChild(toggleBtn);

document.getElementById('toggle-forced-colors').addEventListener('click', () => {
  document.body.classList.toggle('forced-colors-active');
});

这种方式直接使用浏览器提供的Canvas、CanvasText等系统高对比度变量，能最大程度贴近Chrome内置模拟的原生效果，避免手动定义颜色偏差。

方案2：浏览器扩展实现（完全复用Chrome内置模拟） #

如果要100%复刻Chrome DevTools中的高对比度模拟效果，只能通过浏览器扩展调用Chrome的调试协议，直接触发浏览器层面的模拟：

// 扩展后台脚本示例
chrome.action.onClicked.addListener((tab) => {
  chrome.debugger.attach({ tabId: tab.id }, '1.3', () => {
    chrome.debugger.sendCommand(
      { tabId: tab.id },
      'Emulation.setEmulatedMedia',
      { forcedColors: 'dark' },
      () => chrome.debugger.detach({ tabId: tab.id })
    );
  });
});

注意：该方案需要用户安装对应扩展，且扩展需申请debugger权限，适合需要完全原生模拟效果的场景。

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