JavaScriptを使用したダークモードの切り替え方法

1. ダークモードのトグルボタンを作成する: まず、HTMLファイルにダークモードの切り替えに使用するトグルボタンを作成します。例えば、次のようなボタンを作成することができます:

<button id="dark-mode-toggle">ダークモード切り替え</button>

2. JavaScriptでダークモードの切り替えを処理する: 次に、JavaScriptを使用してダークモードの切り替えを処理します。以下は、基本的な方法です:

// ページの要素を取得
const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;
// ダークモード切り替えのためのクラスを追加・削除する関数
function toggleDarkMode() {
  body.classList.toggle('dark-mode');
}
// トグルボタンのクリックイベントを監視し、ダークモードの切り替えを実行する
toggleButton.addEventListener('click', toggleDarkMode);

3. CSSでダークモードのスタイルを設定する: ダークモードのスタイルを適用するために、CSSで必要なスタイルを設定します。例えば、以下のようなCSSコードを使用できます:

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

上記のスタイルは、背景色を暗いグレーにし、テキストの色を白に設定します。

以上の手順を実行すると、ダークモードの切り替え機能が実装されます。ユーザーがトグルボタンをクリックすると、ページの外観がダークモードとライトモードの間で切り替わります。

この記事では、基本的なダークモードの切り替え方法を紹介しました。より高度な機能や他の方法については、さらなる学習と調査が必要です。