Google I/O2019大会推出深色主题，查阅了相关内容进行翻译，本文是自己翻译的第一篇文章，如有不妥请大家根据官网链接进行比对。

---

深色主题

深色主题是一个弱光用户界面，主要显示深色外观

---

用法

深色主题在用户界面的大部分区域显示深色表面；它被设计为默认(或浅色)主题的补充模式。

深色主题降低了设备屏幕发出的亮度，同时仍然满足最低色彩对比度。 它们通过减轻眼睛疲劳，根据当前的照明条件调整亮度，以及在黑暗环境中方便屏幕使用，从而改善视觉人体工程学—— 同时节省电池电量。 具有OLED屏幕的设备可以在一天中的任何时间关闭黑色像素 。

---

原则

灰色变暗

使用深灰色（而不是黑色）来表达更广泛深度环境中的高度和空间。

颜色与重点

在深色主题 的用户界面中应用有限的点缀色, 因此大部分空间专用于深色外观。 

节约能源

在需要效率的产品中（例如带有OLED屏幕的设备），通过减少使用浅色像素来节省电池寿命。

增强可访问性

通过满足可访问性颜色对比标准，适应常规的深色主题用户（例如视力不佳的用户）

---

解剖

深色主题用户界面主要使用深色外观，少量点缀色。 它们发出的光线很少，同时保持高标准的可用性。

1.背景（高度为0dp表面叠加）

2.表面（高度为1dp表面叠加）

3.主色

4.辅助色

5.在背景上的用色

6.在表面上的用色

7.在主色上的用色

8.在辅助颜色上的用色

---

行为

可以使用显示的控件打开（或关闭）深色主题：

显著的操作，使用图标切换打开或关闭主题

显著性降低的操作，在菜单或应用程序设置中放置一个切换

顶部应用栏中切换深色主题 溢出菜单中切换黑色主题 应用程序设置中切换深色主题

---

高度

在深色主题中，组件保留与浅色主题中的组件相同的默认高度层和阴影。 然而在深色主题中，不同高度层的表面亮度不同。

高度越高，表面越亮

表面高度越高（越接近隐含光源），表面越亮。 通过应用半透明白色叠加层来表达这种亮度。

随着表面升高，颜色变亮。

通过应用半透明白色叠加层，表面变得更亮。

1.表面

2.高度叠加层

表面上的叠加层还可以更轻松地区分组件之间的高度并查看阴影。 叠加层增加了表面与阴影之间的对比度，使每个表面的边缘更加明显。

默认主题使用阴影来表示高度，而深色主题也通过调整表面颜色来表示高度。

表面叠加层旨在最大限度地提高易读性，同时确保不同的高度层彼此可辨别。

高度叠加层透明度范围从最低级别的0％到最高级别的16％。

叠加层阐明了组件之间的高度差异。

A.高度为1dp的卡片，叠加透明度为5%

B. 高度为6dp的悬浮按钮，使用不带叠加层的辅助色

C.高度为8dp的底部应用栏，叠加透明度为12%

高度叠加层不应用于使用主色或辅助颜色的组件表面。

在深色主题中，阴影仍使用黑色以准确地表示投影。

不要对使用主色或辅助颜色的容器组件进行高度叠加。 不要使用亮色代替黑色阴影来表示高度，因为它们不能准确地表示投影的高度。

深色主题表面必须足够暗以显示白色文本。 文本和背景之间的对比度应至少为15.8:1。 这确保了当应用于最高（和最亮）高度的表面时，正文文本通过至少4.5:1的WCAG AA标准。

创建带有品牌的深色表面，请在推荐的深色主题表面颜色（＃121212）上叠加低不透明度主要品牌颜色。 颜色＃1F1B24是深色主题表面颜色＃121212和8％主要品牌颜色组合的结果。

如果背景颜色不够深，无法在白色文本和表面之间达到至少15.8：1的对比度，则最高（和最亮）高度表面的文本将无法通过4.5：1标准。

确保背景颜色足够深，以使正文在最高的表面（24dp）上达到至少4.5：1（AA）的对比度。

确保背景颜色足够深，以使正文在最高的表面（24dp）上达到至少4.5：1（AA）的对比度。

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

在OLED屏幕上，打开和关闭像素会导致屏幕滚动时出现延迟，从而使像素模糊。

---

用户界面应用

主题颜色

所有深色主题颜色应显示具有足够对比度的元素，当应用于所有高度表面时，应通过WCAG的AA标准正文文本对比度至少为4.5:1。

不饱和色的可访问性

