ウェブサイトにダークモードを簡単に追加する方法

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

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

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

<button id="dark-mode-toggle">Toggle Dark Mode</button>

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

ステップ 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 (
           <div className={darkMode ? 'dark-mode' : ''}>
               <button onClick={toggleDarkMode}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               </button>
           </div>
       );
   }

   export default App;

この例では:

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

1. ダークモード用の CSS:

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

   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 (
           <div className={darkMode ? 'dark-mode' : ''}>
               <button onClick={() => setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               </button>
           </div>
       );
   }

   export default App;

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

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

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

以上がウェブサイトにダークモードを簡単に追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。