自从某果也搞了一个暗黑模式，以它的号召力，肯定会一堆人跟风而上。
作为前端应该如何做，自己实现一套 CSS 样式，还是说可以简单的做？
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 2428 days ago, the information mentioned may be changed or developed.
 |
1
suriv520 Oct 1, 2019 via iPhone
八仙过海，各显神通。白的都没有标准，你指望黑的有？
|
 |
3
twjacy3 Oct 1, 2019
V2 的黑暗模式挺好
|
 |
4
catfan Oct 1, 2019  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 Oct 1, 2019
Google Material Design 的标准,应该是不建议#000,但是苹果这边用了#000,是两种方案
https://material.io/design/color/dark-theme.html#properties |
 |
7
maplerecall Oct 1, 2019
@maxxfire 实际上 Android 的 Chrome 有个实验选项就是这个功能，开启夜间模式后通过一定算法把所有网站都转换成黑色模式，但实际效果还是有些地方不好，一些图片会变为反色，还有些地方可读性会变差，原本就是暗色的区域还有可能变白……
|
 |
10
PlainTech Oct 3, 2019
可以通过指定黑暗模式的 CSS 来适配
```css @media (prefers-color-scheme:dark){ } ``` 可以看下这篇文章的介绍 https://zhih.me/website-darkmode-on-macos/ |
Select Language