暗主題

暗主題是一個低亮度的用戶界面展示大量的暗表面

使用

在暗主題中，大部分用戶界面展示為暗表面变屁。它被設計為默認主題（亮主題）的補充模式眼俊。

暗主題減少設備屏幕發(fā)出的光亮岳服，同時還保證了最低的色彩對比度算吩。它們通過減少眼睛疲勞提升視覺功效纵寝，根據(jù)當前的光線環(huán)境調節(jié)亮度，在黑暗環(huán)境中促進屏幕的使用——這些都能節(jié)省電池能量吊档。有OLED屏幕的設備還能從隨時關閉暗像素的功能中受益架谎。

準則

通過灰度變暗

使用暗灰度而不是黑色——在更廣闊的深度范圍內表現(xiàn)層級和空間夫啊。

使用色彩強調

在暗主題的界面中運用有限的強調色亡嫌，那么大部分的空間還是專用于暗表面。

節(jié)省能量

在要求效率的產(chǎn)品中（比如有OLED屏幕的設備上）击孩，通過減少亮像素的使用節(jié)省電池壽命迫悠。

增強易用性

?關注一般的暗主題用戶（比如弱視的人），需要符合可用性色彩對比標準巩梢。

特性

材料設計中的暗主題是通過以下特性定義的：

對比度：暗表面和100%白色的主體文本的對比度至少為15.8:1

深度：對于更高的視覺層級创泄，組件通過展示更亮的表面顏色表現(xiàn)深度。

低飽和度：主色是低飽和度的括蝠，那么它們在所有的層級中都可以通過網(wǎng)頁內容可用性指南（WCAG）AA 標準中最小的4.5:1（當和主體文本一起使用時）比例鞠抑。

有限的色彩：大量的表面使用暗表面顏色，同時使用有限的強調色（亮的忌警、低飽和度的顏色或者明亮的搁拙，高飽和和度顏色）

剖析

暗主題界面使用暗表面主導，使用稀少的強調色法绵。它們發(fā)出少量的光同時保持高標準的可用性箕速。

背景（0dp 層級的表面）

表面（1dp 層級的表面）

主色

輔助色

在背景上的顏色

在表面上的顏色

在主色傷的顏色

在輔助色上的顏色

行為

暗主題可以通過顯示出來的按鈕去打開或關閉

優(yōu)先的，通過圖標按鈕的切換去控制主題的關閉

較低優(yōu)先級的朋譬，通過在菜單或設置中的切換控制

在頂部應用欄中的主題切換

在更多菜單中的暗主題切換

在一個應用設置中的暗主題切換

屬性

暗主題使用暗灰色盐茎，而不是黑色，作為組件中主要的表面顏色徙赢。暗灰色可以表現(xiàn)出更廣闊的色彩字柠、層級和深度，因為在灰色（而不是黑色）上更容易看到陰影狡赐。

暗灰色還能減少眼睛疲勞窑业，因為在暗灰色表面上的亮文字比在黑表面上的亮文字有更弱的對比度。

建議使用的暗主題表面色是#121212

層級

在暗主題中枕屉，組件保持在亮主題中一樣默認的層級常柄。然而，在暗主題中搀庶，不同層級的表面是通過不同的方式表現(xiàn)出來拐纱。

更高的層級，更亮的表面

越高層級的表面（距離虛擬的光源更近）哥倔，表面就越亮。亮度是通過應用半透明的白色覆蓋物表現(xiàn)出來的揍庄。

ligter.mp4

當表面提升高度時咆蒿，它的顏色變得更亮

一個表面通過應用半透明的白色覆蓋物變得更亮

1.表面

2.層級覆蓋物

表面上的覆蓋物也使組件之間的層級更容易區(qū)分，且更容易看到陰影。覆蓋物增加了表面和它們陰影之間的對比沃测，讓每個表面的邊界更加明顯缭黔。

overlay.mp4

默認的主題使用陰影表現(xiàn)層級，同時暗主題通過調整表面的顏色表現(xiàn)層級

這些表面的值被設計得最大化可讀性蒂破，同時保證了不同的層級之間是分得清的

覆蓋物透明度范圍從最低的0%到最高的16%層級

覆蓋物表明了組件間的層級不同

A.在1dp層級的卡片使用5%的覆蓋物

B.在6dp層級的浮動按鈕使用輔助色而沒有覆蓋物

