🕺🏼 🤹🏾 🏢 黑暗模式：你好黑暗，我的老朋友 👩🏾‍⚖️ ⚔️ 🍢

暗模式仍然是网站和应用程序设计的主要趋势。我们找到了关于该主题的精彩文章，并决定分享翻译。用户意见，暗模式的实现和支持，以及对开发人员的建议，将在本文中进一步介绍。你支持哪一边？

只是炒作还是必要？了解有关暗模式的更多信息。我将向您展示如何为用户的利益添加暗模式支持！

介绍

关于这个话题，我进行了大量的研究，研究了这个问题的历史。如果您只对使用暗模式感兴趣，请随时跳过第一部分。

黑暗模式成为主流之前

绿屏（来源）

他们说历史是周期性的。在黑暗模式下，我们回到了一切开始的地方。在个人计算机的早期，暗模式是唯一的选择：单色CRT监视器通过将电子束照射到磷光屏上来工作，而早期CRT中使用的磷光体是绿色的。由于文本显示为绿色，而屏幕的其余部分为黑色，因此这些型号通常称为绿色屏幕。

暗白色（源）

随后，彩色CRT显示器开始通过使用红色，绿色和蓝色磷光体显示多种颜色。他们通过同时激活所有三种荧光粉来产生白色。随着更现代的桌面出版和所见即所得技术的出现，使虚拟文档看起来像一张真实的纸的想法变得流行起来。

浏览器WorldWideWeb（源）

在设计的这一点上，“暗白色”趋势诞生了，它在网络上的第一个网站中得到了实现-它们更像是文本文档。

世界上第一个浏览器WorldWideWeb（想象还没有发明CSS）以这种方式呈现网页。有趣的事实：第二个行模式浏览器（基于终端的浏览器）在黑暗中呈绿色。如今，网页和应用程序通常是在浅色背景上以深色文本创建的，这是公认的规范。此配色方案内置于现代用户代理（例如Chrome）的样式表中。...

使用智能手机（来源）

CRT显示器的时代已经过去了。现在，我们在使用背光LCD或节能AMOLED显示器的移动设备上消费并创建大量内容。体积更小，更实用的计算机，平板电脑和智能手机带来了新的用户行为模式。在闲暇时光，我们消失在社交网络上，为娱乐而编程或玩电脑游戏。这通常发生在晚上在昏暗的灯光下工作后，甚至晚上在睡觉前的床上。在黑暗中使用设备的人越多，深色模式就越受欢迎。

为什么选择暗模式？

出于美学原因，

当人们被问到为什么喜欢深色模式时，最受欢迎的答案是“更悦目”或“深色模式很美”。苹果公司在其黑暗模式开发者文档中公开表示：“大多数用户选择黑暗或明亮是基于审美偏好，可能与照明条件无关。”

在研究中了解更多信息，为什么人们喜欢黑暗模式以及如何使用它。

System 7 CloseView（源）

暗模式作为残障人士的辅助功能工具

某些人只需要使用暗模式：例如，视障用户将暗模式用作可访问性工具。我可以发现，最早将深色模式用作可访问性工具是System 7中的CloseView功能，该功能可以将颜色方案从黑白变白和黑白变白。尽管System 7支持彩色界面，但是默认的用户界面是黑白。

这种基于反转的方法在增加界面中的颜色数量后已显示出其弱点。 Sarit Szpiro与一组研究人员进行了调查视障人士如何使用计算机设备。结果，事实证明，所有受访者都不喜欢倒置颜色，而是许多人喜欢深色背景上的浅色文字。 Apple通过Smart Invert解决了这种用户偏爱，该功能可以更改显示屏上的颜色，但不包括图像，媒体和某些使用深色样式的应用程序。

低视力的一种特殊形式是计算机视觉综合症，也称为数字眼疲劳。这些术语意味着与频繁使用计算机（台式机，笔记本电脑和平板电脑）和其他电子设备（智能手机和电子书）相关的各种视觉问题。科学家推测，青少年使用电子设备，尤其是在夜间，会导致睡眠问题，失眠和睡眠剥夺综合症的风险增加。根据其他研究，蓝光的影响与昼夜节律的调节有关睡眠周期以及不规则的光照环境会导致睡眠不足，从而影响人的情绪和执行任务的效率。您可以通过调整显示屏的色温（功能，例如iOS Night Shift或Android Night Light）来减少蓝光的数量，或者通过使用Dark Theme或Mode来防止明亮或不规则的光线，从而减少负面影响。

