① h5通過css進行深色模式切換
prefers-color-scheme ( https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme ) 是一種用於檢測用戶是否有將系統的主題色設和祥置為亮色或者暗色的 CSS 媒體特性。利用源棚埋其設置不同主題模式下的 CSS 樣式，瀏覽器會自動根據當前系統主題載入對應的 CSS 樣式。light 適配雹螞淺色主題，dark 適配深色主題，no-preference 表示獲取不到主題時的適配方案。
淺色模式效果如圖：
深色模式效果如圖：
window.matchMedia ( https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia ) 方法可以用來查詢指定的媒體查詢字元串解析後的結果。結合 CSS 變數和 matchMedia 的查詢結果，設置對應的 CSS 主題顏色。該方法更靈活，可以單獨抽離主題色進行適配，深色模式匹配 (prefers-color-scheme: dark) ，淺色模式匹配 (prefers-color-scheme: light) 。
監聽主題模式，深色模式時為 body 添加類名 dark，根據 CSS 變數的響應式布局特點，自動生效 dark 類名下的 CSS。
淺色模式效果如圖：
深色模式效果如圖：
② 微軟Word Web黑暗模式上線，這個模式都有哪些不同
這種黑暗的模式上線之後，你會發現整個的系統和操縱得非常的厲害。
首先，用戶可以切換到暗模式，而不會影響文檔的白色背景。只需單擊一下，即可在亮模式和暗模式之間切換。如果您對黑色色帶和白色工作區感到滿意，並且不想看到黑色工作區，Microsoft Word Web會記住用戶背景切換的狀態。Word web暗模式與Word for Mac和Windows一樣好。啟用此功能時，將使用菜單控制項和文檔背景啟用暗圖。
重要的是要知道，Microsoft以尊重用戶默認系統主題的方式實現此功能。此外，設置應具有選擇暗模式和亮模式的選項。當用戶長時間在電腦屏幕上處理Word文檔時，Word中的暗模式可以減輕眼睛疲勞。要使用Word Web暗模式，請轉到“查看”>“暗模式”。如果您不喜歡文檔的暗狀態，可以單擊“更改背景”按鈕使用白色文檔背景。