2019年12月14日

透過 JS 即時偵測系統外觀是否處於深色模式

用 JavaScript 偵測系統深色模式偏好,動態切換網站主題。
⚠️ 本篇文章距離撰寫時間已超過兩年,部分資訊可能已過時。

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


程式碼如下

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