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