在AMOLED显示器上以暗模式节省能源

众所周知，暗模式可在AMOLED显示器上节省大量电量。对YouTube等流行的Google应用程序的研究证明，节能最多可以达到60％。以下视频提供了有关这些研究的更多详细信息以及每种应用的节能效果。

如何在操作系统中激活暗模式

现在，我已经说明了为什么暗模式对许多用户如此重要，让我们看看如何自定义它。

在

支持深色模式或深色主题的Android Q操作系统上，深色主题设置通常可以在设置中激活它们。在macOS X上，它位于“系统偏好设置”的“常规”部分下，称为“外观”（屏幕截图），在Windows 10上，它位于“颜色”下的“选择颜色”（屏幕截图）。对于Android Q，您可以将模式切换为“显示为黑暗主题”（屏幕截图），在iOS 13中，可以在“显示和亮度”部分（屏幕截图）更改界面颜色。

- prefers-color-scheme

在继续之前，需要多一点理论。媒体查询允许作者独立于文档的呈现来测试和查询用户代理或设备的值和属性。它们在CSS媒体规则中用于有条件地将样式应用于文档以及其他一些上下文和语言，例如HTML和JavaScript。级别5媒体查询引入了所谓的用户首选媒体属性，这是站点发现用户首选的内容显示方式的信号。首选运动减少

CSS媒体属性集可用于确定用户是否请求操作系统最小化其使用的动画量。我已经早些时候写过关于“偏好减少运动”的文章。preferreds-color-scheme

CSS媒体属性用于确定操作系统中的人员使用哪种主题（浅色或深色）。它适用于以下值：

no-preference：指示用户尚未使系统知道任何偏好。在逻辑上下文中，此关键字的值为false 。
浅色：表示用户已通知系统他们希望使用浅色主题的页面（浅色背景上的深色文本）。
dark：表示用户已通知系统他们偏爱带有深色主题的页面（深色背景上的浅色文本）。

暗模式支持

找出浏览器是否支持暗模式

由于暗模式是通过媒体查询传达的，因此您可以通过查找媒体查询是否为preferreds-color-scheme来轻松检查当前浏览器是否支持暗模式。请注意，我没有设置值，而只是检查媒体查询是否匹配。

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log(' Dark mode is supported');
}

在撰写本文时，Chrome和Edge版本76，Chrome版本67的Firefox，macOS版本12.1的Safari和Safari版本的台式机和移动设备（如果有）在台式机和移动设备（支持）上均支持Preferreds-color-scheme。对于所有其他浏览器，您可以在文章我可以使用支持表中找到信息。

可以使用自定义的<dark-mode-toggle>元素，为较旧的浏览器添加暗模式支持。我将进一步写这个。

实践中的黑暗模式

让我们看一下实际中暗模式支持的情况。就像电影《高地人》中一样，最后只能有一个：黑暗或明亮！我为什么要专注于此？因为这个事实会影响加载策略。请不要强迫用户在关键渲染阶段为当前未使用的模式下载CSS。因此，为了优化加载速度，我将示例中的CSS分为三部分，以延迟非关键CSS的加载：

style.css包含整个站点使用的一般规则
dark.css包含黑暗模式所需的规则
light.css仅包含灯光模式所需的规则。

加载策略

最后两个light.css和dark.css通过<link media>请求有选择地加载。

最初，并非所有浏览器都支持preferreds-color-scheme CSS媒体属性（可在上面的示例中找到），这可以通过内联脚本中的元素选择默认的light.css来解决（light是一个任意选择，我也可以通过默认）。为了避免出现未样式化的内容，我将页面内容隐藏起来，直到light.css被加载。

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
        'beforeend',
        '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = ``">'
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->

<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">

<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css">

样式表架构

我正在使用CSS变量，它允许style.css是通用的，所有亮或暗模式设置都发生在另外两个文件中：dark.css和light.css。下面是一个足以说明一般想法的示例。我声明了两个变量-⁠-⁠color和-⁠-⁠background-color，它们创建了亮暗和亮暗基础主题。

