虽然目前很多桌面软件和 app 都对黑暗模式进行了适配,但是浏览器的黑暗模式却是迟迟没有普遍开来。要适配 app 界面比较简单,都是自身可控的。但是要自动适配互联网上各式各样的的网站却是一个很困难的任务,因为每个网站的设计和配色风格都不一样,除非网站自身为此专门设计了一套新的样式(这样效果最好)。
目前市面上部分浏览器的黑暗模式解决方案主要是对页面的所有元素进行反色滤镜处理( filter: invert ),虽然此方式简单粗暴,但是效果很差,页面会失去原本的色彩配搭(尤其是图片),并且性能也会受到影响;或者写一套简单的通用 CSS,对元素某些属性进行 override 。但此方式的兼容性有很大的限制,无法判断该元素在页面中的作用,以及呈现方式,导致页面会有各种奇怪的颜色配搭问题;还有一些浏览器直接在 app 上覆盖一层灰色透明图层了事,那效果不说也罢…
并且以上的所有方式都无法适配那些自身就是黑色风格或者具备黑暗模式的网站,颜色都是固定转换的。
而 Gear 浏览器终于在研究和迭代多次后,终于研究出全新的自适应黑暗模式算法。它会智能分析页面的所有样式,元素在页面的作用与位置的信息,基于颜色 HSL 值,在保留页面的元素色相饱和度情况下,计算出合理的样式。
例如:
普通情况下元素的 background: #FFF 白色 -> background: #000 黑色。
如果此元素是在页面中是悬浮固定位置的。
则:background: #FFF 白色 -> background: #020202 浅黑
如果此元素是一个按钮。
则:background: #FFF 白色 -> background: #5C5C5C 深灰
并且此算法还会分析整个页面的配色方案,适配那些自身是黑色风格和具备黑暗模式的网站。虽然分析的复杂度提升了好几个指数级,但不会有明显的延迟感觉。
简单来说,Gear 的新算法不但改善了性能(不使用滤镜),效果(智能生成)和兼容性(适配所有网站)上都比以往有了质的提升。并且,你也可以直接使用网站自带的黑暗模式或者访问黑色主题的网站,并不会导致样式冲突。能让你在夜间环境下,以更舒适的亮度来阅读和浏览网页,进一步保护眼睛。
Gear v3.0 版本不但带来了新的黑暗模式算法,还大幅度调整和改善了界面风格,强化了控制台和油猴脚本的功能,并适配 iOS 14 (可以设置成默认浏览器了),希望大家用得愉快。接下来还会不断有为 iOS 14 设计的新功能提供,敬请期待。
PS:目前新的自适应算法只是第一版,并不够完美,在未来还会不断更新,预计还能把效果再提升几个档次。
App Store: https://apps.apple.com/cn/app/gear-browser/id1458962238?ls=1
1
wzw 2020-10-13 05:53:18 +08:00 via iPhone
还不如增强脚本方面,毕竟这是特色
|
3
cyitao 2020-10-13 08:25:28 +08:00 via iPhone
使用 gear 看帖子中。
gear 有两个地方比较违反我的直觉。 一个是上下菜单栏的自动显示和隐藏,当我向上滑动隐藏了菜单栏以后,想要向下滑动显示菜单时,要等滚动结束以后才会显示。而不是像 Safari 一样,一开始向下滚动就立刻显示菜单栏。 第二点是当我打开一个网页,然后点击菜单中间的按钮显示所有 tab,然后点击小房子按钮回到主页,这时候 tab 数量显示的还是 1 。按我的理解,此时应该是打开的网页+home 页=2 。 最后,暗黑模式很赞。现在基本晚上用 gear,白天用 Safari 。 |
4
catfan OP @cyitao 这个滚动设计是让快速上下文滚动定位的时候,上下菜单栏不会弹来弹去(用户粗略定位的情况),依然保持隐藏。只有在结束滚动,才会去触发判断下拉滚动是否需要展示菜单栏(用户需要准确定位的情况)。
标签页这样的设计是避免打开过多空白 Home 标签。你可以把它理解成永远只有一个 Home 页面 + n 个标签页,点击标签管理页的小房子按钮就是回到 Home 页,逻辑和 iOS 桌面相似(永远只有一个桌面,但可以在桌面打开 n 个 app )。这样可以减少不必要的内存损耗,让每个标签都必定展示页面。目前其它浏览器那种新建空白 Home 标签页的设计其实是没有意义的,会经常开了一堆这样无意义的标签,还要手动去逐个清理。 |
5
Echoldman 2020-10-13 11:07:56 +08:00 1
坐等 Android 版
|
7
SingeeKing 2020-10-13 12:31:28 +08:00
是否可以添加对某些网站关闭暗色模式?
|
8
catfan OP @SingeeKing 目前没有此功能。不过新算法都是自适应的了,而且切换黑暗模式其实也就只需要两个步骤而已。
|
9
headwindx 2020-10-14 12:38:55 +08:00 via iPhone
黑暗模式,还是火狐好用一些
|
10
catfan OP @headwindx Firefox 使用的是反色方式,会导致部分颜色失真,例如会把红色转换成橙色。对比度也过高,不太利于夜间阅读。可以试试都访问煎蛋网( jandan.net ),便能有明显的对比。
|
11
wdhwg001 2020-10-16 03:30:14 +08:00
希望可以滑条调整夜间模式的对比度。
另外一些菜单文字和图标的对比度在夜间模式下不统一。 以及,WebView 有右滑白屏的 Bug,是这样的:当上一页面离开时的 WebView 高度和当前的 WebView 高度不一致的时候,右滑会出现白屏,这里需要单独对这个 WebView 的 Bug 做调整。 还有一些界面交互上可以明显看得出想学 ios,但是却在许多小的地方是反直觉的,比如阅读模式下滑不能关闭,比如一个有 Grip 的设置栏不能上下滑等等。 另外基于私心,我比较希望地址栏编辑时可以左右拖拽滚动,并且拥有语法高亮。 |
12
catfan OP @wdhwg001 谢谢这么详细的反馈。
某些颜色对比度都是算好的,不好调。不过推荐直接从屏幕中拉出 control center,在里面调整手机屏幕亮度会更方便。 WebView 白屏主要是内存中的内容被清理,layer 需要重绘的问题,没有直接设置该颜色的属性。这个涉及到 WebView 核心的一些东西,不太好处理。未来会进一步研究。 |
13
wdhwg001 2020-10-16 13:54:27 +08:00 via iPhone
@catfan 我是说右划的时候看不到上一页的预览的问题。如果点击链接前顶栏是缩回去的,点击后又打开了,那么前后 webview 高度不一致会使得右划无预览。
|
14
catfan OP 已小幅更新到 v3.0.3,黑暗模式算法小度强化。
|
15
justNoBody 2020-10-21 18:16:35 +08:00
能不能改个名字 四川人觉得 Gear 不好读 😂 容易被误解是脏话, 类似罗永浩老师的锤子
|
16
catfan OP @justNoBody 这本来是英文啊,很难兼顾所有地区的读音...😂
Gear 本身意思为齿轮、工具、装置等,而且读音类似 Geek 很多游戏名字也是用它: Metal Gear Solid - 合金装备 Guilty Gear - 罪恶装备 Gears / Gears of War - 战争机器 无主之地的开发商叫 Gearbox 著名汽车节目 Top Gear 还有很多...是相当正派且猛男的名字 |
17
justNoBody 2020-10-21 22:01:38 +08:00
@catfan 是我的问题, 去查了一下 Google 翻译, 应该是读 “给尔” 误解了误解了
|
18
stkstkss 2021-06-23 10:48:29 +08:00
支持 刚使用 ablook 可以丢了
|
19
HandSonic 2021-11-02 17:28:43 +08:00
请教一下作者,Gear 安装过的油猴脚本如何管理,比如禁用,启用,更新,删除之类的,我在设置里找了半天也没找到
|
20
HandSonic 2021-11-02 18:11:00 +08:00 1
找到了,必须要打开一个网页才有,主页里面的设置没有😂
|
21
catfan OP @HandSonic iPhone 的话,访问任意网页,点击在页面右下角的菜单,右划进入高级菜单,在右下角选择「插件」进入插件管理器便可管理、更新、甚至编辑和创建插件。
iPad 则是点击右上角的菜单进入。 |