暗主题

暗主题

暗主题是一个低亮度的用户界面展示大量的暗表面

使用

在暗主题中，大部分用户界面展示为暗表面。它被设计为默认主题（亮主题）的补充模式。

暗主题减少设备屏幕发出的光亮，同时还保证了最低的色彩对比度。它们通过减少眼睛疲劳提升视觉功效，根据当前的光线环境调节亮度，在黑暗环境中促进屏幕的使用——这些都能节省电池能量。有OLED屏幕的设备还能从随时关闭暗像素的功能中受益。

准则

通过灰度变暗

使用暗灰度而不是黑色——在更广阔的深度范围内表现层级和空间。

使用色彩强调

在暗主题的界面中运用有限的强调色，那么大部分的空间还是专用于暗表面。

节省能量

在要求效率的产品中（比如有OLED屏幕的设备上），通过减少亮像素的使用节省电池寿命。

增强易用性

 关注一般的暗主题用户（比如弱视的人），需要符合可用性色彩对比标准。

特性

材料设计中的暗主题是通过以下特性定义的：

对比度：暗表面和100%白色的主体文本的对比度至少为15.8:1

深度：对于更高的视觉层级，组件通过展示更亮的表面颜色表现深度。

低饱和度：主色是低饱和度的，那么它们在所有的层级中都可以通过网页内容可用性指南（WCAG）AA 标准中最小的4.5:1（当和主体文本一起使用时）比例。

有限的色彩：大量的表面使用暗表面颜色，同时使用有限的强调色（亮的、低饱和度的颜色或者明亮的，高饱和和度颜色）

剖析

暗主题界面使用暗表面主导，使用稀少的强调色。它们发出少量的光同时保持高标准的可用性。

背景（0dp 层级的表面）

表面（1dp 层级的表面）

主色

辅助色

在背景上的颜色

在表面上的颜色

在主色伤的颜色

在辅助色上的颜色

行为

暗主题可以通过显示出来的按钮去打开或关闭

优先的，通过图标按钮的切换去控制主题的关闭

较低优先级的，通过在菜单或设置中的切换控制

在顶部应用栏中的主题切换

在更多菜单中的暗主题切换

在一个应用设置中的暗主题切换

属性

暗主题使用暗灰色，而不是黑色，作为组件中主要的表面颜色。暗灰色可以表现出更广阔的色彩、层级和深度，因为在灰色（而不是黑色）上更容易看到阴影。

暗灰色还能减少眼睛疲劳，因为在暗灰色表面上的亮文字比在黑表面上的亮文字有更弱的对比度。

建议使用的暗主题表面色是#121212

层级

在暗主题中，组件保持在亮主题中一样默认的层级。然而，在暗主题中，不同层级的表面是通过不同的方式表现出来。

更高的层级，更亮的表面

越高层级的表面（距离虚拟的光源更近），表面就越亮。亮度是通过应用半透明的白色覆盖物表现出来的。

ligter.mp4

当表面提升高度时，它的颜色变得更亮

一个表面通过应用半透明的白色覆盖物变得更亮

1.表面

2.层级覆盖物

表面上的覆盖物也使组件之间的层级更容易区分，且更容易看到阴影。覆盖物增加了表面和它们阴影之间的对比，让每个表面的边界更加明显。

overlay.mp4

默认的主题使用阴影表现层级，同时暗主题通过调整表面的颜色表现层级

这些表面的值被设计得最大化可读性，同时保证了不同的层级之间是分得清的

覆盖物透明度范围从最低的0%到最高的16%层级

覆盖物表明了组件间的层级不同

A.在1dp层级的卡片使用5%的覆盖物

B.在6dp层级的浮动按钮使用辅助色而没有覆盖物

C.在8dp层级的底部按钮使用12%的覆盖物

使用主色或辅助色的组件不使用层级覆盖物。在暗主题里，阴影还是暗的，以准确的表达出投影。

避免在主色和辅色的组件上使用层级覆盖物

不要使用发光在阴影中表现层级，因为它们不能像投影那样准确的表达出层级。

易用性和对比度

暗主题的表面必须足够暗以展示白色文本。它们必须在文本和背景之间使用最少的对比15.8:1层级。这样能够保证当在最高层级上运用主题文本时，文本能够通过WCAG's AA标准的4.5:1.

得到品牌的暗表面，把品牌主色的透明度降到最低，放到建议的暗主题表面色（#121212）上面。颜色（#1F1B24）就是结合8%的主色和暗主题表面色#121212的结果。

如果背景颜色没有足够暗以符合白色文本和表面的15.8:1最低对比层级，那么文本在最高层级的表面上就不能通过4.5:1的标准。

确保背景颜色足够暗，那么主题文字在最高层级的表面上符合最低4.5:1（AA）对比。

需要电池使用效率的用户界面可以使用真黑色。在这些情况下，一些设备（比如使用OLED屏幕的穿戴设备）可以关闭任何显示黑色的像素以节省电池能量。

oled.mp4

在OLED屏幕上，关闭或打开像素会在屏幕滚动时引起延迟，使像素变得模糊。

界面应用

主题颜色

所有暗主题颜色应该使用足够的对比度去显示元素，对于主体文本当应用到所有层级表面时，通过WCAG's AA 标准最低4.5:1。

低饱和度颜色提高易用性

暗主题应该避免使用高饱和度的颜色，因为它们不能通过WCAG's AA标准 最低的4.5:1,对于主体文本在暗表面上。饱和的颜色在暗背景上也能产生视觉的颤动，从而引起眼睛的疲劳。

