通过三星互联网应用程序图标背后侧日间模式和SVG-夜间模式上示出一个丰富多彩的彩虹旗。

一切你需要了解三星上网夜间模式

作为Web开发人员,你可能熟悉的喜欢色彩的方案层叠样式表(CSS)媒体查询。它允许Web开发人员创建颜色的明暗架构独立的样式表。Web浏览器应用通常这些配色方案如下操作系统的配色方案偏好之一。

三星互联网是世界上最大的智能手机制造商,谷歌浏览器和Apple Safari之后的第三大最受欢迎的手机浏览器设备的默认浏览器。与前两种,它支持标准喜欢色彩的方案CSS媒体查询。然而,它也有自己的黑暗模式,称为“夜间模式”。在三星互联网版本6.2中引入的夜间模式下,浏览器将一组颜色过滤器应用于网页、位图图像和可缩放矢量图形(SVG)。

三星没有公布关于夜间模式在其浏览器是如何工作的任何信息。这篇文章是基于三星的互联网版本11的源代码,它可能不完全准确,因为相关的代码是相当复杂的,难以跟踪的分析。在这篇文章中,我将讨论夜间模式如何作用于不同类型的内容,什么问题它可以引起。

请禁用夜/暗和高对比度模式在网页浏览器在阅读本文之前。本文将详细讨论三星上网的彩色滤光片和当启用夜间模式的说明可能会显示不正确。

下图显示的侧方比较的颜色如何被渲染在默认天模式,在夜晚模式,并在夜间模式呈现SVG图像。请注意,在SVG版本的颜色是如何相当光明,而不是暗的正如人们所期望。

七彩虹战旗在不同颜色的渲染模式。

从左:白天颜色的位图图像,夜晚颜色的相同图像,以及夜晚颜色的SVG相同图像。

只是渲染前的彩色滤光片应用。原来的颜色保持像的API的getComputedStyle;从微软的边缘处理的高对比度模式设置三星互联网分开。这也使得很难在浏览器与原始页面设计干扰检测。yabo88软件下载

HTML内容

夜间模式将适用于彩色滤光片要么颜色变暗或反转其亮度。不同的滤色器被应用到不同类型的HTML元素。滤色器是使用以下方法施加:

元素的颜色从红、绿、蓝(RGB)颜色转换为亮度、蓝色色度、红色色度(Y 'CbCr)颜色空间(使用标准的ITU-R BT.601转换)。RGB是数字媒体最常用的色彩空间,Y 'CbCr通常用于电影和电视。Y 'CbCr的优点是亮度(Y)被分离到它自己的通道中,而不是作为颜色值的一个组成部分进行编码。当颜色的亮度低于85%时,应用以下过滤器:

M =反转?1  -  Y:Y Y = MIN_Y +(M *(MAX_Y  -  MIN_Y))

这三个变量(倒置,MIN_YMAX_Y)设定依赖于该元件正被颜色调整。这些变量约束亮度给定的范围内。下表包含了不同的元件所允许的范围内的对比度,并且它是从三星互联网版本11.一种亮度复制越接近1种生成较亮的颜色(更亮)和数字越接近0产生较深的颜色(光更少)。反转反转亮度。

零件 闵ÿ 马克斯Y 描述
ROOT_BACKGROUND 0,03 0,08年 没有 html元素背景
背景 0,03 0,12 任何CSS背景
BUTTON_BACKGROUND 0,15 0,29 按钮的背景
TEXTFIELD_BACKGROUND textarea的输入背景
MENULIST_BACKGROUND 选择下拉菜单背景
MENULIST_BUTTON_BACKGROUND 选择背景
MENULIST_BUTTON_ARROW 0,20 0,70 选择背景
GRADIENT_FILL 0,02 0,12 没有 css渐变颜色
边境 0,27 0,33 CSS边框
大纲 0,14 0,20 焦点轮廓
BOX_SHADOW 0,28 0,33 CSS的box-shadow
SVG_PAINT 0,30 0,30 SVG图像
文本 0,29 1,00 文本内容
光标 输入光标
图像 0,70 0,70 没有 图片
BORDER_IMAGE 0,50 0,50 图像边界

该亮度滤波器产生在上述例示比较彩虹旗三个渲染的中间部分观察到的效果。

在上表中所定义的亮度范围可能看起来任意的。因为他们显然是。没有理由为什么夜间模式应该使用这些特定范围或为什么它不使用相同的亮度调整到整个页面。使用相同的亮度调整到整个页面会产生更多的可预见的结果。

颜色的变化可以根据原来的颜色方案产生好或奇怪的结果。例如。Vox.com的黑加亮黄品牌颜色变得白色在一个肮脏的棕色和CNN.com的红底白字黑字亮橙红色

三星网络使用相同的实现,但具有不同的亮度范围,以实现其高对比度模式。高对比度模式是整个主题到自身在这篇文章中,我将不解决它。

位图图像

三星互联网(Samsung Internet)有一个图像分类器,它可以判断是否要反转照片的亮度。分类器决定,具有真实感(主要是彩色像素)、40%以上的白色像素或10%以上的高亮像素的图像不应该被倒置。这将意味着,例如,带有透明背景的黑色图标应该是倒置的,而森林的照片则不会。下图显示了在白天和黑夜模式下相同的黑色图标。你可以看到图标没有被倒置。

的并排比较Coil.com标志设置在白天和黑夜模式下的白色背景。

我还没有能够识别出任何获得反向亮度的图像,即使不这样做会对对比度造成不利影响。夜间模式会损害网页的可用性和可访问性,网页的可用性依赖于白色背景上的黑色图标。

web开发人员无法使用任何好的变通方法来纠正这种情况。三星互联网不支持喜欢色彩的方案CSS媒体查询,也不具有可用于检测夜间模式调整的API。唯一的修复涉及修改图像,并确保有一个白色边框或影像会站出来反对任何背景。这并不总是可取的,但是。

我会去通过亮度反演过程无论如何,因为它会在下一节再来了。颜色从RGB转换成色调,饱和度,亮度(HSL)颜色空间。请注意,亮度是不一样的东西的Y'CbCr的亮度分量。然后反转亮度(L = 1.0 L -)得到较暗的颜色变得越来越轻和较浅的颜色变得更暗。这导致黑变白,反之亦然,但是。要恢复白色和黑色两种颜色,使用复杂的对比度调整。效果大致相同,具有高达20%的黑色或白色的混合色,这取决于从颜色的亮度的中心的距离。

澄清:在上一节中所描述的过滤过程中不会出现使用。取而代之的是,位图图像已经它们的亮度均匀地降低约30%。这是可以理解为倒置的人像照片会产生...灾难性的后果明度通道。

SVG图像

在深入讨论这个主题之前,先快速复习一下SVG图像:SVG图像是具有不同形状(如矩形、圆形等)的XML文档,路径被描述为定位对象,并应用了样式。与位图图像不同的是,该图像由单独的对象组成。您可以针对SVG图像的不同部分设置动画或更改颜色。

位图图像上使用的颜色过滤应该也用于SVG图像。这似乎也是他们所做的。但是,他们并没有放弃对SVG图像进行HSL亮度反转的想法。我将让这些例子说明一些SVG图像的日夜渲染:

在三星互联网的夜间模式下呈现的SVg图形网格与它们的原始版本完全一致。

让我们先来看看为什么有些白色区域均采用黑色,而其他人保持白色。下面是一些伪代码,我已经尝试总结其背后SVG对象亮度反转的逻辑的,哪些不是:

IsBackgroundSVG(形状){返回(形状== “矩形” ||形状== “椭圆”)} IsForegroundSVG(shape_name){返回(形状== “路径”)} LightnessInvertSVGColor(shape_name){如果(IsBackgroundSVG(shape_name)){回报!IsColorDark(彩色)}否则,如果(IsForegroundSVG(shape_name)){回报!IsColorWhite(彩色)}}

要么是一个矩形或椭圆形物体(不知何故不包括正方形和圆形)的任何物体是背景对象。任何对象,它是一个路径对象是前景对象。有,当然,之间有什么前景,什么是SVG规范背景对象没有这样的区别。

这是三星互联网做出的一个完全武断的区分。当然,您可以在前景中使用矩形和正方形,在背景中使用路径。判断一个对象是在背景还是在前景的唯一方法是看它在z轴上的位置。不过,这种区别无论如何都不重要。

例如。the white circle in the syndication feed icon (top left in the above illustration) is an ellipse object — a background object by Samsung’s definition — and it’s not a dark color. The object gets inverted which turning the circle black. The other white objects in the same image are white paths. Paths are, by Samsung’s definition, are foreground objects and shouldn’t be inverted when the have a light color.

所有的柔和颜色都是上一节描述的HSL亮度反转和混合的结果。彩虹中的橙色、黄色和蓝色保持不变(它们的亮度约为50%),而其他颜色则以柔和的颜色结束。一旦你看到这些糟糕的结果,你就会明白为什么这个过滤器不用于位图图像。但是,它留下了一个问题:为什么在SVG图像上使用它?

这个部分不应该对你有意义。这是一派胡言。我不知道三星为什么要用这种奇怪的滤色镜。我可以有根据地猜测,三星试图解决我在上一节中描述的对比问题。SVG图像经常用于图标和其他UI元素。但是,它也经常用于演示,并且实现会创建自己的一组对比问题。

作为Web开发人员,您可以在椭圆和矩形转换成路径,反之亦然,以避免倒对象。您也可以选择与HSL亮度的颜色接近50%,以尽量减少影响。归根结底,这是三星的东西需要修复其网络浏览器。

视频和帆布

这些页面元素的不是色彩过滤。这大概是太处理器密集型和昂贵的设备的电池寿命方面。

结论

对于最终用户:黑暗模式很酷。三星的“自动暗模式”(auto -dark mode)——适用于任何设计——会破坏一些网页,降低yabo88软件下载对比度,并影响可访问性。也许关闭三星互联网的夜间模式。至少现在是这样。

对于web开发人员:我通常不推荐这样做。但是,您无法检测夜间模式的使用并部署任何对策。它打破了web平台上关于颜色的基本假设。如果您严重依赖SVG或在白色背景上使用具有透明背景的黑色图像;你可以检测SamsungBrowser并鼓励人们切换到另一个web浏览器。

对于三星的互联网开发者:请重新考虑你的夜间模式功能。你不能随意颠倒一些页面元素,而不是别人。也许添加支持喜欢色彩的方案代替?。

来源

  • 三星开源下载ID#8722(不可链接)。