/* light.css:  dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}
/* dark.css:  light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

然后在style.css中，我在主体{...}中使用这些变量。因为它们是在CSS伪类中定义的：root-一个选择器，在HTML中代表<html>元素，并且与html选择器相同，不同之处在于它的特异性更高：变量是级联的，因此可以定义全局CSS变量。

/* style.css */
:root {
  color-scheme: light dark;
}
body {
  color: var(--color);
  background-color: var(--background-color);
}

在上面的示例中，您可能已经注意到了color-scheme属性，其中深色值由空格分隔。

该属性告诉浏览器我的应用程序支持哪种颜色主题，并允许它激活用户代理样式表的特殊变体。例如，这对允许浏览器显示深色背景和浅色文本的表单字段，自定义滚动条或启用特定于主题的突出显示颜色很有用。color-scheme属性的详细信息在CSS Color Adjustment Module Level 1中指定。

了解有关颜色方案的更多信息。

我在网站上剩下的所有标记都只是CSS样式。当使用暗模式时，样式的语义组织将有很大帮助。例如，代替-⁠-⁠highlight黄色，考虑命名变量-⁠-⁠accent色，因为“黄色”实际上可能并不是在黑暗模式，或反之亦然黄色。以下是我正在使用的其他一些变量的示例。

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

详细分析

在下面的方框Glitch中，您可以看到一个实际上使用了上述所有内容的示例。尝试在操作系统设置中切换暗模式，然后查看页面的反应。

对下载速度的影响

当您充分利用此示例时，您可以看到为什么我通过媒体查询加载dark.css和light.css的原因。尝试切换暗模式并重新加载页面：某些当前不匹配的样式表仍在加载中，但是优先级最低，因此它们不与网站现在需要的资源竞争。

找出为什么浏览器使用不匹配的媒体查询加载样式表的原因。

浅色网站加载优先级最低的

深色样式：浅色网站加载优先级最低的深色样式：

浏览器中皮肤浅色的默认站点不支持preferreds-color-scheme，它会以最低优先级加载深色样式：

如何应对黑暗模式的变化

与其他媒体查询更改一样，您可以通过JavaScript订阅暗模式更改。例如，您可以使用它来动态更改页面图标或更改<meta name =“ theme-color”>，它确定Chrome中URL栏的颜色。上面的示例显示了实际描述的内容。要查看主题和图标的颜色变化，请在单独的标签中打开演示。

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  darkModeMediaQuery.addListener((e) => {
    const darkModeOn = e.matches;
    console.log(`Dark mode is ${darkModeOn ? ' on' : '️ off'}.`);
  });

暗模式最佳做法

避免使用

纯白色您可能已经注意到一个小细节：我没有使用纯白色。相反，为了防止周围的深色内容发光，我选择了稍深的白色，例如rgb（250，250，250）。

更改照片图像的颜色和变暗

如果将下面的两个屏幕截图进行比较，您会发现不仅主主题从暗变为亮，再由亮变为暗，而且图像看起来有些不同。我的调查发现，启用暗模式时，大多数用户更喜欢明亮和饱和度稍低的图像。我称之为重新着色。

在黑暗模式下，图片颜色变暗

浅色模式下的

图像颜色您可以使用CSS滤镜为图像重新着色。我使用的CSS选择器适合其网址中没有.svg的所有图像。我的想法是，我可以对矢量图形（图标）进行不同的处理，在下一节中将对此进行更多介绍。注意如何再次使用CSS变量，以便以后可以快速更改过滤器。

从研究中了解有关用户偏好的更多信息。

由于重着色在暗模式只要求，即，当dark.css是活动的，没有相应的规则在light.css。

/* dark.css */
--image-filter: grayscale(50%);
img:not([src*=".svg"]) {
  filter: var(--image-filter);
}

使用JavaScript调整黑暗模式重新着色的强度

我们有所不同，每个人都会对黑暗模式的外观有自己的看法。通过坚持上述的重新着色方法，我可以轻松地将灰度强度设置为用户喜好（由JavaScript进行更改），并且通过将该值设置为0％，可以完全关闭重新着色。请注意，document.documentElement提供了指向文档根元素的链接，即，我可以使用CSS伪类引用的元素：root。

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

反转向量和图标

对于矢量图形（在我的情况下，用作图标，通过<img>元素进行引用），我使用了不同的重新着色方法。尽管研究表明人们不喜欢照片倒置，但它对于大多数图标都非常有效。我再次使用CSS变量来确定正常和悬停状态下的反转程度。

