テーマ選択の保存

CoddyのHTMLジャーニー「JavaScript in Action」セクションの一部 — レッスン 17/27。

ユーザーがライトテーマとダークテーマを切り替える際、ウェブサイトにその選択を記憶させたいと考えます。
そのために、JavaScriptの<strong>localStorage</strong>を使用します。これはブラウザにデータを保存し、このデータはページが更新されたりブラウザが閉じられたりした後でも保持されます。

ロジックは次の通りです：

ユーザーがテーマを切り替えたとき、現在のテーマを localStorage に保存します。
ページが読み込まれたとき、localStorage を確認し、保存されているテーマを自動的に適用します。

HTML:

<button id="themeToggle">Toggle Theme</button>

CSS:

body.dark-mode {
  background-color: #222;
  color: #fff;
}

このコードは、ユーザーが以前にダークテーマを localStorage に保存したかどうかを確認し、ページ読み込み時にそれを適用します。

ボタンがクリックされると、ページのダークモードを切り替え、次回の訪問時にも設定が記憶されるように localStorage を更新します。

const button = document.getElementById("themeToggle");

// ページ読み込み時に保存されたテーマを適用する
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

button.addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");

  // 設定を保存する
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

これにより、ユーザーの設定がサイトへの再訪問時にも維持されるようになります。

チャレンジ

簡単

ユーザーの好みを記憶するテーマ切り替えボタンを作成してください。

ステップ：

ページ読み込み時： ユーザーが以前にダークモードを選択したかどうかを確認します。
1. もし "dark" が localStorage に保存されている場合は、body に "dark-mode" クラスを追加します。
切り替えボタンがクリックされた時： ライトテーマとダークテーマを切り替えます。
1. body 要素の "dark-mode" クラスをトグル（切り替え）します。
2. 現在のテーマを localStorage に保存します。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Theme Preference Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="themeToggle">Toggle Theme</button>

  <h1>Saving Theme Preference</h1>
  <p>
    Try switching between light and dark mode using the button above.  
    Refresh the page — your choice is remembered thanks to <strong>localStorage</strong>.
  </p>
  <script src="script.js"></script>
</body>
</html>