純css
用戶是否開啟夜間模式可以使用媒體查詢@media (prefers-color-scheme: light | dark)來查看，這樣只需要配合:root的css變量就可以進行設置整個網站的主題顏色
配合js設置主題
上面的只是簡單介紹，實際問題是我在我的瀏覽器上找不到改變主題咋辦啊？當然是用js來改了，通過MDN能找到對於:root的介紹：
:root 這個 CSS 偽類匹配文檔樹的根元素。對於 HTML 來說，:root 表示 <html> 元素，除了優先級更高之外，與 html 選擇器相同。
這說明通過document.documentElement的結果和:root是一樣的，然后根據上面提到的MDN文檔，我們可以通過element.style.setProperty來修改css變量，那整個替換主題的思路就能出來了
這是我寫的一個修改主題的函數，只要設置Theme的值，就能修改頁面的主題
export default function setTheme(theme = "dark") {
// 檢測是否支持css變量
if (!window?.CSS?.supports("--a", 0)) return false;
// 設置主題
const Theme = {
dark: [["--text", "#ffffff"]],
light: [["--text", "#000000"]],
};
for (const theme of Theme[theme]) {
document.documentElement.style.setProperty(...theme);
}
}
最后只要用localStorage儲存用戶的主題設置，就可以輕松完成主題切換按鈕