OSのカラー設定がダークモードの場合にダークモード対応したWebページを表示し、手動でカラーモードを変えられるようにする - JavaScript

OSのカラー設定がダークモードの場合にダークモード対応したWebページを表示し、手動でカラーモードを変えられるようにするコードを紹介します。

概要

こちらの記事でOSのカラー設定に応じてWebページのカラーを変えるコードを紹介しました。また、こちらの記事ではリンクのクリックによりページのカラーを変える方法を紹介しました。この記事では2つの機能を合わせて、OSのカラーモードに応じたページを表示し、手動でもカラー設定を変更できるWebページのコードを紹介します。

実装例1 : OSのカラー設定に合わせてデフォルトのカラー設定を適用する

SwitchableDarkMode.css

:root {
  --background-color: #FFFFFF;
  --frame-background-color: #e1e1e1;
  --font-color: #383838;
  --frame-font-color: #383838;
  --link-color: #3067ff;
}

  :root[theme="dark"] {
    --background-color: #000000;
    --frame-background-color: #424242;
    --font-color: #bababa;
    --frame-font-color: #e1e1e1;
    --link-color: #ffdc0c;
  }

body {
  background-color: var(--background-color);
  color: var(--font-color);
}

a {
  color: var(--link-color);
}

.frame {
  background-color: var( --frame-background-color);
  color: var(--frame-font-color);
}

SwitchableDarkMode.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SwitchableDarkMode.css">
  <script type="text/javascript">
    function pageLoad() {
      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
      if (mediaQuery.matches == true) {
        changeDarkMode();
      }
    }

    function changeLightMode() {
      document.documentElement.setAttribute('theme', 'light');
    }

    function changeDarkMode() {
      document.documentElement.setAttribute('theme', 'dark');
    }
  </script>
</head>
<body onload="pageLoad();">
  <div>テストページです。</div>
  <div class="frame">テストのコンテンツです。</div>
  <hr />
  <div>
    切り替え&nbsp;&nbsp;&nbsp;
    <a href="javascript:changeLightMode();">ライトカラー</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:changeDarkMode();">ダークカラー</a>
  </div>
</body>
</html>

解説

テーマのカラーを変更する部分はこちらの記事を参照して下さい。

デフォルトの表示の決定はページ表示時にmatchMediaメソッドを呼び出し、 (prefers-color-scheme: dark) が指定されているかを取得します。指定されている場合は、OSのカラー設定がダークモードであることがわかるので、changeDarkmode() メソッドを呼び出しページをダークモードに設定します。

    function pageLoad() {
      mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
      if (mediaQuery.matches == true) {
        changeDarkMode();
      }
   }

表示結果

HTMLファイルをWebブラウザで表示します。OSのカラー設定がダークモードの時は背景が暗いテーマがデフォルトで表示されます。

[ライトカラー]のリンクをクリックすると背景が白になります。

[ダークカラー]のリンクをクリックすると背景が黒になります。

OSのカラー設定をライトモードに変えてHTMLファイルをWebブラウザで表示します。背景が白のテーマがデフォルトで表示されます。

[ダークカラー]のリンクをクリックすると背景が黒になります。

[ライトカラー]のリンクをクリックすると背景が白になります。

実装例2 : 設定を変更した場合、その状態をローカルストレージに保持する

先のコードではデフォルトの表示をOSの設定テーマに合わせる動作を実装しましたが、設定を手動で変更した場合変更内容を記憶しておく動作を保持しておく場合のコードを紹介します。
変更内容はローカルストレージに記録します。ローカルストレージの利用についてはこちらの記事を参照して下さい。

コード

下記のHTMLファイルとCSSファイルを作成します。

SwitchableDarkModeRetained.css

:root {
  --background-color: #FFFFFF;
  --frame-background-color: #e1e1e1;
  --font-color: #383838;
  --frame-font-color: #383838;
  --link-color: #3067ff;
}

  :root[theme="dark"] {
    --background-color: #000000;
    --frame-background-color: #424242;
    --font-color: #bababa;
    --frame-font-color: #e1e1e1;
    --link-color: #ffdc0c;
  }

body {
  background-color: var(--background-color);
  color: var(--font-color);
}

a {
  color: var(--link-color);
}

.frame {
  background-color: var( --frame-background-color);
  color: var(--frame-font-color);
}

SwitchableDarkModeRetained.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SwitchableDarkModeRetained.css">
  <script type="text/javascript">
    function pageLoad() {
      value = window.localStorage.getItem('color-theme-test-01');
      
      if (value == null) {
        mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        if (mediaQuery.matches == true) {
          changeDarkMode();
        }
      } else {
        if (value == 'dark'){
          changeDarkMode();
        } else {
          changeLightMode();
        }
      }
    }

    function changeLightMode() {
      document.documentElement.setAttribute('theme', 'light');
    }

    function changeDarkMode() {
      document.documentElement.setAttribute('theme', 'dark');
    }

    function changeLightModeOnLinkClick() {
      changeLightMode();
      setThemeSetting('light');
    }

    function changeDarkModeOnLinkClick() {
      changeDarkMode();
      setThemeSetting('dark')
    }

    function setThemeSetting(value) {
      window.localStorage.setItem('color-theme-test-01',value);
    }
  </script>
</head>
<body onload="pageLoad();">
  <div>テストページです。</div>
  <div class="frame">テストのコンテンツです。</div>
  <hr />
  <div>
    切り替え&nbsp;&nbsp;&nbsp;
    <a href="javascript:changeLightModeOnLinkClick();">ライトカラー</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:changeDarkModeOnLinkClick();">ダークカラー</a>
  </div>
</body>
</html>

解説

デフォルトの表示設定やカラー設定部分は先のコードと同様です。
リンクをクリックしてカラー設定した場合は changeLightModeOnLinkClick() changeDarkModeOnLinkClick() 関数を呼び出します。関数内ではカラー設定の関数呼び出し後、setThemeSetting()関数を呼び出し設定内容をローカルストレージに記録します。

    function setThemeSetting(value) {
      window.localStorage.setItem('color-theme-test-01',value);
    }

2度目の表示時にはローカルストレージに記録されている値があるかを確認し、値がある場合は記録されているカラーテーマに応じた設定を適用します。初回表示時にはローカルストレージの値はnullになるため、その場合はprefers-color-schemeの値に応じたカラーを設定しています。

    function pageLoad() {
      value = window.localStorage.getItem('color-theme-test-01');
      
      if (value == null) {
        mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        if (mediaQuery.matches == true) {
          changeDarkMode();
        }
      } else {
        if (value == 'dark'){
          changeDarkMode();
        } else {
          changeLightMode();
        }
      }
    }