在黑暗模式下图标被反转：

在明亮模式下图标：

请注意，我如何再次仅在dark.css而不是light.css中反转图标，以及如何：悬停 根据用户选择的模式，在两种情况下会获得不同的反转强度，以使图标看起来更暗或更亮。

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);
img[src*=".svg"] {
  filter: var(--icon-filter);
}
/* light.css */
--icon-filter_hover: invert(60%);
/* style.css */
img[src*=".svg"]:hover {
  filter: var(--icon-filter_hover);
}

将currentColor用于内联SVG

您可以添加currentColor关键字（表示元素的颜色值），而不是对内嵌SVG图像使用逆滤镜。这使您可以为默认情况下不接收的属性设置颜色值。实际上，如果将currentColor用作SVG填充或描边属性的值，则它将从继承的color属性中获取其值。这也适用于<svg> <use href =“…”> </ svg>，因此您可以拥有单独的资源，并且currentColor仍将应用在上下文中。请注意，这仅适用于内联或<use href =“ ...”>

SVG，但不适用于SVG，它们被称为src映像或通过CSS。更多细节在这里。

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

模式之间的平滑过渡

由于颜色和背景是可动画的CSS属性，因此可以平滑地从暗切换为亮，反之亦然。动画就像声明两个属性的两个过渡一样容易。的例子下面说明的总体思路。

body {
  --duration: 0.5s;
   --timing: ease;
  color: var(--color);
  background-color: var(--background-color);
  transition:
    color var(--duration) var(--timing),
    background-color var(--duration) var(--timing);
}

黑暗模式下的艺术设计

虽然通常出于加载性能的原因，我建议仅在元素的media属性中使用而不喜欢内幕式（而不是在样式表中内联），但是在某些情况下，您可能确实希望在HTML-代码。装饰就是这样的情况。艺术设计-页面的整体视觉设计：网站如何影响用户，带来什么样的感觉。

在暗模式下，设计人员必须决定选择哪个图像以及是否对图像重新着色。适当。通过使用<picture>元素，可以使<source>显示的图像取决于media属性。在下面的示例中，我将显示在暗模式下为西半球，在亮模式下为东半球，或者当未指定任何设置时，无论如何默认值是东半球。这些图像当然只是在说明我的示例。在您的设备上打开暗模式即可查看区别。

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)">
  <source srcset="eastern.webp" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
  <img src="eastern.webp">
</picture>

禁用黑暗模式

如上所述，大多数用户根据自己的口味和审美偏好选择深色模式。一些用户喜欢以惯常的方式看到他们的OS UI变暗以及他们的网页。行动计划：首先等待浏览器通过“ preferred-color-scheme”发送的信号，然后让用户根据需要覆盖系统级设置。

自定义元素<dark-mode-toggle>

当然，您可以自己创建这样的代码，但是您可以简单地使用我专门为此目的创建的现成元素（Web组件）。它称为<dark-mode-toggle>，并在您的页面上添加了一个可以完全自定义的切换按钮（暗模式：开/关）或主题切换器（主题：亮/暗）。在动作如下图演示的元素（哦，我也谨慎使用它在所有的其他例子以上）。

<dark-mode-toggle
    legend="Theme Switcher"
    appearance="switch"
    dark="Dark"
    light="Light"
    remember="Remember this"
></dark-mode-toggle>

浅模式下的

<dark-mode-toggle> ：暗模式下的<dark-mode-toggle>：

尝试单击或触摸下面演示右上角的暗模式控件。如果选中第三个和第四个控件中的框，则即使在重新加载页面时，也将记住如何选择模式。这使您的访问者可以将其操作系统保持在暗模式下，而在光模式下则可以欣赏您的网站，反之亦然。

结论

使用和维护黑暗模式很有趣！设计的新可能性正在打开。选择黑暗模式可以使用户更快乐。是的，有缺陷，需要严格的测试，但是黑暗模式是表明您在乎用户的绝佳机会。本文提到的最佳实践以及一个自定义<dark-mode-toggle>元素之类的生活技巧应该可以帮助您创建出色的黑暗模式。

有用的链接

Prefers-color-scheme媒体查询：

颜色方案元标记：

dark mode:

黑暗模式：你好黑暗，我的老朋友

介绍