以下是一些適合您文章內容的基於問題的標題： * 如何控制網站主題：覆蓋「prefers-color-scheme」以獲得終極靈活性 * 超越「偏好配色」：Cus

覆蓋CSS的prefers-color-scheme設定：一個全面的解決方案

主要作業系統中深色模式的出現使得有中深色模式的出現使得有必要實施網站的可自訂主題。但是，原生@media（prefers-color-scheme：dark）CSS規則可能不會總是與使用者偏好或瀏覽器支援保持一致。

引入CSS變數與主題

為了克服這個限制，我們可以利用CSS變數與主題：

• 在根元素中定義預設變數。
• 建立一個單獨的主題（例如，「黑暗」）並修改變數。
• 在 CSS 樣式中，引用變數而不是硬編碼顏色。

這種方法提供了動態應用主題的一致方法。

用於偵測和切換的JavaScript

偵測使用者首選或覆蓋的主題，以及允許使用者在主題之間切換：

• 使用JavaScript 來檢查data-theme 屬性、本機儲存或@media 查詢來確定目前主題。
• 實作一個函數來切換主題並設定本地儲存變數以在頁面重新載入時保留使用者的首選項。
• 將事件偵聽器新增至複選框元素以啟用使用者切換。

用於切換的 HTML

在 HTML 中包含一個簡單的複選框以允許使用者按需切換主題。

此解決方案的優點

這種綜合方法具有以下幾個優點：

• 基於作業系統設定的自動主題檢測.
• 使用者控制的系統主題覆蓋。
• 透過 CSS 變數實現跨瀏覽器的一致性。
• 頁面載入之間使用者首選項的持久性。

以上是以下是一些適合您文章內容的基於問題的標題： * 如何控制網站主題：覆蓋「prefers-color-scheme」以獲得終極靈活性 * 超越「偏好配色」：Cus的詳細內容。更多資訊請關注PHP中文網其他相關文章！