導入

ダーク モードは、暗い背景に明るいテキストと要素を使用する表示設定です。見た目が良く、いくつかの実用的な利点があるため、人気が高まっています。

ダーク モードの利点は次のとおりです:

1. 目の疲れの軽減: ダークモードは、画面から発せられる明るい光の量を減らすため、特に暗い環境で目に負担がかかりにくくなります。
2. OLED スクリーンのバッテリー寿命の向上: OLED (有機発光ダイオード) スクリーンでは、ダーク モードは黒色ピクセルが基本的にオフになり、明るい色の表示に比べて消費電力が少なくなるため、バッテリー寿命を節約できます。

このチュートリアルでは、CSS と JavaScript を使用して Web サイトをダーク モードに切り替える方法について説明します。シンプルなライトテーマの Web ページテンプレートから始めて、それを切り替え可能なライト/ダークモードを備えた Web サイトに変換します。これにより、ユーザーはライトテーマとダークテーマをスムーズに切り替えることができます。

プロジェクトのセットアップ

シンプルな光をテーマにした Web ページ テンプレートから始めましょう。次に、これを切り替え可能なライト/ダーク モードを備えた Web サイトに変換し、ユーザーがライト テーマとダーク テーマを切り替えられるようにします。

ダークモードスタイルの実装

色の選択

最初のステップは、使用しているすべての色をリストし、それぞれにダークテーマ バージョンを選択することです。以下の表に、ページ上のすべての色と、それに対応するダーク バージョンをリストしました。

カスタム変数

次に、CSS 変数を使用して、それらの変数を使用して body に暗いクラスと明るいクラスを作成します。

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

CSS 変数については、「CSS カスタム プロパティの使用」を参照してください。基本的に、これらは 2 つのダッシュ (--) を使用して定義され、ドキュメント内で再利用するために値を保存するエンティティです。 CSS 変数を使用すると、変更が自動的に更新されるため、メンテナンスが容易になります。

動的要素の色

CSS 関数 var() を使用して、CSS 変数の値を挿入します。このようにして、手動でそれぞれを変更するのではなく、動的に色を変更し、1 つの変数を更新してドキュメント全体の変更を反映することができます。

これは nav 要素とその子の例です:

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

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

JavaScript でライト/ダーク モードを切り替える

ボディのクラスをダークまたはライトに変更して、テーマを切り替えることができます。まず、ヘッダーにボタンを追加し、そのクリック イベントに changeTheme() 関数を設定します:

本文のクラスを切り替えるchangeTheme()関数を定義します:

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

そして、ユーザーはボタンをクリックすることでウェブサイトのテーマを変更できるようになりました。

以下の CodePen でチュートリアルのコードを確認できます

次のステップ

さらに、ユーザーのテーマ設定をローカル ストレージに保存できます。選択したテーマを保存し、ページの読み込み時にチェックするように changeTheme() 関数を更新すると、ユーザーの選択が確実に記憶され、次回の訪問時に自動的に適用されます。

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

配色の追加: ダーク;ダーク テーマのプロパティを使用すると、スタイル設定が難しい一部の要素のスタイルがブラウザによって変更されるようにすることもできます。

body.dark {
  color-scheme: dark;
}

結論

結論として、Web サイトにダーク モードを追加すると、目の疲れが軽減され、OLED スクリーンのバッテリー寿命が延長されるため、ユーザー エクスペリエンスが向上します。このガイドに従うと、CSS と JavaScript を使用してライト/ダーク モードの切り替えを簡単に設定できます。デザインに合わせてダーク モードをカスタマイズします。

実装を共有するか、以下のコメントで質問してください。