Chrome浏览器和网页开启暗黑模式

Chrome 开启暗黑模式

Chrome 自版本 72.0.3626.86 开始，已经向 Windows、MacOS、Linux 推送了“暗黑模式”，要体验的朋友记得将浏览器升级到该版本或以上的版本。chrome 在 MacOS 中跟随系统，即系统使用暗黑模式，则 chrome 默认开启暗黑模式。这里说明一下 在 Windows 中的设置：

1. 右键 chrome 快捷方式，选择“属性”
2. 在弹出窗口中选择“快捷方式”，在“目标”中追加以下代码，注意红色箭头处要添加空格

--enable-features=WebUIDarkMode --force-dark-mode

3. “确定”后重启浏览器即可看到暗黑模式

为网页添加暗黑模式 css

浏览器开启了暗黑模式，但是并不能直接将网页也转换为暗黑模式，这时就需要网页自己的支持了，使用也很简单，将暗黑模式的样式直接放入以下媒体查询中即可

@media (prefers-color-scheme:dark) {
  body {
    background-color: #202124;
    color: #f1f3f4;
  }
}