深色主题应避免使用饱和颜色，因为它们不符合WCAG针对深色表面的正文文本至少4.5:1的可访问性标准。饱和的颜色在黑暗的背景下也会产生视觉振动，这会导致眼睛疲劳。相反，不饱和的颜色可以作为更清晰的选择。

调色板中低饱和颜色可提高易读性并减少视觉振动。

避免在深色背景下使用视觉振动的饱和颜色。

主色

主色是应用程序界面和组件中显示频率最高的颜色。基础 Material Design深色主题使用200色调的主色（在所有高度表面，通过WCAG的AA标准至少4.5:1的正常文本）。

深色主题中的主色调色板示例

1.主色

2.色调变体

主色变体

浅色外观的组件可以显示你的深色主题的主色的变体。

深色主题用户界面使用主色（紫色200）和主色变体色（紫色700）

辅助色

辅助色可用于强调用户界面的重要部分。在深色主题中，辅助色去饱和以达到4.5:1的对比度。

深色主题中的辅助色调色板示例

1.辅助色

2.辅助色变体

此用户界面使用主色和辅助色变体

强调色

在深色主题中，深色表面占据了UI的大部分。强调色通常是浅色（不饱和柔和色）或明亮（饱和，鲜艳的色彩），以帮助重要元素脱颖而出。应谨慎使用它们来强调关键元素，例如文本或按钮。

寻找强调色 

调色板生成器可用于创建（或查看）颜色主题。 它还可以生成色调调色板，这是从主色和辅助色创建的一系列浅到深颜色变化。 您可以为黑暗主题选择这些变化颜色。

为了在深色主题中提供更多灵活性和可用性，建议在深色主题中使用较浅色调（200-50），而不是默认颜色主题（饱和色调范围为900-500）。

1.默认主题主色

2.深色主题主色

较浅的色调（200-50范围内的颜色）在深色主题表面（所有高度）具有更好的可读性。 避免在黑暗主题上使用饱和色，因为它们会在深色表面产生视觉振动。

默认主题顶部应用栏使用主色同色系。

在深色主题中，顶部应用程序栏的表面使用深色，而不是主色或辅助色。

品牌色

为了保持品牌调性，可以在深色主题中使用饱和的品牌色，但应用应限于一个或两个品牌元素，如徽标或品牌按钮。通过谨慎使用品牌色，让元素在层次结构中保持突出。

深色主题用户界面的其余部分仍应使用不饱和的颜色。

完全饱和的品牌色应用于浮动操作按钮（2），而不饱和的深色主题主色应用于文本（1）。

1.深色主题主色

2.品牌色

深色主题基础调色板

Material Design基础主题包括深色主题的色调调色板。

深色主题颜色在深色主题用户界面中使用，包括：

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

表面（背景和组件）

状态（如错误状态）

内容（排版和图像）

1. Material Design默认主题

2. Material Design深色主题

错误颜色

错误颜色用于显示错误状态。Material Design基础深色主题题错误颜色为#CF6679。

此深色主题颜色是通过采用浅色主题错误颜色（＃B00020）并使用40％白色覆盖物照亮它来创建的，以通过AA级对比度标准。

深色背景上的浅色文本

当浅色文本出现在深色背景上（黑底白字）时，应使用以下不透明度级别：

高强调文本的不透明度为87％

中强调和提示文字的不透明度为60％

禁用文字的不透明度为38％

高强调，中强调和禁用文本

状态

状态在视觉上通过使用叠加层来传达组件或交互元件的状态

在深色主题中，状态应使用与其默认（或浅色）主题相同的叠加值，并且可以调整它们以通过AA级对比度标准。

有两种类型的容器可以继承状态叠加：使用“表面”颜色（#121212）和“主要”颜色的容器。

使用表面颜色的容器

使用表面颜色的容器应该应用与其图标或文本标签的颜色（如果不存在图标）匹配的叠加层。

使用表面颜色的容器的启用，悬停，聚焦，按下和拖动状态。 使用表面颜色和内容的主色为容器启用，悬停，聚焦，按下和拖动状态。

---

使用主要颜色的容器

对于使用“主要”颜色的表面容器，其状态叠加层为白色。

使用半透明主色容器的启用，悬停，聚焦，按下和拖动状态。 使用主色容器的启用、悬停、聚焦、按下和拖动状态。

禁用状态

所有禁用的组件在容器轮廓和填充中使用12%的白色，在标签或图标等内容中使用38%的白色。

1.容器轮廓：12%白色

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

3.容器填充：12%白色