【JavaScriptとCSS変数】シンプルなダークモードの実装 #JavaScript

Windowsの設定などでおなじみの「ダークモード」。
背景が黒っぽく、文字が白系統になるこのモードですが、CSS変数とJavaScriptを用いて作成してみました。
今後コピペして使い回したいと思ったので、最低限のシンプルな実装です。

ソースコード

まず先にソースコードの紹介です。
各箇所の解説は後述します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Light-Dark</title>
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>
<body>
  <h1>タイトル</h1>
  <label for="chk">ダークモード</label>
  <input type="checkbox" id="chk" />
  <p>テキストテキストテキストテキスト</p>
  <button class="btn">ボタン</button>
</body>
</html>

style.css

/* ライトモード(通常)用の色を設定 */
:root {
  --main-text: #000000;
  --main-bg: #ffffff;
  --btn-color: #a9a9a9;
}

/* ダークモード用の色を設定 */
:root[theme="dark"] {
  --main-text: #ffffff;
  --main-bg: #000000;
  --btn-color: #32ed6a;
}

body {
  color: var(--main-text);
  background-color: var(--main-bg);
}

.btn {
  background-color: var(--btn-color);
}

index.js

window.addEventListener('DOMContentLoaded', () => {
  const checkbox = document.getElementById("chk");

  const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
  const isDarkMode = darkModeMediaQuery.matches;

  // 初期状態でどちらのテーマなのかを取得、それに合わせてページのテーマを決める
  if (isDarkMode) {
    document.documentElement.setAttribute("theme", "dark");
    checkbox.checked = true;
  } else {
    document.documentElement.setAttribute("theme", "right");
    checkbox.checked = false;
  }

  // チェックボックスのchangeイベントにライトモード・ダークモードの切り替えを追加
  checkbox.addEventListener("change", (e) => {
    const isChecked = e.target.checked;
    if (isChecked) {
      document.documentElement.setAttribute("theme", "dark");
    } else {
     document.documentElement.setAttribute("theme", "right");
    }
  });
})

コードについて

CSS、JavaScriptのそれぞれのファイルで何を行っているか、順に見ていきましょう。

CSS

CSS変数(カスタムプロパティ)

通常モード(ライトモード)とダークモードのそれぞれの色をCSS変数として設定しておきます。
設定したCSS変数は、var()関数を使ってアクセスすることができます。

今回はtheme属性を用いて、ダークモードの時はどの色になるかについても設定しておきます。

/* :root疑似クラスで定義することで、HTML文書全体で適用できるようになる。 */
:root {
  --main-text: #000000;
  --main-bg: #ffffff;
  --btn-color: #0000ff;
}

/* こちらはダークモード用の:root */
:root[theme="dark"] {
  --main-text: #ffffff;
  --main-bg: #000000;
  --btn-color: #32ed6a;
}

JavaScript

JavaScriptではモードの切り替えメソッドを定義しています。
ただし、アクセス時にOSでダークモードが設定されていたらそれを反映したいので、prefers-color-schemeを使用しています。

// ダークモードに設定されていたら、prefers-color-schemeはdark、そうでなければlight
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const isDarkMode = darkModeMediaQuery.matches;

ブラウザで確認

おわり

Reactでも書けそう(というか書ける)。
なのでそのうち書いて投稿してみようと思います。
たぶん。