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

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

  •  
  •   maxxfire · 69 天前 · 3154 次点击
    这是一个创建于 69 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    用 hsl 说不定更好




        9
    Macolor21   69 天前
    @aLazarus 为了像素点不发光吧,提高续航。
        10
    PlainTech   68 天前
    可以通过指定黑暗模式的 CSS 来适配

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

    }
    ```

    可以看下这篇文章的介绍 https://zhih.me/website-darkmode-on-macos/
        11
    maxxfire   65 天前
    @bumz 不错,通过 hsl 可以比较好的调整,可以适用部分场景。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3031 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 29ms · UTC 11:13 · PVG 19:13 · LAX 03:13 · JFK 06:13
    ♥ Do have faith in what you're doing.