14 行 CSS 代碼實現明暗模式

最近我打算對我的個人網站添加明暗模式的自動檢測。這個解決方案不使用 JavaScript。相反，它通過CSS 媒體查詢來檢測用戶的系統設置，并使用兩個自定義CSS屬性來確定一個基本的配色方案。

定義 2 個自定義的 CSS 屬性

CSS 自定義屬性也被稱為 CSS變量或級聯變量。你可以在 CSS 文件的任何地方定義 CSS 自定義屬性，它們遵循與其他 CSS 規則相同的級聯和特定模式。例如，您可以在 document root 中定義 CSS 變量，并在更具體的 CSS類 中覆蓋它們。您還可以檢查和調試瀏覽器開發工具中聲明的CSS變量，這些變量顯示在樣式表規則下面。

CSS自定義屬性由前綴為兩個破折號(——)的單詞聲明組成，并使用var()函數訪問。

:root { --my-color-variable: #000000; } .element { color: var(--my-color-variable); }

您還可以向 var() 函數傳遞第二個參數，當您嘗試使用自定義屬性時，如果自定義屬性不存在，它將充當回退值。

.element { color: var(--my-new-color, #ff0000); }

對于這種明/暗模式解決方案，在文檔根 document.root 定義兩個顏色變量—一個用于前景色，一個用于背景色。我傾向于默認選擇暗模式，所以我將背景色設置為黑色(--color-bg)，前景色設置為白色(--color-fg)。

:root { --color-bg: #000000; --color-fg: #ffffff; }

媒體查詢：prefers-color-scheme

接下來，我們將使用 preferences-color-scheme CSS 媒體查詢連接到系統設置。當檢測到 light 主題設置時，下面的代碼將--color-bg設置為白色，--color-fg設置為黑色。

@media (prefers-color-scheme: light) { :root { --color-bg: #ffffff; --color-fg: #000000; } }

添加 body 樣式

最后，使用 CSS 自定義屬性，設置 HTML 主體元素的背景顏色(頁面顏色)和文本顏色，如果沒有覆蓋，所有的子元素都將繼承它們。

body { background-color: var(--color-bg); color: var(--color-fg); }

現在，你已經實現了明暗模式的支持。快自己寫一個例子試試吧~

完整代碼

:root { --color-bg: #000000; --color-fg: #ffffff; } @media (prefers-color-scheme: light) { :root { --color-bg: #ffffff; --color-fg: #000000; } } body { background-color: var(--color-bg); color: var(--color-fg); }

CSS

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。