V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
maxxfire
V2EX  ›  程序员

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

  •  
  •   maxxfire · 2019-10-01 20:22:27 +08:00 · 5280 次点击
    这是一个创建于 1640 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    11 条回复    2019-10-06 08:47:46 +08:00
    suriv520
        1
    suriv520  
       2019-10-01 20:31:23 +08:00 via iPhone
    八仙过海,各显神通。白的都没有标准,你指望黑的有?
    maxxfire
        2
    maxxfire  
    OP
       2019-10-01 20:37:39 +08:00
    @suriv520 先不说图片,90%场景是颜色的变换。所以能否搞一套万能的颜色变换算法,来全自动的适配页面?
    twjacy3
        3
    twjacy3  
       2019-10-01 20:43:45 +08:00
    V2 的黑暗模式挺好
    catfan
        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% 适配,但是多数网站的效果都表现不错。
    Macolor21
        5
    Macolor21  
       2019-10-01 22:37:58 +08:00
    Google Material Design 的标准,应该是不建议#000,但是苹果这边用了#000,是两种方案
    https://material.io/design/color/dark-theme.html#properties
    aLazarus
        6
    aLazarus  
       2019-10-01 23:19:39 +08:00 via Android
    @Macolor21 oled 显示黑色会有非常明显的拖影问题(和质量无关),苹果这个设计思路好蠢
    maplerecall
        7
    maplerecall  
       2019-10-01 23:40:25 +08:00
    @maxxfire 实际上 Android 的 Chrome 有个实验选项就是这个功能,开启夜间模式后通过一定算法把所有网站都转换成黑色模式,但实际效果还是有些地方不好,一些图片会变为反色,还有些地方可读性会变差,原本就是暗色的区域还有可能变白……
    bumz
        8
    bumz  
       2019-10-02 00:46:12 +08:00 via iPhone
    @maxxfire
    刚做了一个自动转换的算法,感觉效果还是能看的

    用 hsl 说不定更好




    Macolor21
        9
    Macolor21  
       2019-10-02 15:26:55 +08:00
    @aLazarus 为了像素点不发光吧,提高续航。
    PlainTech
        10
    PlainTech  
       2019-10-03 07:43:22 +08:00
    可以通过指定黑暗模式的 CSS 来适配

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

    }
    ```

    可以看下这篇文章的介绍 https://zhih.me/website-darkmode-on-macos/
    maxxfire
        11
    maxxfire  
    OP
       2019-10-06 08:47:46 +08:00
    @bumz 不错,通过 hsl 可以比较好的调整,可以适用部分场景。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   951 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 21:25 · PVG 05:25 · LAX 14:25 · JFK 17:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.