おい！したがって、あなたも私と同じで、ダーク モード全体の雰囲気が大好きなら、自分の Web サイトにダーク モードを追加することを考えたことがあるかもしれません。 CSS と JavaScript を少しだけ使用するだけで、非常に簡単に設定できます。私がやった方法は次のとおりです。

ステップ 1: HTML のセットアップ

まず、ユーザーがクリックしてライト モードとダーク モードを切り替えるボタンまたはスイッチが必要です。この例ではシンプルなボタンを使用しました (必要に応じてアイコンを使用できます):

Toggle Dark Mode

このボタンがモード切り替えのトリガーになります。

ステップ 2: ライト モードとダーク モード用の CSS を追加する

次に、ライト モードとダーク モードがどのように見えるかを定義する必要があります。 CSS で、デフォルトのスタイル (ライト モードになります) を設定し、これらのスタイルをオーバーライドするダーク モード クラスを追加します。

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

何が起こっているかは次のとおりです:

• ライト モード (デフォルト): ボディの背景は白、文字は黒です。モード切り替え時の切り替えをスムーズにするトランジションを追加しました。
• ダーク モード: .dark-mode クラスは、背景を濃い灰色に変更し、テキストを白に変更します。

ステップ 3: JavaScript を使用してモードを切り替える

次は、ボタンに実際に何かを実行させる部分です。この JavaScript ビットは、ボタンがクリックされるたびに本文の .dark-mode クラスを切り替えます。

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save the user's preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

内訳は次のとおりです:

• クラスの切り替え: ボタンをクリックすると、本体の .dark-mode クラスを切り替えます。これにより、ライト モードとダーク モードの間でスタイルが変更されます。
• 設定の保存: ユーザーの設定を localStorage に保存することで、少し追加しました。これは、ユーザーがダーク モードを選択すると、サイトを離れて再びサイトに戻ったとしても、ダーク モードが維持されることを意味します。

ステップ 4: ページ読み込み時にユーザーの設定をロードする

サイトがユーザーの優先モードで読み込まれるようにするには、ページの読み込み時に localStorage を確認し、それに応じてモードを設定する必要があります。

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
    }
});

React を使用している場合、プロセスはかなり似ていますが、コンポーネント内で処理します。その方法は次のとおりです:

1. ダーク モードの状態と CSS クラスを設定する:

React の useState を使用してダーク モードの状態を管理し、適切なクラスをルート要素に適用します:

   import React, { useState } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(false);

       const toggleDarkMode = () => {
           setDarkMode(!darkMode);
       };

       return (
           

               
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

この例では:

• ダークモードの状態によって、ダークモードがアクティブかどうかが決まります。
• toggleDarkMode 関数は、ダーク モードのオンとオフを切り替えます。

1. ダークモード用CSS:

前と同じように、.dark-mode クラスを CSS に追加します:

   body {
       background-color: white;
       color: black;
       transition: background-color 0.3s, color 0.3s;
   }

   .dark-mode {
       background-color: #121212;
       color: #ffffff;
   }

1. ローカル ストレージ:

テーマ設定を維持したい場合は、次の小さな調整を追加できます:

   import React, { useState, useEffect } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(() => {
           const savedTheme = localStorage.getItem('theme');
           return savedTheme === 'dark';
       });

       useEffect(() => {
           localStorage.setItem('theme', darkMode ? 'dark' : 'light');
       }, [darkMode]);

       return (
           

                setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

何が起こっているかは次のとおりです:

• Initial State: darkMode の初期状態は、localStorage.
に格納されている値に基づいて設定されます。
• Effect フック: useEffect フックは、darkMode が変更されるたびに現在のテーマ設定を保存します。

それで終わりです！これは、物事を過度に複雑にすることなく、React アプリにダーク モードを追加する簡単な方法です。