这是一个创建于 1879 天前的主题，其中的信息可能已经有所发展或是发生改变。
自从某果也搞了一个暗黑模式，以它的号召力，肯定会一堆人跟风而上。
作为前端应该如何做，自己实现一套 CSS 样式，还是说可以简单的做？
 |
1
suriv520 2019-10-01 20:31:23 +08:00 via iPhone
八仙过海，各显神通。白的都没有标准，你指望黑的有？
|
 |
3
twjacy3 2019-10-01 20:43:45 +08:00
V2 的黑暗模式挺好
|
 |
4
catfan 2019-10-01 20:52:16 +08:00  3
可以透过 prefers-color-scheme media 来定义黑暗模式的样式
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme 当然，有一些移动端浏览器已经做了自适应的黑暗样式，只要网页的语义化做得好，网站无需做额外的工作，也能在黑暗模式下很好地呈现。 在下开发的 Gear Browser （ https://gear4.app ），也在此模式下做了比较多的研究。虽然无法保证 100% 适配，但是多数网站的效果都表现不错。 |
 |
5
Macolor21 2019-10-01 22:37:58 +08:00
Google Material Design 的标准,应该是不建议#000,但是苹果这边用了#000,是两种方案
https://material.io/design/color/dark-theme.html#properties |
 |
7
maplerecall 2019-10-01 23:40:25 +08:00
@maxxfire 实际上 Android 的 Chrome 有个实验选项就是这个功能，开启夜间模式后通过一定算法把所有网站都转换成黑色模式，但实际效果还是有些地方不好，一些图片会变为反色，还有些地方可读性会变差，原本就是暗色的区域还有可能变白……
|
 |
10
PlainTech 2019-10-03 07:43:22 +08:00
可以通过指定黑暗模式的 CSS 来适配
```css @media (prefers-color-scheme:dark){ } ``` 可以看下这篇文章的介绍 https://zhih.me/website-darkmode-on-macos/ |
Select Language