三行CSS为掘金添加暗黑模式支持

本文作者：Gavin，未经授权禁止转载。

这是一个支持暗黑模式的傻瓜式转换方式，以掘金某文章页面为例：

现在添加神奇的CSS

@media (prefers-color-scheme: dark) {
  html {
    filter: invert(1) hue-rotate(180deg);
  }
}

就是这么简单，你已经完成了！✌️

实现暗黑模式

chrome模拟暗黑模式

解释

filterCSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。（参考：MDN Web文档）

对于暗黑模式，将使用两个filter：invert和hue-rotate

invert：反转输入图像。值定义转换的比例。100%（或1）将完全转换：黑色变为白色，白色变为黑色，其它颜色类似。

hue-rotate：hue-rotate可以帮助我们处理非黑白的其它颜色，色调旋转180度，确保网页的颜色主题不改变，而只是削弱它的颜色。这种做法唯一的缺点是：它还会反转网页中所有的图像。因此，需要将页面中所有的图像添加相同的规则，以修复这个问题。

@media (prefers-color-scheme: dark) {
  html {
    filter: invert(1) hue-rotate(180deg);
  }
  html img {
    filter: invert(1) hue-rotate(180deg);
  }
}

当然，还可以添加一个transition的过渡效果

html {
    transition: color 300ms, background-color 300ms;
}

结果

细心的同学可能发现上面头像还是有问题，没有变成原本的图片颜色，因为掘金文章头像用的a标签，与上同理，我们可以给a标签也加上反转，最终代码如下：

@media (prefers-color-scheme: dark) {
  html {
    filter: invert(1) hue-rotate(180deg);
  }
  html img {
      filter: invert(1) hue-rotate(180deg);
  }
  a {
      filter: invert(1) hue-rotate(180deg);
  }
}
html {
  transition: color 300ms, background-color 300ms;
}

参考文章：dev.to/akhilarjun/…

利用JS实现暗黑模式：dev.to/akhilarjun/…