Google I/O2019大會推出深色主題，查閱了相關(guān)內(nèi)容進行翻譯，本文是自己翻譯的第一篇文章，如有不妥請大家根據(jù)官網(wǎng)鏈接進行比對。
深色主題
深色主題是一個弱光用戶界面，主要顯示深色外觀
用法
深色主題在用戶界面的大部分區(qū)域顯示深色表面；它被設(shè)計為默認(或淺色)主題的補充模式。
深色主題降低了設(shè)備屏幕發(fā)出的亮度，同時仍然滿足最低色彩對比度。 它們通過減輕眼睛疲勞，根據(jù)當(dāng)前的照明條件調(diào)整亮度，以及在黑暗環(huán)境中方便屏幕使用，從而改善視覺人體工程學(xué)—— 同時節(jié)省電池電量。 具有OLED屏幕的設(shè)備可以在一天中的任何時間關(guān)閉黑色像素 。
原則
灰色變暗
使用深灰色（而不是黑色）來表達更廣泛深度環(huán)境中的高度和空間。
顏色與重點
在深色主題?的用戶界面中應(yīng)用有限的點綴色,?因此大部分空間專用于深色外觀。?
節(jié)約能源
在需要效率的產(chǎn)品中（例如帶有OLED屏幕的設(shè)備），通過減少使用淺色像素來節(jié)省電池壽命。
增強可訪問性
通過滿足可訪問性顏色對比標(biāo)準(zhǔn)，適應(yīng)常規(guī)的深色主題用戶（例如視力不佳的用戶）
解剖
深色主題用戶界面主要使用深色外觀，少量點綴色。 它們發(fā)出的光線很少，同時保持高標(biāo)準(zhǔn)的可用性。
1.背景（高度為0dp表面疊加）
2.表面（高度為1dp表面疊加）
3.主色
4.輔助色
5.在背景上的用色
6.在表面上的用色
7.在主色上的用色
8.在輔助顏色上的用色
行為
可以使用顯示的控件打開（或關(guān)閉）深色主題：
顯著的操作，使用圖標(biāo)切換打開或關(guān)閉主題
顯著性降低的操作，在菜單或應(yīng)用程序設(shè)置中放置一個切換
高度
在深色主題中，組件保留與淺色主題中的組件相同的默認高度層和陰影。 然而在深色主題中，不同高度層的表面亮度不同。
高度越高，表面越亮
表面高度越高（越接近隱含光源），表面越亮。 通過應(yīng)用半透明白色疊加層來表達這種亮度。
通過應(yīng)用半透明白色疊加層，表面變得更亮。
1.表面
2.高度疊加層
表面上的疊加層還可以更輕松地區(qū)分組件之間的高度并查看陰影。 疊加層增加了表面與陰影之間的對比度，使每個表面的邊緣更加明顯。
默認主題使用陰影來表示高度，而深色主題也通過調(diào)整表面顏色來表示高度。
表面疊加層旨在最大限度地提高易讀性，同時確保不同的高度層彼此可辨別。
疊加層闡明了組件之間的高度差異。
A.高度為1dp的卡片，疊加透明度為5%
B. 高度為6dp的懸浮按鈕，使用不帶疊加層的輔助色
C.高度為8dp的底部應(yīng)用欄，疊加透明度為12%
高度疊加層不應(yīng)用于使用主色或輔助顏色的組件表面。
在深色主題中，陰影仍使用黑色以準(zhǔn)確地表示投影。
深色主題表面必須足夠暗以顯示白色文本。 文本和背景之間的對比度應(yīng)至少為15.8:1。?這確保了當(dāng)應(yīng)用于最高（和最亮）高度的表面時，正文文本通過至少4.5:1的WCAG AA標(biāo)準(zhǔn)。
創(chuàng)建帶有品牌的深色表面，請在推薦的深色主題表面顏色（＃121212）上疊加低不透明度主要品牌顏色。 顏色＃1F1B24是深色主題表面顏色＃121212和8％主要品牌顏色組合的結(jié)果。
如果背景顏色不夠深，無法在白色文本和表面之間達到至少15.8：1的對比度，則最高（和最亮）高度表面的文本將無法通過4.5：1標(biāo)準(zhǔn)。
確保背景顏色足夠深，以使正文在最高的表面（24dp）上達到至少4.5：1（AA）的對比度。
確保背景顏色足夠深，以使正文在最高的表面（24dp）上達到至少4.5：1（AA）的對比度。
需要高效使用電池的用戶界面可以使用真正的黑色。 在這些情況下，某些設(shè)備（例如帶有OLED屏幕的可穿戴設(shè)備）可以關(guān)閉任何顯示黑色的像素以節(jié)省電池電量。
在OLED屏幕上，打開和關(guān)閉像素會導(dǎo)致屏幕滾動時出現(xiàn)延遲，從而使像素模糊。
用戶界面應(yīng)用
主題顏色
所有深色主題顏色應(yīng)顯示具有足夠?qū)Ρ榷鹊脑兀?dāng)應(yīng)用于所有高度表面時，應(yīng)通過WCAG的AA標(biāo)準(zhǔn)正文文本對比度至少為4.5:1。
不飽和色的可訪問性
深色主題應(yīng)避免使用飽和顏色，因為它們不符合WCAG針對深色表面的正文文本至少4.5:1的可訪問性標(biāo)準(zhǔn)。飽和的顏色在黑暗的背景下也會產(chǎn)生視覺振動，這會導(dǎo)致眼睛疲勞。相反，不飽和的顏色可以作為更清晰的選擇。
調(diào)色板中低飽和顏色可提高易讀性并減少視覺振動。
主色
主色是應(yīng)用程序界面和組件中顯示頻率最高的顏色?；A(chǔ) Material Design深色主題使用200色調(diào)的主色（在所有高度表面，通過WCAG的AA標(biāo)準(zhǔn)至少4.5:1的正常文本）。
深色主題中的主色調(diào)色板示例
1.主色
2.色調(diào)變體
主色變體
淺色外觀的組件可以顯示你的深色主題的主色的變體。
深色主題用戶界面使用主色（紫色200）和主色變體色（紫色700）
輔助色
輔助色可用于強調(diào)用戶界面的重要部分。在深色主題中，輔助色去飽和以達到4.5:1的對比度。
深色主題中的輔助色調(diào)色板示例
1.輔助色
2.輔助色變體
強調(diào)色
在深色主題中，深色表面占據(jù)了UI的大部分。強調(diào)色通常是淺色（不飽和柔和色）或明亮（飽和，鮮艷的色彩），以幫助重要元素脫穎而出。應(yīng)謹慎使用它們來強調(diào)關(guān)鍵元素，例如文本或按鈕。
尋找強調(diào)色?
調(diào)色板生成器可用于創(chuàng)建（或查看）顏色主題。 它還可以生成色調(diào)調(diào)色板，這是從主色和輔助色創(chuàng)建的一系列淺到深顏色變化。 您可以為黑暗主題選擇這些變化顏色。
為了在深色主題中提供更多靈活性和可用性，建議在深色主題中使用較淺色調(diào)（200-50），而不是默認顏色主題（飽和色調(diào)范圍為900-500）。
1.默認主題主色
2.深色主題主色
默認主題頂部應(yīng)用欄使用主色同色系。
在深色主題中，頂部應(yīng)用程序欄的表面使用深色，而不是主色或輔助色。
品牌色
為了保持品牌調(diào)性，可以在深色主題中使用飽和的品牌色，但應(yīng)用應(yīng)限于一個或兩個品牌元素，如徽標(biāo)或品牌按鈕。通過謹慎使用品牌色，讓元素在層次結(jié)構(gòu)中保持突出。
深色主題用戶界面的其余部分仍應(yīng)使用不飽和的顏色。
完全飽和的品牌色應(yīng)用于浮動操作按鈕（2），而不飽和的深色主題主色應(yīng)用于文本（1）。
1.深色主題主色
2.品牌色
深色主題基礎(chǔ)調(diào)色板
Material Design基礎(chǔ)主題包括深色主題的色調(diào)調(diào)色板。
深色主題顏色在深色主題用戶界面中使用，包括：
顏色（主要、輔助色和主色的變體）
表面（背景和組件）
狀態(tài)（如錯誤狀態(tài)）
內(nèi)容（排版和圖像）
1. Material Design默認主題
2. Material Design深色主題
錯誤顏色
錯誤顏色用于顯示錯誤狀態(tài)。Material Design基礎(chǔ)深色主題題錯誤顏色為#CF6679。
此深色主題顏色是通過采用淺色主題錯誤顏色（＃B00020）并使用40％白色覆蓋物照亮它來創(chuàng)建的，以通過AA級對比度標(biāo)準(zhǔn)。
深色背景上的淺色文本
當(dāng)淺色文本出現(xiàn)在深色背景上（黑底白字）時，應(yīng)使用以下不透明度級別：
高強調(diào)文本的不透明度為87％
中強調(diào)和提示文字的不透明度為60％
禁用文字的不透明度為38％
高強調(diào)，中強調(diào)和禁用文本
狀態(tài)
狀態(tài)在視覺上通過使用疊加層來傳達組件或交互元件的狀態(tài)
在深色主題中，狀態(tài)應(yīng)使用與其默認（或淺色）主題相同的疊加值，并且可以調(diào)整它們以通過AA級對比度標(biāo)準(zhǔn)。
有兩種類型的容器可以繼承狀態(tài)疊加：使用“表面”顏色（#121212）和“主要”顏色的容器。
使用表面顏色的容器
使用表面顏色的容器應(yīng)該應(yīng)用與其圖標(biāo)或文本標(biāo)簽的顏色（如果不存在圖標(biāo)）匹配的疊加層。
使用主要顏色的容器
對于使用“主要”顏色的表面容器，其狀態(tài)疊加層為白色。
禁用狀態(tài)
所有禁用的組件在容器輪廓和填充中使用12%的白色，在標(biāo)簽或圖標(biāo)等內(nèi)容中使用38%的白色。
1.容器輪廓：12%白色
2.標(biāo)簽/圖標(biāo)：38%白色
3.容器填充：12%白色
