咱們先從一個生活中的場景說起。晚上關(guān)了燈，你躺在床上打開手機，如果屏幕突然跳出一個純白的界面，那感覺就像有人拿手電筒直接照你眼睛，非常刺眼。深色模式就是為了解決這個問題而生的。
它通過降低屏幕亮度、減少白色元素、采用深色背景來達到幾個目的：
減少眼睛疲勞：在低光環(huán)境下，深色背景能有效降低屏幕發(fā)出的光強，讓眼睛更舒服。
延長電池續(xù)航：對于OLED或AMOLED屏幕的手機，顯示黑色像素時幾乎不耗電。
提升視覺層次：好的深色設(shè)計能讓內(nèi)容更突出，操作更聚焦。
符合用戶習慣：現(xiàn)在主流操作系統(tǒng)都支持系統(tǒng)級深色模式，用戶已經(jīng)養(yǎng)成了使用習慣。
簡單來說，如果你的小程序不支持深色模式，當用戶手機切換到深色主題時，你的小程序就可能變成一個“光污染源”，體驗會很糟糕。
開發(fā)深色模式不是簡單地把白色變成黑色就完事了，它更像是在給你的小程序準備“兩套衣服”——一套適合白天穿（淺色主題），一套適合晚上穿（深色主題）。系統(tǒng)會根據(jù)用戶手機的設(shè)置，自動幫你“換衣服”。
小程序框架提供了獲取系統(tǒng)主題設(shè)置的能力。核心步驟是：
監(jiān)聽系統(tǒng)變化：你可以設(shè)置小程序監(jiān)聽手機系統(tǒng)的主題變化。當用戶在手機設(shè)置里把外觀從“淺色”切換到“深色”時，你的小程序能立刻知道這個變化。
應用對應的樣式：知道了當前該穿哪套“衣服”后，就要把對應的顏色樣式應用到界面上。
提供手動開關(guān)（可選但推薦）：除了跟隨系統(tǒng)，最好在設(shè)置里給用戶一個手動選擇“始終淺色/始終深色/跟隨系統(tǒng)”的選項，把控制權(quán)交給用戶。
雖然開發(fā)原理相通，但在實際設(shè)計中，我們需要考慮不同操作系統(tǒng)的設(shè)計規(guī)范，讓用戶感覺你的小程序是“原生”的，而不是別扭的“外來客”。
不要純黑（#000000）：在深色背景下使用純黑作為大面積背景，反而會與明亮的文字和元素形成過強對比，造成視覺疲勞。建議使用深灰色，比如?#121212?或?#1E1E1E，它們能提供更好的視覺深度和層次感。
調(diào)整顏色對比度：確保文本、圖標與背景的對比度足夠高，讓用戶能輕松閱讀。但也要避免“黑白分明”的極端對比。淺色文字在深灰背景上，通常比白色背景上需要稍微降低一點不透明度（例如，將純白文字從100%不透明度降到87%或60%），看起來會更柔和。
重新審視所有顏色：淺色主題下好看的顏色，直接搬到深色主題下可能會變得刺眼或難以辨認。特別是品牌色、按鈕顏色、警示色等，需要為深色模式準備一個“降噪”版本。比如，把亮藍色調(diào)整為飽和度稍低的藍色。
注意圖片和媒體：
背景透明的圖標：要準備兩套顏色，淺色下用深色圖標，深色下用淺色圖標。
帶背景的圖片：如果圖片本身是淺色背景，在深色模式下會非常突兀。可以考慮給圖片添加一個深色的半透明遮罩層，或者當檢測到深色模式時，替換為深色背景版本的圖片。
視頻：確保播放器的控件顏色也能適配深色。
利用“層次”和“高程”：通過微妙的亮度差異來表現(xiàn)界面元素的層次關(guān)系。比如，卡片的背景可以是?#1E1E1E，而頁面背景用?#121212，這樣卡片就像“浮”在頁面上一樣。
系統(tǒng)A（以扁平、鮮明為特點的系統(tǒng)）的設(shè)計建議：
色彩體系：該系統(tǒng)在深色模式下偏好使用有輕微色彩傾向的灰色作為背景，而不是中性灰。它的材料設(shè)計規(guī)范非常成熟，建議直接參考其推薦的深色主題色板，例如將表面色（Surface）和背景色（Background）區(qū)分開。
組件樣式：注意該系統(tǒng)深色模式下按鈕、輸入框等組件的默認樣式。如果小程序使用了自定義組件，應盡量在視覺邏輯上與其原生組件保持一致，例如輸入框的邊框顏色、激活狀態(tài)等。
圖標與語義：該系統(tǒng)有一套清晰的語義化顏色系統(tǒng)（如成功用綠色，警告用黃色，錯誤用紅色）。在深色模式下，這些語義色需要調(diào)整亮度或飽和度以確保可訪問性，但語義本身不能變。
系統(tǒng)B（以圓潤、動態(tài)為特點的系統(tǒng)）的設(shè)計建議：
模糊與透明度：該系統(tǒng)在深色模式下非常善于利用毛玻璃（背景模糊）效果和透明度來構(gòu)建層次。在設(shè)計頂部導航欄、底部標簽欄或模態(tài)窗口時，可以考慮使用半透明背景加模糊的效果，這能讓界面看起來更現(xiàn)代、更融入系統(tǒng)。
鮮艷色彩的點綴：該系統(tǒng)鼓勵在深色背景下使用更鮮艷、飽和度更高的顏色作為強調(diào)色。你的品牌色如果比較鮮艷，在這里可以更大膽地使用。
動態(tài)效果：注意該系統(tǒng)深色模式下動畫和轉(zhuǎn)場的流暢性。確保你的小程序在主題切換時（如果有過渡動畫）以及頁面跳轉(zhuǎn)時的體驗是順滑的。
核心要點：不要重新發(fā)明輪子。多打開你手機系統(tǒng)自帶的應用（如設(shè)置、日歷、郵件），在深色模式下仔細觀察它們是怎么處理顏色、間距、陰影（或模糊）的。讓你的小程序向系統(tǒng)原生應用的觀感靠攏，是提升用戶體驗最有效的捷徑。
規(guī)劃與定義顏色變量：
不要在任何樣式里直接寫?color: #333333;?這樣的“硬編碼”。
在全局樣式文件（如?app.wxss）或使用 CSS 變量，定義兩套顏色主題變量。
例如：
css
/*?淺色主題變量?*/:root?{
??--bg-color:?#FFFFFF;
??--text-primary:?#212121;
??--brand-color:?#007AFF;}/*?深色主題變量?*/:root[data-theme='dark']?{
??--bg-color:?#121212;
??--text-primary:?rgba(255,?255,?255,?0.87);
??--brand-color:?#5AC8FA;?/*?調(diào)整為更適合深色的品牌色?*/}
然后在所有樣式規(guī)則中，使用這些變量：color: var(--text-primary); background: var(--bg-color);
獲取并應用系統(tǒng)主題：
在小程序入口文件（app.js）的?onLaunch?或?onShow?生命周期中，使用小程序API獲取系統(tǒng)當前的主題設(shè)置。
根據(jù)獲取到的主題值（如?'dark'?或?'light'），通過?wx.setStorageSync?存儲，并通過修改頁面的?data-theme?屬性或動態(tài)添加類名的方式，將主題狀態(tài)應用到整個小程序。
監(jiān)聽系統(tǒng)變化：
使用小程序API監(jiān)聽系統(tǒng)主題變化事件。一旦用戶切換了系統(tǒng)主題，這個事件會被觸發(fā)，你需要在回調(diào)函數(shù)里更新小程序內(nèi)部存儲的主題狀態(tài)，并重新應用樣式。
逐頁面檢查與適配：
開啟手機的系統(tǒng)深色模式，從首頁開始，一頁一頁地瀏覽你的小程序。
檢查所有文字是否清晰可見。
檢查所有按鈕、圖標、邊框、陰影是否協(xié)調(diào)。
檢查所有自定義的圖片、背景圖是否合適。
將發(fā)現(xiàn)的問題記錄下來，并回到第1步，調(diào)整你的顏色變量或特定頁面的樣式。
測試與反饋：
在不同型號、不同操作系統(tǒng)的手機上進行真機測試。
特別注意在弱光環(huán)境下的實際觀感。
如果可能，收集少量用戶的反饋，看是否有刺眼、看不清的地方。
開發(fā)深色模式，本質(zhì)是從“如何把界面做亮”的思路，切換到“如何在低亮度下讓信息清晰又舒適”的思路。它不是一個可有無可的炫技功能，而是現(xiàn)代應用基礎(chǔ)體驗的一部分。
記住最核心的三點：
顏色用變量，別寫死：這是實現(xiàn)可切換主題的技術(shù)基礎(chǔ)。
向系統(tǒng)設(shè)計看齊：遵循用戶所在操作系統(tǒng)的設(shè)計語言，能讓你的小程序感覺更“原生”、更高級。
為舒適而設(shè)計，不為黑暗而設(shè)計：目標是減少視覺壓力，提升可讀性，創(chuàng)造一種寧靜、專注的瀏覽體驗。
做好深色模式，就像是為你小程序的用戶準備了一副舒適的“夜間眼鏡”。當別人家的應用在夜晚還散發(fā)著刺眼白光時，你的應用已經(jīng)體貼地調(diào)低了亮度，用戶自然會覺得更貼心、更專業(yè)，也更愿意在夜間打開它。這個過程需要耐心和細心，但這份投入對于提升用戶體驗來說，絕對是值得的。
聯(lián)系電話