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