手機網頁自適應深色模式適配

近年來，主流操作系統紛紛強化深色模式的兼容性與用戶體驗優化，旨在提升用戶在低光環境下的視覺舒適度。在應用層面，眾多移動APP已響應系統級深色模式號召，甚至在應用商店政策引導下完成適配。這一趨勢延伸至移動網頁領域，如何實現網頁對系統淺色與深色模式的自適應切換，成為前端開發的重要課題。

實現網頁自適應深色模式的核心在于讀取系統主題狀態并應用對應樣式。W3C在《Media Queries Level 5》標準草案中新增的`prefers-color-scheme`媒體查詢屬性，為此提供了技術基礎。該屬性允許網頁通過條件規則精準獲取操作系統當前的主題模式（淺色或深色），并據此應用對應的樣式方案，從而實現“系統主題深色則頁面深色，系統主題淺色則頁面淺色”的智能適配效果。

`prefers-color-scheme`支持兩個核心值：`light`與`dark`。`light`值對應系統淺色主題，為默認狀態，即便在瀏覽器啟用隱私保護模式（如`privacy.resistFingerprinting`為`true`）時，該值仍作為默認返回；`dark`值則明確指示系統當前啟用深色主題。在CSS語法層面，該選擇器通過`@media`規則實現，核心結構為`@media (prefers-color-scheme: ) { ... }`，其中`mode`可取值為`light`（淺色模式）或`dark`（深色模式），開發者可在規則塊內編寫對應主題的樣式代碼。例如，針對淺色模式可定義：`@media (prefers-color-scheme: light) { body { background-color: #FFFFFF; color: #000000; } }`，深色模式則對應：`@media (prefers-color-scheme: dark) { body { background-color: #000000; color: #FFFFFF; } }`。

為實現主題樣式的靈活管理與動態切換，CSS變量（又稱自定義屬性）成為關鍵工具。其聲明需以雙連字符（`--`）前綴變量名，如`--primary-color`，變量名對大小寫敏感；讀取時通過`var()`函數實現，如`var(--primary-color, #000000)`，其中第二個參數為可選默認值，確保變量未定義時提供回退方案。改造現有網頁時，建議將主題色值抽離為CSS變量，定義淺色與深色兩套變量集。淺色主題下：`:root { --bg-color: #FFFFFF; --text-color: #000000; --border-color: #E5E5E5; }`；深色主題下，通過`@media (prefers-color-scheme: dark)`觸發變量重定義：`:root { --bg-color: #121212; --text-color: #FFFFFF; --border-color: #333333; }`。如此，當用戶系統切換主題時，頁面樣式將自動同步更新。

若需更復雜的交互邏輯（如記錄用戶偏好、動態調整頁面布局），可結合JavaScript的`window.matchMedia()`方法。該方法返回`MediaQueryList`對象，通過其`matches`屬性可實時獲取系統主題狀態，例如：`if (window.matchMedia('(prefers-color-scheme: dark)').matches) { document.body.classList.add('dark-theme'); } else { document.body.classList.remove('dark-theme'); }`。此方案適用于需要JavaScript參與的主題切換場景，與CSS方案形成互補。

綜上，通過CSS的`prefers-color-scheme`媒體查詢與CSS變量協同，輔以JavaScript的條件判斷，可高效實現移動網頁對系統深色與淺色模式的自適應適配，顯著提升用戶在不同光照環境下的瀏覽體驗。