深色模式（也有人叫暗黑模式）確實不是人機界面領域的新概念了。曾幾何時，綠色字符呈現在漆黑屏幕上的模式就是我們所擁有的全部。如今的屏幕色彩越來越豐富，但深色模式依然存在，到底為什麽呢？
從使用場景上來說，深色模式是區別於夜間模式的；
深色模式對淺色主題的壹種場景化補充，是滿足用戶日間的使用需求，讓使用者更加專註自己的操作任務，帶來視覺沈浸感；所以深色模式在信息內容的表達上會更註重視覺性；
同時，設置深色模式，會降低設備屏幕發出的亮度，目前的中高端手機大多采用OLED屏幕，這壹材質自發光的特性使得屏幕能夠獨立控制單個像素是否發光，深色主題會降低設備屏幕發出的亮度，同時仍能滿足最低色彩對比度。
而傳統的夜間模式更註重於弱光場景下的體驗。是從用戶的健康角度出發考慮的，當用戶舒服的躺在被窩裏，或關燈玩手機時，通過降低屏幕亮度和對比度，不會過於刺眼，以達到幫助保護眼睛的效果。夜間模式在亮光環境使用時很可能並不保證所有信息都具有可讀性。
優點壹：提升視覺沈浸感； 讓使用者更加專註自己的操作和界面內容。
優點二：減少屏幕明度； 縮小屏幕顯示內容與環境光強度的差距，減少眼睛的負擔。
優點三：降低耗電量； 根據谷歌官方數據來看，采用OLED屏幕的手機在「深色模式」下，耗電量可以大幅度下降。
優點四：營造高端感； 深色模式給人以高級、神秘的語義象征，相比於淺色模式，深色模式藏著更多可能性。
1. 灰色而不是黑色
使用深灰色而不是黑色來表示具有更寬深度範圍的環境中的高度與空間。(解釋：由於深色主題中無法像常規MD設計中使用陰影，因此使用不同亮度的灰色來表示Z軸的空間關系，不以純黑色作為大範圍使用的底色可以提供更寬的色域來體現Z軸深度關系)
簡單說下Z軸概念：
壹般來說，在平面的界面中想要表現出立體感和深度，我們會通過物體陰影或者透視關系來表現。在 Material Design 中，Z 軸概念的引入則可以輕松解決這個問題。下圖中，組件在 Z 軸處於不同的高度，間接影響著陰影的表現。
那麽引入 Z 軸難道只是為了畫個陰影？當然不是的！更重要的還是用於表現出 UI 組件的次序及重要程度。下圖中 Card View 在 Z 軸上低於 App bar，因為正常來說 Card View 上下滾動時是被遮擋在 App bar 之下的；而 FAB 處於最高的位置（8dp），因為它的重要程度是最高的，並且高於 App bar 上的 actions。
2. 顏色與強調
在深色主題中只用有限的顏色用來做強調，從而使大部分區域都使用深色。
3. 節約能源
在需要效率的產品（例如帶有 OLED 屏幕的設備）中，通過減少光像素的使用來延長電池壽命。
4. 增強可訪問性
通過滿足可訪問性顏色對比度標準來滿足常規深色模式用戶（例如弱視用戶）的需求。
對比度可以通過萬維網W3C進行顏色的對比檢查，也可以進行對比度的計算；
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
可能看起來有點混亂，但以上各層級是遵循MD的Z軸理論的，在深度上有區別，同時保證了內容的高對比度。概括下來即在轉變為深色模式的同時繼承了常規場景下的MD的Z軸原則(白色背景下通過陰影和顏色體現縱深)，同時還能保證了信息的獲取效率。
解釋： 黑色主題使用深灰色而不是黑色作為組件的主要表面顏色。深灰色表面可以表現出更廣泛的顏色、高度和深度，因為我們更容易看到灰色(而不是黑色)上的陰影。
深灰色表面還可以減少眼睛疲勞，因為深灰色表面上的淺色文字比黑色表面上的淺色文字具有更低的對比度。官方推薦的深色主題的表面顏色：#121212。
1. 海拔高度
在黑暗主題中，組件應當保留與較亮主題中的組件相同的默認高度級別和陰影，這需要通過表面的不同亮度來體現這種縱深高度的區別。
海拔越高表面越輕： 表面高度越高(越接近隱含光源)，表面越輕。通過應用半透明白色覆蓋層來表達這種輕盈，隨著表面變高，顏色變淺。深色主題表面是通過在組件表面上放置半透明覆蓋層來構建的，通過應用半透明白色覆蓋層，表面變得更亮，通過調整表面顏色來表達高度。
默認主題使用陰影來表達高度，而深色主題也通過調整表面顏色深淺來表達高度。
這些表面覆蓋值旨在最大限度地提高易讀性，同時確保不同的高度水平彼此可辨別。高度疊加透明度範圍從最低級別的0％到最高級別的16％。疊加層闡明了組件之間的高度差異。
2. 可訪問性與對比度
深色模式表面必須足夠暗以顯示白色文本。 文本和背景之間至少應該達到15.8:1的對比度級別。 這確保了當應用於最高(和最輕)高度的表面時，正文文本通過WCAG的AA標準至少能達到4.5:1。如果背景顏色不夠深，無法在白色文本和表面之間達到至少15.8:1的對比度，則最高(和最輕)高度表面的文本將無法通過4.5:1標準。
想要使用帶有品牌色的深色該怎麽應用呢？
要創建帶有品牌的深色背景，可以在推薦的深色主題背景顏色(＃121212)上疊加品牌顏色的透明度。下圖的案例中顏色＃1F1B24是組合深色模式的背景顏色＃121212和8％原色的結果。
1. 主題顏色
所有深色主題顏色都應顯示具有足夠對比度的元素，當應用於所有高度的層級表面時，WCAG的AA標準至少為4.5:1。 使用飽和度低的顏色，以提高可訪問性。
壹個黑暗的主題應該避免使用過度飽和的顏色，飽和顏色還會在深色背景下產生光學振動，這會引起眼睛疲勞。
相反，不飽和的顏色可以用作更清晰的替代品。避免使用下圖中這樣飽和度過高的顏色，會在深色背景下造成視覺震動。
2. 主色的選擇
主要顏色是應用程序屏幕和組件中最常顯示的顏色。基於Material Design深色主題的規範，請使用原色的200色調；
特殊情況： 具有淺表面的組件可以顯示暗主題的主要顏色的變體。如下圖中白色浮層上的文字鏈按鈕使用的700的深色。
https://material.io/design/color/the-color-system.html#tools-for-picking-colors
3. 輔助色的選擇
輔助顏色可用於突出UI的重要部分。在深色模式中，輔助色應該降低飽和度以滿足4.5:1的對比度水平。如下圖，紫色為主色，綠色為輔助色。
4. 強調色
在深色主題中，灰色界面占據了UI的大部分。強調色通常是淺色(不飽和柔和色)或明亮(飽和，鮮艷的色彩)，以幫助強調元素使其脫穎而出。應謹慎使用它們來強調關鍵元素，例如文本或按鈕。
為了在深色主題中提供更多靈活性和可用性，建議在深色主題中使用較淺色調(200-50)，而不是默認顏色主題(飽和色調範圍為900-500)。
5. 品牌顏色
為了保持品牌標識，品牌顏色可以在深色主題中以完全飽和度使用，但應用應限於壹個或兩個品牌元素，例如徽標或品牌按鈕。通過謹慎使用品牌顏色，使元素在層次結構中保持突出。
不飽和的顏色仍應在黑暗主題UI的其余部分中使用，如下圖：
6. 錯誤顏色
錯誤顏色用於指示 錯誤狀態 。對於谷歌規範中，深色模式錯誤顏色為＃CF6679。這種深色主題顏色是通過采用淺色主題錯誤顏色(＃B00020)並使用40％白色覆蓋物照亮它來創建的，該顏色通過了AA級對比度標準。
7. 文字顏色
深色背景下的文字顏色：
當淺色文本出現在深色背景上(此處顯示為黑色)時，應使用以下不透明度級別：
iOS引用了6中不同的灰度，在深色模式下，采用純黑色作為背景，用不同程度的灰色來承載頁面內容。
iOS通過背景、投影來表達層級關系。列表內容至於純黑色背景的上方，表明層級越高的內容，背景顏色就會越亮壹些；
1.不要簡單的將白變黑或者隨意減低亮度
通過背景顏色、卡片顏色、文字顏色來建立信息層級，讓內容更好的呈現出來。
2.不要使用純黑色背景和純白色文字
不要同時使用純黑色（#000000）和純白色（?ffffff）作為文本顏色。高強度對比會對用戶產生視覺疲勞。
3.註意UGC產品的顏色適配
在微信公眾號可以看到，部分在白色模式下很美觀的排版，但是在深色模式下，出現內容看不清的情況，在設計上給到用戶較好的選擇，盡量避免透明圖片的使用。
1.建立色彩規範
建立色彩規範，在在純黑色（#000000）背景中或者（#121212）背景中，加入20%的品牌色，然後通過調整HSB的B值，得到有序的系列背景色；
2.文字規範
在淺色模式下，我們大多數用過壹套很常規的標準文字色值：#333、#666、#999、#ccc，通過查看它們的HSB可以發現，分別對應的是（H0 S0 B20）、（H0 S0 B40）、（H0 S0 B60）、（H0 S0 B80），這些文字色值也是遵循20、40、60、80序列值做顏色層級，在深色模式下，我們也可以這樣做。