本內容首發于工粽號：程序員大澈，每日分享一段優質代碼片段，歡迎關注和投稿！
大家好，我是大澈！
本文約?800+?字，整篇閱讀約需?1?分鐘。
今天分享一段優質 CSS 代碼片段，輕松實現一鍵切換主題顏色，在任何項目中都可用。
老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！
[data-theme='default']?{--font-primary:?#fff;--background-main:?#0678be;
}[data-theme='black']?{--font-primary:?#fff;--background-main:?#393939;
}<html?lang="en"?data-theme="default"></html>body?{color:?var(--font-primary);background-color:?var(--background-main);
}
分享原因
這段代碼可以輕松實現網頁主題的切換，且在各種項目中通用。
先定義不同主題的 CSS 變量，再通過 JavaScript 動態更改 data-theme 屬性，從而實現頁面樣式的動態變化。
這種方法不僅簡化了主題管理，還提高了代碼的可讀性和維護性，是我們項目中一般且常用的實現方式之一。
代碼解析
1.?定義主題變量
CSS變量：聲明自定義CSS屬性，它包含的值可以在整個文檔中重復使用。屬性名需要以兩個減號（--）開始，屬性值則可以是任何有效的 CSS 值。
CSS屬性選擇器：匹配具有特定屬性或屬性值的元素。例如[data-theme='black']，將選擇所有 data-theme 屬性值為 'black' 的元素。
使用 [data-theme='default'] 和 [data-theme='black'] 選擇器，根據 data-theme 屬性的值定義不同的主題樣式。
定義了兩個 CSS 變量 --font-primary 和 --background-main，分別表示字體顏色和背景顏色。
2.?指定默認主題
在?<html>?元素上添加?data-theme="default"，指定默認主題為?default 。
后面用 js 動態切換 data-theme 屬性值，然后 CSS 屬性選擇器將自動選擇對應的 CSS 變量。
3. 應用 CSS 變量
Var函數：用于使用 CSS 變量。第一個參數為 CSS 變量名稱，第二個可選參數作為默認值。
使用 var(--font-primary) 和 var(--background-main) 來引用之前定義的 CSS 變量。
這里設置 body 元素的 color 和 background-color 屬性，分別引用 --font-primary 和 --background-main 變量，在項目中按需設置對應的元素即可。
 DHT11溫濕度傳感器模塊實戰含源碼)
)
)
)