admin管理员组

文章数量:1665191

chrome 谷歌浏览器 手动进入暗黑模式,调试暗黑模式样式 windows 10

目前谷歌浏览器已经支持 @media (prefers-color-scheme: dark) {} 的支持,也就是说浏览器会自动读取系统的颜色模式:白色、暗黑,然后切换对应的 css 样式

想让自己的页面适配暗黑模式,只需要写一个 @media (prefers-color-scheme: dark) 的媒体选择器即可,里面的样式就是系统在进入暗黑模式后调用的样式。

看下例子,这个工具中我写了两个样式方案,一个亮色,一个暗黑模式,看下对比


一、Chrome 谷歌浏览器调试窗口修改颜色模式

Chrome 调试窗口可以手动切换黑白两种亮度模式。

1. 打开调试窗口

2. 切换到 Elements 标签

3. 右侧样式窗口中修改

右侧有个刷子的图标,点开里面会有三个选项:白色暗色跟随系统

二、通过修改系统颜色模式方式

macOS 切换颜色比较方便,直接进入亮度设置面板就能设置。
一直以来我都知道 Windows 如何进入暗黑模式,今天找到了

  1. 点击【开始】,打开【系统设置】
  2. 找到【个性化】
  3. 切换到 【颜色】 标签
  4. 在右侧面板中选择颜色 浅色、深色 即可

如果想进入暗黑模式,只需要选择成【深色】即可

本文标签: 模式样式浏览器chromeWindows