手機網頁自適應深色模式適配
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樣式表中定義此類的樣式，以在深色模式下執行所需的更改。
