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

浏览器自动将网页变为深色模式很难吗?

  •  
  •   megakusa · 2020-02-13 22:35:11 +08:00 via iPhone · 14931 次点击
    这是一个创建于 1746 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题。
    为何没人做这个

    35 条回复    2020-07-17 03:27:53 +08:00
    loading
        1
    loading  
       2020-02-13 22:37:05 +08:00 via Android   ❤️ 2
    自动变容易,自动变好看挺难。
    zhch602
        2
    zhch602  
       2020-02-13 22:57:41 +08:00 via iPhone
    谁和你说没有的,少数派就是啊
    ajaxfunction
        3
    ajaxfunction  
       2020-02-13 23:28:26 +08:00
    当然很难,但是你强行变黑也是可以的

    凡是能变为深色模式的都是开发者专门适配过的。

    否则 原来的网页是白底黑字,浏览器强行把背景换成黑色,网页就成黑底黑字了,如何阅读?

    就算浏览器采用反白或是写了一些规则来自动处理,但是互联网有几千万个网页,总有无法适配的,到时候锅甩到哪里去呢?
    kingsleydon
        4
    kingsleydon  
       2020-02-13 23:29:29 +08:00
    chinvo
        5
    chinvo  
       2020-02-13 23:42:46 +08:00 via iPhone
    iOS 上 Firefox 有这个功能

    电脑上有 dark reader
    imn1
        6
    imn1  
       2020-02-13 23:55:20 +08:00
    为啥我想起那个“根据手机壳变色”……
    Rheinmetal
        7
    Rheinmetal  
       2020-02-13 23:59:25 +08:00 via Android
    反色的扩展早就有了 但是效果不太好
    hstdt
        8
    hstdt  
       2020-02-14 00:00:51 +08:00 via iPhone
    那么多样式网页,甚至还有图片,弄好看很难。dark reader 插件已经很好了,小部分页面还是不行。
    moxuanyuan
        9
    moxuanyuan  
       2020-02-14 00:03:06 +08:00
    我是看不习惯深色模式。。。。
    h404bi
        10
    h404bi  
       2020-02-14 00:05:03 +08:00
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme
    https://www.h404bi.com/blog/2019/05/macos-mojave-dark-mode-in-css

    「其实 prefers-color-scheme 只是帮助做到随系统自动变化而已,网站的深浅配色系统本身还是要开发者预先设计好。」—— 难的不是“自动变深色”,是“深色配色的设计”。自动变黑容易,黑得好看协调难。并且是数不尽的网站...
    locoz
        11
    locoz  
       2020-02-14 00:13:22 +08:00 via Android
    很难好看,各种乱七八糟的设计太多了,并不能保证处理了之后还“能看”
    LZSZ
        13
    LZSZ  
       2020-02-14 00:25:19 +08:00
    哦 没注意节点是 iphone。。。
    tzm41
        14
    tzm41  
       2020-02-14 04:19:39 +08:00
    @Livid v 站可以支持 prefers-color-scheme 吗?
    Livid
        15
    Livid  
    MOD
       2020-02-14 04:37:02 +08:00 via iPhone
    @tzm41 我们有手动切换:

    https://www.v2ex.com/settings
    Livid
        16
    Livid  
    MOD
       2020-02-14 04:37:36 +08:00 via iPhone
    @tzm41 https://livid.v2ex.com/ 是自动切换。
    geelaw
        17
    geelaw  
       2020-02-14 04:46:07 +08:00 via iPhone
    很难,连高对比度(不考虑美观的)自动变换都很困难。
    winterbells
        18
    winterbells  
       2020-02-14 08:16:48 +08:00 via Android
    chrome://flags/#enable-force-dark
    Sivan
        19
    Sivan  
       2020-02-14 08:40:58 +08:00
    开发者自己弄好实现。
    但浏览器是没法自动做这个的。自作主张改别人网站的颜色,会把网站所有者搞毛的。
    xiangyuecn
        20
    xiangyuecn  
       2020-02-14 09:27:30 +08:00
    直接反个色简单粗暴,但不支持 backgroundImage、canvas

    javascript:s=document.createElement("style");s.innerHTML='body{filter:invert(1) !important}img{filter:invert(1) !important}';document.body.appendChild(s);void(0)
    learnshare
        21
    learnshare  
       2020-02-14 09:54:06 +08:00   ❤️ 1
    网站主:你浏览器凭什么改我网站的样子?
    ftu
        22
    ftu  
       2020-02-14 10:18:16 +08:00 via iPhone
    iOS 端 Alook 浏览器,强制深色模式,有点给力
    ianva
        23
    ianva  
       2020-02-14 10:18:17 +08:00
    推荐一个 chrome 的插件,Dark Reader, 它自动会把所有的网站变为夜晚模式,而且是很智能的,很多网站的 css 都是定制的
    ianva
        24
    ianva  
       2020-02-14 10:18:59 +08:00
    mrgeneral
        25
    mrgeneral  
       2020-02-14 11:36:18 +08:00
    不难,技术上都很简单,但是涉及到 dark mode 配色就很难了,如果图片不是透明的,也会很刺眼,费大劲收益也不大,没动力。

    之前做博客适配的时候的体验: https://www.chengxiaobai.cn/record/the-website-supports-dark-mode.html
    Track13
        26
    Track13  
       2020-02-14 12:01:39 +08:00 via Android
    @mrgeneral 图片用 css 滤镜变暗,配色就灰蓝。。😂
    belin520
        27
    belin520  
       2020-02-14 12:05:48 +08:00
    很容易变成深色模式
    也很容易瞎眼睛
    Fred0410
        28
    Fred0410  
       2020-02-14 12:12:58 +08:00
    UC 浏览器 10 年前就做到了
    cst4you
        29
    cst4you  
       2020-02-14 12:29:20 +08:00   ❤️ 1
    深色模式给你来张大白图, 这不是更伤
    kookoo900
        30
    kookoo900  
       2020-02-14 12:34:32 +08:00
    真爱生命,远离深色模式。
    tzm41
        31
    tzm41  
       2020-02-14 14:02:33 +08:00
    @Livid 是的,用了手动切换的一段时间了,感觉晚上舒服多了。我就是问问可否把主站改成自动切换。
    PlainTech
        32
    PlainTech  
       2020-02-14 17:07:17 +08:00
    不难,目前主流浏览器 Safari、Chrome 都支持,需要开发者进行适配

    比如 https://plain-dev.com
    AlphaRobert
        33
    AlphaRobert  
       2020-02-14 20:24:01 +08:00
    提示:@media (prefers-color-scheme: dark)
    于是自己一开始就用 CSS variables,旧版本的浏览器再额外去支持或者逼他们升级🤪
    另外 <img> 如果要对于深浅色变换的话还需要用 <picture>

    @xiangyuecn
    filter: invert(1) hue-rotate(180deg)
    会稍微好一些,色相还是对的。不过似乎还要稍微变一些会更协调,Webkit 在页面顶部特地定义了一个反转亮度的滤镜
    nstyle
        34
    nstyle  
       2020-02-14 21:02:55 +08:00   ❤️ 1
    chrome 有一个软件叫 dark reader 非常好用
    dxppp
        35
    dxppp  
       2020-07-17 03:27:53 +08:00 via Android
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6121 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 56ms · UTC 06:16 · PVG 14:16 · LAX 22:16 · JFK 01:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.