C.在8dp層級的底部按鈕使用12%的覆蓋物

使用主色或輔助色的組件不使用層級覆蓋物馏谨。在暗主題里，陰影還是暗的附迷，以準確的表達出投影惧互。

避免在主色和輔色的組件上使用層級覆蓋物

不要使用發(fā)光在陰影中表現(xiàn)層級，因為它們不能像投影那樣準確的表達出層級喇伯。

易用性和對比度

暗主題的表面必須足夠暗以展示白色文本喊儡。它們必須在文本和背景之間使用最少的對比15.8:1層級。這樣能夠保證當在最高層級上運用主題文本時稻据，文本能夠通過WCAG's AA標準的4.5:1.

得到品牌的暗表面艾猜，把品牌主色的透明度降到最低，放到建議的暗主題表面色（#121212）上面捻悯。顏色（#1F1B24）就是結合8%的主色和暗主題表面色#121212的結果匆赃。

如果背景顏色沒有足夠暗以符合白色文本和表面的15.8:1最低對比層級，那么文本在最高層級的表面上就不能通過4.5:1的標準今缚。

確保背景顏色足夠暗算柳，那么主題文字在最高層級的表面上符合最低4.5:1（AA）對比。

需要電池使用效率的用戶界面可以使用真黑色荚斯。在這些情況下埠居，一些設備（比如使用OLED屏幕的穿戴設備）可以關閉任何顯示黑色的像素以節(jié)省電池能量。

oled.mp4

在OLED屏幕上事期，關閉或打開像素會在屏幕滾動時引起延遲滥壕，使像素變得模糊。

界面應用

主題顏色

所有暗主題顏色應該使用足夠的對比度去顯示元素兽泣，對于主體文本當應用到所有層級表面時绎橘，通過WCAG's AA 標準最低4.5:1。

低飽和度顏色提高易用性

暗主題應該避免使用高飽和度的顏色唠倦，因為它們不能通過WCAG's AA標準 最低的4.5:1,對于主體文本在暗表面上称鳞。飽和的顏色在暗背景上也能產(chǎn)生視覺的顫動，從而引起眼睛的疲勞稠鼻。

相反的冈止，低飽和度的顏色能作為更易讀的替代被使用。

你色盤上的低飽和度的顏色可以提升可讀性候齿，減少視覺顫動熙暴。

避免使用在暗主題上引起視覺顫動的高飽和度顏色

主要顏色

主要顏色是在你的應用屏幕和組件上出現(xiàn)最頻繁的顏色闺属。材料設計的基準暗主題使用200色調作為主色（在所有的層級表面上，對于文本都能通過WCAG's AA標準周霉，最低4.5:1）掂器。

暗主題中的一個主色版樣例

1.主色指示器

2.色調系列

主色變體

有亮表面的組件能顯示你暗主題主色的變體。

這個暗主題界面使用了主色（紫色 200）和主色變體（紫色 700）

輔助色

輔助色能夠用來強調你的界面中選中的部分俱箱。在暗主題中国瓮，輔助色可以降低飽和度以符合 4.5:1 對比層級。

在暗主題中一個輔助色板樣例

1.輔助色指示器

2.色調系列

這個界面使用了主色和輔助色的變體

強調色

在暗主題中狞谱，暗表面占據(jù)界面的主要部分乃摹。強調色一般都是亮色（低飽和 淡雅的）或者是明亮（飽和的，鮮艷的顏色）以幫助突出元素芋簿。它們應該被謹慎使用以突出關鍵元素峡懈，比如文本或者按鈕。

找出強調色

色板生成器可以用來生成一個顏色主題与斤。它還能生成色調板肪康，那是一系列從亮到暗的顏色變體，通過你的主色或者輔助色生成的撩穿。你可以為你的暗主題選擇這些變體磷支。

為了在暗主題中更加靈活和可用，推薦使用亮色調（200—50）食寡。而不是默認的顏色主題（范圍在 900-500 的飽和顏色）

1.默認主題的主色指示器

2.暗主題的主色指示器

亮色調（在200—50范圍內的顏色）在暗主題表面（所有層級）上有更好的可讀性雾狈。

避免在暗主題中使用飽和顏色，因為它們在暗表面上會引起視覺顫動抵皱。

默認主題中在頂部應用欄中使用顏色

