暗黑模式，是否有浏览器标准

[maxxfire]

自从某果也搞了一个暗黑模式，以它的号召力，肯定会一堆人跟风而上。

作为前端应该如何做，自己实现一套 CSS 样式，还是说可以简单的做？

[suriv520]

八仙过海，各显神通。白的都没有标准，你指望黑的有？

[maxxfire]

@suriv520 先不说图片，90%场景是颜色的变换。所以能否搞一套万能的颜色变换算法，来全自动的适配页面？

[twjacy3]

V2 的黑暗模式挺好

[catfan]

可以透过 prefers-color-scheme media 来定义黑暗模式的样式

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

当然，有一些移动端浏览器已经做了自适应的黑暗样式，只要网页的语义化做得好，网站无需做额外的工作，也能在黑暗模式下很好地呈现。

在下开发的 Gear Browser （ https://gear4.app ），也在此模式下做了比较多的研究。虽然无法保证 100% 适配，但是多数网站的效果都表现不错。

[Macolor21]

Google Material Design 的标准,应该是不建议#000,但是苹果这边用了#000,是两种方案
https://material.io/design/color/dark-theme.html#properties

[aLazarus]

@Macolor21 oled 显示黑色会有非常明显的拖影问题（和质量无关），苹果这个设计思路好蠢

[maplerecall]

@maxxfire 实际上 Android 的 Chrome 有个实验选项就是这个功能，开启夜间模式后通过一定算法把所有网站都转换成黑色模式，但实际效果还是有些地方不好，一些图片会变为反色，还有些地方可读性会变差，原本就是暗色的区域还有可能变白……

[bumz]

@maxxfire
刚做了一个自动转换的算法，感觉效果还是能看的

用 hsl 说不定更好

[Macolor21]

@aLazarus 为了像素点不发光吧，提高续航。

[PlainTech]

可以通过指定黑暗模式的 CSS 来适配

```css
@media (prefers-color-scheme:dark){

}
```

可以看下这篇文章的介绍 https://zhih.me/website-darkmode-on-macos/

[maxxfire]

@bumz 不错，通过 hsl 可以比较好的调整，可以适用部分场景。