蹦蹦勝勝 可愛的部落格
透過 JS 即時偵測系統外觀是否處於深色模式
2019/12/14
沒有人留言
gnehs

在撰寫網頁時若要用 JS 來檢測系統的主題,你會需要用到 CSS 的 prefers-color-scheme: dark 來檢測是否適用於該條規則,我們可以在 js 使用 matchMedia 來查看檢測後的結果。


程式碼如下

const darkModeMediaQuery = window.matchMedia(`(prefers-color-scheme: dark)`);
darkModeMediaQuery.addListener(e => {
  //當系統變更主題時都會執行這裡
  const darkMode = e.matches;
  // darkMode: [true(深色主題開啟)|false(深色主題關閉)]
});

js 教學

分享
分享給你所有的朋友

留下留言
來插頭香吧!成為第一個留言的🌚👏👏

請不要填寫真實姓名
這不會公開
選填
留下留言

夜間模式