在暗主題中善榛，頂部應用欄中使用暗色而不是主色或者輔助色

品牌色

為了保持品牌識別度，原有飽和度的品牌色可以在暗主題中使用呻畸，雖然被應用到有限的一到兩個關鍵品牌元素移盆，比如標志或著品牌按鈕。通過謹慎地使用品牌色伤为，元素在層級中保持了優(yōu)先級咒循。

原有飽和度的品牌色被應用到懸浮操作按鈕上，同時低飽和度的暗主題主色被應用到文本上绞愚。

1.暗主題主色

2.品牌色

暗主題基礎色板

材料設計的基準主題包含了暗主題的色調板叙甸。暗主題顏色應該被運用到暗主題界面上，包括：

顏色（主色位衩、輔助色和主色變體）

表面（背景和組件）

狀態(tài)（比如錯誤狀態(tài)）

內容（字體和圖標）

暗主題基準材料色板

1.材料設計基準默認主題

2.材料設計基準暗主題

錯誤色

錯誤色被用來表明錯誤狀態(tài)裆蒸。材料基準暗主題錯誤色是#CF6679

暗主題顏色是通過把亮主題的錯誤色（#B000020）和40%白色覆蓋使它變亮得到的，使它能通過AA級別的對比標準糖驴。

字體和圖標顏色

上面的顏色

上面的顏色（'On' colors ）主要是運用在主要表面上的文本光戈、圖標和描邊上哪痰，使用主色遂赠、輔助色久妆、表面色、背景色跷睦、或者錯誤色筷弦。

默認的，暗主題的“上面的顏色”一般是白色和黑色抑诸。

界面展示了暗主題的文字和圖標的基準顏色

在暗背景上的亮色文本

當亮的文本顯示在暗背景上（這里展示的是白色在黑色上）時烂琴，它需要使用如下的透明度等級：

高優(yōu)先級文本使用87%的透明度

中等優(yōu)先級文本和提示文本使用60%的透明度

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

高優(yōu)先級、中等優(yōu)先級和失效文本

習慣應用

材料設計中的有些場景可以從使用選擇暗主題元素中獲益

大的表面

使用一大塊屏幕的組件蜕乡，比如應用欄和背景幕奸绷，可以在它們的組件上使用暗主題。

為小的表面保留亮色

不要在大的表面上使用亮色层玲，因為它們發(fā)出太多的光亮

如果一個暗色比推薦的表面色（#121212）更好号醉，確保它們能通過15.8:1的對比度

避免在背景幕上使用暗主題的主色，因為它會在屏幕的大塊地方覆蓋上亮色

結合亮主題和暗主題

當在暗主題中使用亮表面時辛块，亮色可以用在選擇組件的表面上以保持優(yōu)先級畔派。

比如，暗主題中的提示條可以顯示亮表面以突出它润绵。做到這一點线椰，它可以運用亮主題的表面和表面上的顏色。

提示條在暗主題中使用亮表面幫助它突出

1.在表面上

2.表面

3.主色變體

狀態(tài)

狀態(tài)通過覆蓋物的運用視覺地傳達出組件或可交互的元素所在的狀態(tài)尘盼。在暗主題中憨愉，狀態(tài)使用它們在默認主題（亮主題）中一樣的覆蓋值，并且調整它們以通過AA等級的對比度標準

有兩種類型的容器使用狀態(tài)覆蓋物：使用“表面”顏色的容器和使用“主”色的容器

表面容器

表面容器使用的顏色應該和它的圖標和文本標簽（如果沒有圖標）相匹配

激活的卿捎、移入的配紫、焦點的、按下的和拖拽的容器狀態(tài)使用表面顏色

激活的娇澎、移入的笨蚁、焦點的、按下的和拖拽的容器使用表面顏色和內容的主色

主色的容器

對于使用主色的表面容器趟庄，它們的狀態(tài)覆蓋物是白色

激活的括细、移入的、焦點的戚啥、按下的和拖拽的容器使用半透明的主色

激活的奋单、移入的、焦點的猫十、按下的和拖拽的容器使用半透明的主色

失效的狀態(tài)

所有失效的組件在容器邊框和填充上使用12%的白色览濒，在文本標簽和圖標等內容上使用38%的白色

1.帶邊框的容器：12%的白色

2.標簽/圖標：38%的白色

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