相反的，低饱和度的颜色能作为更易读的替代被使用。

你色盘上的低饱和度的颜色可以提升可读性，减少视觉颤动。

避免使用在暗主题上引起视觉颤动的高饱和度颜色

主要颜色

主要颜色是在你的应用屏幕和组件上出现最频繁的颜色。材料设计的基准暗主题使用200色调作为主色（在所有的层级表面上，对于文本都能通过WCAG's AA标准，最低4.5:1）。

暗主题中的一个主色版样例

1.主色指示器

2.色调系列

主色变体

有亮表面的组件能显示你暗主题主色的变体。

这个暗主题界面使用了主色（紫色 200）和主色变体（紫色 700）

辅助色

辅助色能够用来强调你的界面中选中的部分。在暗主题中，辅助色可以降低饱和度以符合 4.5:1 对比层级。

在暗主题中一个辅助色板样例

1.辅助色指示器

2.色调系列

这个界面使用了主色和辅助色的变体

强调色

在暗主题中，暗表面占据界面的主要部分。强调色一般都是亮色（低饱和 淡雅的）或者是明亮（饱和的，鲜艳的颜色）以帮助突出元素。它们应该被谨慎使用以突出关键元素，比如文本或者按钮。

找出强调色

色板生成器可以用来生成一个颜色主题。它还能生成色调板，那是一系列从亮到暗的颜色变体，通过你的主色或者辅助色生成的。你可以为你的暗主题选择这些变体。

为了在暗主题中更加灵活和可用，推荐使用亮色调（200—50）。而不是默认的颜色主题（范围在 900-500 的饱和颜色）

1.默认主题的主色指示器

2.暗主题的主色指示器

亮色调（在200—50范围内的颜色）在暗主题表面（所有层级）上有更好的可读性。

避免在暗主题中使用饱和颜色，因为它们在暗表面上会引起视觉颤动。

默认主题中在顶部应用栏中使用颜色

在暗主题中，顶部应用栏中使用暗色而不是主色或者辅助色

品牌色

为了保持品牌识别度，原有饱和度的品牌色可以在暗主题中使用，虽然被应用到有限的一到两个关键品牌元素，比如标志或着品牌按钮。通过谨慎地使用品牌色，元素在层级中保持了优先级。

原有饱和度的品牌色被应用到悬浮操作按钮上，同时低饱和度的暗主题主色被应用到文本上。

1.暗主题主色

2.品牌色

暗主题基础色板

材料设计的基准主题包含了暗主题的色调板。暗主题颜色应该被运用到暗主题界面上，包括：

颜色（主色、辅助色和主色变体）

表面（背景和组件）

状态（比如错误状态）

内容（字体和图标）

暗主题基准材料色板

1.材料设计基准默认主题

2.材料设计基准暗主题

错误色

错误色被用来表明错误状态。材料基准暗主题错误色是#CF6679

暗主题颜色是通过把亮主题的错误色（#B000020）和40%白色覆盖使它变亮得到的，使它能通过AA级别的对比标准。

字体和图标颜色

上面的颜色

上面的颜色（'On' colors ）主要是运用在主要表面上的文本、图标和描边上，使用主色、辅助色、表面色、背景色、或者错误色。

默认的，暗主题的“上面的颜色”一般是白色和黑色。

界面展示了暗主题的文字和图标的基准颜色

在暗背景上的亮色文本

当亮的文本显示在暗背景上（这里展示的是白色在黑色上）时，它需要使用如下的透明度等级：

高优先级文本使用87%的透明度

中等优先级文本和提示文本使用60%的透明度

失效文本使用38%的透明度

高优先级、中等优先级和失效文本

习惯应用

材料设计中的有些场景可以从使用选择暗主题元素中获益

大的表面

使用一大块屏幕的组件，比如应用栏和背景幕，可以在它们的组件上使用暗主题。

为小的表面保留亮色

不要在大的表面上使用亮色，因为它们发出太多的光亮

如果一个暗色比推荐的表面色（#121212）更好，确保它们能通过15.8:1的对比度

避免在背景幕上使用暗主题的主色，因为它会在屏幕的大块地方覆盖上亮色

结合亮主题和暗主题

当在暗主题中使用亮表面时，亮色可以用在选择组件的表面上以保持优先级。

比如，暗主题中的提示条可以显示亮表面以突出它。做到这一点，它可以运用亮主题的表面和表面上的颜色。

提示条在暗主题中使用亮表面帮助它突出

1.在表面上

2.表面

3.主色变体

状态

状态通过覆盖物的运用视觉地传达出组件或可交互的元素所在的状态。在暗主题中，状态使用它们在默认主题（亮主题）中一样的覆盖值，并且调整它们以通过AA等级的对比度标准

有两种类型的容器使用状态覆盖物：使用“表面”颜色的容器和使用“主”色的容器

表面容器

表面容器使用的颜色应该和它的图标和文本标签（如果没有图标）相匹配

激活的、移入的、焦点的、按下的和拖拽的容器状态使用表面颜色

激活的、移入的、焦点的、按下的和拖拽的容器使用表面颜色和内容的主色

主色的容器

对于使用主色的表面容器，它们的状态覆盖物是白色

激活的、移入的、焦点的、按下的和拖拽的容器使用半透明的主色

激活的、移入的、焦点的、按下的和拖拽的容器使用半透明的主色

失效的状态

所有失效的组件在容器边框和填充上使用12%的白色，在文本标签和图标等内容上使用38%的白色

1.带边框的容器：12%的白色

2.标签/图标：38%的白色

3.填充的内容：12%的白色