一些废话，但是我建议看一下...

如果你使用的是macOS10.14.4以上或ios13以上系统并且开启了深色模式，通过Safari、Chrome、FireFox打开这个网站就会发现它是暗黑模式 YushengSenior
众所周知，前阵子Apple与微信闹得沸沸扬扬，据说如果微信不支持深色模式就下架，下个版本微信团队紧急推出了深色版本。
看来做软件的是搞不过做硬件的。
深色模式（Dark Mode）是 Apple 在 macOS Mojave 上全新推出的一项功能，macOS 内置的 App 能完美支持，凭借着易用的接口，越来越多的第三方 App 已经进行了适配，可大家使用最多的浏览器却没能很好的支持，虽然你可以使用 Safari 的阅读视图浏览深色模式下的页面内容，但体验终归没有网站自身支持的好。
这个暗黑模式是通过媒体查询prefers-color-scheme属性实现，现如今大部分主流浏览器都支持这个属性，其他浏览器的具体支持情况可在这里查看：Can i use?
效果图：

用法

Name:   prefers-color-scheme
For:    @media
Value:  no-preference | light | dark

• no-preference：无颜色偏好
• light：浅色模式
• dark：深色模式
  默认都是浅色模式的，这里我们只写深色模式

@media (prefers-color-scheme: light) {
    /* 浅色模式 */
  }

  @media (prefers-color-scheme: dark) {
    /* 深色模式 */
  }

使用

⚠️ 对于项目建议使用变量，此处仅为演示我就写的简单点

@media (prefers-color-scheme: light) {
    /* 浅色模式 */
    body{
      background-color: #ffffff;
      color: #15171a;
    }
  }

  @media (prefers-color-scheme: dark) {
    /* 深色模式 */
    body{
      background-color: #222222;
      color: #dfdfdf;
    }
  }

图片处理

深色模式下，如果不对图片进行处理，图片颜色过于鲜艳就会显得有些刺眼，这里我们对图片也处理下,给它一个遮罩层就显得好多了。

    img{
      opacity: .5;
      transition: opacity .1s ease-in-out;
    }
    img :hover{
      opacity: 1;
    }

颜色

颜色这个就看自己喜欢了，不过要注意一点，如果你是使用 macOS 内置 App 的配色，强调色会改变一些基础配色，比如强调色不是石墨色的时候，背景颜色会变得比较暖。

在设置颜色的时候，要保证内容的可读性，我们需要将文本和背景的颜色对比度保持在一个安全的范围内，这时候你需要用到这个工具： contrast-ratio 转自：底噪