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