bilibili 出黑暗模式了 !!!

yuxino commented 4 years ago

芜湖，~~bilibili 黑暗模式是什么，bilibili 是什么？bilibili 黑暗模式出自哪里？今天小编就来帮助大家了解一下bilibili 黑暗模式到底是什么。~~

让我们康康b站的黑暗模式是怎样子的。

看起来还行还不错，你也想试试 ? 咦，怎么系统切成了黑暗模式没有用。

残念阿，b站其实还没出黑暗模式，是我手动调出来的。

最近在推上看到一个快速转换成黑暗模式办法，就是通过滤镜，感觉很好玩于是决定水一篇。滤镜是个好东西，使用场景很多，比如公祭日的时候把网站转成灰色的，除此之外还有更加复杂一点的比如正片叠底，给底图上色之类的。

今天把网站转成黑暗模式用到的滤镜是这个。没错就这一条，但是这一条其实多多少少是有点问题的。后面再说吧。

body {
  filter: invert(100%) hue-rotate(180deg);
}

先聊聊我们为什么需要黑暗模式，首先黑暗模式可以帮助OLED屏幕更省电，提升的续航，另一方面是更加舒服的阅读体验。~~没有黑暗模式在苹果过不了审，例如某信，我就算是饿死从这里跳下去也不会弄黑暗模式的 ... 真香~~

一种简单的实现黑暗模式的办法是，黑变白，白变黑，也就是我们通常说的反色。invert(100%)这部分。但是单单设置invert(100%)很显然使不够的。因为有些颜色其实本身就在黑暗模式下面能很好地运行，强制变成反色很奇怪，比如那些高亮的颜色，于是我们加上hue-rotate(180deg)。再把颜色调回去，啥原理8知道，但是貌似只会对高亮的颜色work。 invert把颜色转成了反色，通过hue-rotate(180deg)又把他们变了回去。于是大功告成，一个非常简易的实现黑暗模式的方案实现了。

颜色我们搞定了，但是问题是这个滤镜是设置在body的，会带来很多的小问题，这些小问题需要我们手动调一下，显而易见的有视频也被转成了反色，图片，转完之后惨不忍睹，解决方法是，把他们再转回去。。滑稽

video, img {
  filter: invert(100%) hue-rotate(180deg);
}

还有一些类似背景图之类的，需要做一些特殊处理。方案可行，但是如果真的想调的很细建议还是自己通过@media来调吧。

@media (prefers-color-scheme: dark) { }

黑暗模式就应该像一个开关那么简单，自然，不需要花费太多人力物力去做的事情，不需要特意设计两套不同的样子，两套不一样的切图，那对于开发设计来说，都是双倍的痛苦，一个良好的黑暗模式的设计应该是不需要考虑那么多情况的。

如果在黑暗模式下面做了很多的条件判断之类的，以及大量的hack，那其实你应该去diss一下你的设计了，他多多少少有点问题，而且设计规范也做得不好，属于搬石头砸自己和同事jio的类型，他验收的累，开发做的也累，设计也累，而且一堆杂七杂八的判断难免会出bug，让代码变得臃肿得不偿失。

yuxino / blog

bilibili 出黑暗模式了 !!! #111