CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSとJavaScriptでダークモード／ライトモードを切り替える方法を解説！

ダークモードとは？導入のメリット

ダークモードは、夜間や暗い場所での閲覧時に目への負担を軽減できるうえ、有機EL（OLED）ディスプレイ搭載のスマートフォンやPCではバッテリー消費を抑えられる効果も期待できる、近年多くのWebサービスで標準となっている機能です。この記事では、CSSとJavaScriptを組み合わせて、ボタン操作ひとつでダークモードとライトモードを切り替える方法を、実際に動くサンプルコード付きで解説します。

切り替えの仕組み

実装の考え方は非常にシンプルです。
まず、ライトモード（白背景・黒文字）のスタイルをbody要素のデフォルトとして定義し、ダークモード（黒背景・白文字）用のスタイルを.dark-modeという独立したクラスとして用意します。
あとは、ボタンのクリックイベントをJavaScriptで検知し、classList.toggle()メソッドを使ってこのクラスの付け外しを行うだけです。クラスが付与されている間はダークモードのスタイルが適用され、外れれば元のライトモードに戻ります。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ダークモード切り替えデモ</title>
<style>
  body {
    padding: 25px;
    background-color: white;
    color: black;
    font-size: 25px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
  }
  .dark-mode {
    background-color: black;
    color: white;
  }
  .toggleButton {
    padding: 12px;
    font-size: 18px;
    border: 2px solid green;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>ダークモード／ライトモード切り替えデモ</h1>
<button class="toggleButton">ダークモードに切り替え</button>
<p>上のボタンをクリックすると、テーマが切り替わります。</p>
<script>
  document.querySelector(".toggleButton").addEventListener("click", toggleDarkMode);

  function toggleDarkMode() {
    document.body.classList.toggle("dark-mode");
  }
</script>
</body>
</html>

コードのポイント解説

  • CSSの部分：bodyセレクターにライトモードの配色（背景：白、文字：黒）をデフォルトとして指定し、.dark-modeクラスでダークモード用の配色（背景：黒、文字：白）を定義しています。また、transitionプロパティを加えることで、切り替えの瞬間に色が滑らかに変化するようにしました。
  • JavaScriptの部分：querySelector(".toggleButton")でボタン要素を取得し、addEventListener("click", toggleDarkMode)でクリックイベントを登録します。ボタンがクリックされるたびにtoggleDarkMode()関数が呼び出され、document.body.classList.toggle("dark-mode")によってdark-modeクラスのオン／オフが切り替わります。

実行結果

上記のコードをブラウザーで開くと、最初はライトモード（白背景・黒文字）で表示されます。

CSSとJavaScriptでダークモード／ライトモードを切り替える方法を解説！

続いて、「ダークモードに切り替え」ボタンをクリックしてみましょう。背景が黒、文字色が白に変化し、ダークモードへと切り替わります。もう一度クリックすれば、ライトモードに戻ります。

CSSとJavaScriptでダークモード／ライトモードを切り替える方法を解説！

より実用的にするための発展テクニック

  • ユーザーの選択を記憶する：JavaScriptのlocalStorageにテーマ設定を保存しておけば、ページを再読み込みしても、ユーザーが最後に選んだテーマが維持されます。
  • OSの設定に自動対応する：CSSのメディアクエリ@media (prefers-color-scheme: dark)を活用すれば、OSレベルでダークモードが設定されているユーザーに対して、初回表示から自動的にダークテーマを適用できます。
  • アクセシビリティを高める：切り替えボタンにaria-pressed属性を持たせると、スクリーンリーダーを利用している訪問者にも現在のテーマ状態が伝わりやすくなります。

まとめ

このように、CSSでテーマごとのスタイルを定義し、JavaScriptのclassList.toggle()でクラスを切り替えるだけで、ダークモード／ライトモードの切替機能は簡単に実装できます。まずは本記事のサンプルを実際に動かしてみて、その後にlocalStorageによる設定の保存やprefers-color-schemeによる自動判定などを組み合わせて、自分のサイトに合わせてカスタマイズしてみてください。

  1. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル

  2. CSSを使ってWebサイトにダークモード／ライトモードを実装する方法

    ページの文字色（color）と背景色（background-color）を切り替えるだけで、Webサイトにダークモード／ライトモード機能を簡単に追加できます。本記事では、CSSと少量のJavaScriptを組み合わせて、ボタン操作で表示モードを切り替える実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 基本の構文 ダークモードを適用する場合は、次のような構文を使用します。セレクターに対して文字色を白、背景色を黒に指定することで、暗い環境でも視認性の高い表示を実現できます。 Selector {    color: white;   &nbs