【JavaScript】ダークモードの判定

はじめに

CSSでメディアクエリを用いてダークモードを判別するというのはよく知られた手法ですね。
この記事ではJavaScriptでそれをする方法を紹介します。

この記事の対象者

• ある程度HTML, CSS, JavaScript(要するにWebフロントエンド)の基本的な知識があり、JavaScriptでダークモードを判別したい。

前提知識

• JavaScriptの基礎的な文法と仕様を理解している

実装

windowに生えているmatchMediaを用いることでメディアクエリを評価することができます。この場合はCSSのメディアクエリと同様prefers-color-schemeでテーマを判定します。

ダークモードかどうか判定するだけ

function isDarkMode() {
  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

このisDarkmode関数は表示環境がダークモードかどうかをtrueかfalseのブール値で返します。

使用例

if (isDarkMode()) {
  console.log('ダークモードです');
} else {
  console.log('ライトモードです');
}

ダークモードの変更を検知する

window.matchMediaの変更をイベントリスナーで検知できます。

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {});

使用例

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  if (event.matches) {
    console.log('ダークモードに変更されました');
  } else {
    console.log('ライトモードに変更されました');
  }
});

終わりに

最後まで読んで頂きありがとうございます。不備があれば是非コメントで指摘して下さい。