手機網頁自適應深色模式適配
1. 使用媒體查詢 在CSS中,可以使用@media查詢來檢測瀏覽器的顏色模式,并在需要的情況下應用不同的樣式。例如,以下代碼段在日間模式下將文本顏色設置為黑色,在深色模式下將文本顏色設置為白色: @media (prefers-color-scheme: light) { body { color: black; } } @media (prefers-color-scheme: dark) { body { color: white; } } 在此示例中,我們使用prefers-color-scheme媒體查詢,它檢測瀏覽器的默認顏色方案,并根據需要應用樣式。 2. 使用CSS變量 另一種方法是使用CSS變量來管理顏色,然后在媒體查詢中更改變量的值。在元素中定義CSS變量: :root { --text-color: black; } 在CSS樣式中,直接使用變量: p { color: var(--text-color); } 然后,可以在媒體查詢中更改變量值: @media (prefers-color-scheme: dark) { :root { --text-color: white; } } 這意味著在深色模式下,--text-color變量將指向白色而不是黑色。 3. 使用JavaScript 使用JavaScript,可以檢測瀏覽器顏色模式,并動態更改CSS樣式。以下是JavaScript的示例代碼: const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (prefersDark) { document.body.classList.add('dark-mode'); } else { document.body.classList.remove('dark-mode'); } 在此示例中,我們使用matchMedia來檢測瀏覽器顏色模式,并在需要時添加或刪除具有.dark-mode類的元素。然后,可以在CSS樣式表中定義此類的樣式,以在深色模式下執行所需的更改。