Chrome深色/浅色模式切换是否有快捷键？适配@media (prefers-color-scheme: dark/light)

Chrome没有原生默认快捷键直接切换与@media (prefers-color-scheme: dark/light)对应的配色模式，但可以通过以下两种方式实现切换功能：

方法一：开发者工具模拟+自定义快捷键 #

1. 打开Chrome开发者工具（快捷键F12或Ctrl+Shift+I）
2. 打开「渲染」面板：通过DevTools菜单→更多工具→渲染，快速定位该面板
3. 在「Emulate CSS media feature prefers-color-scheme」选项中，可选择「light」「dark」或「system」，直接触发页面的@media配色规则
4. 自定义全局快捷键：
   • 进入Chrome快捷键设置页（地址栏输入chrome://extensions/shortcuts），为开发者工具相关操作绑定快捷键；或者用第三方工具（如AutoHotkey）为切换渲染面板配色选项创建全局触发键

方法二：专用Chrome扩展 #

安装支持模拟prefers-color-scheme的扩展（如「Dark Mode Toggle」类工具），这类工具可直接修改浏览器的配色方案模拟状态，让页面的@media规则生效，且多数扩展支持在设置中自定义切换快捷键。

注意事项 #

• Chrome默认会自动同步系统的深色/浅色模式，若无需脱离系统设置，无需额外操作；仅当需要强制切换时，才需用到上述方法。
• 实验性标志chrome://flags/#enable-force-dark是强制所有页面深色，并非真正模拟prefers-color-scheme，会忽略页面自有配色规则，不适合精准匹配@media场景。

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