サイトのダークモード · Martinとコード

ライト/ダークテーマの切り替え——ブラウザを閉じても覚えてる。

どう動くか

ダークモードは2パーツの呪文：

CSS が2つ目の「コスチューム」を準備——ページに dark クラスがあるときだけ当たるルール。
JavaScript がクリックでクラスを付け外し。ブラウザの記憶 に選んだものを書き込む——明日もそのまま。

見てみよう：CSS のダークコスチューム

style.css の末尾に追加：

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2 {
  color: #93c5fd;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
}

読み方：「body に dark クラスがあるとき、これらのルールが当たる。」クラスがなければ使われない。

💡

サイトに合わせて色を調整——CSS を見て、明るい色ごとにダーク版を考える。ルールは同じ：暗い背景 → 明るい文字。

見てみよう：JavaScript のスイッチ

ヘッダー（<nav> 内）にボタンを追加：

<button id="switch">🌙</button>

script.js では：

const switchButton = document.getElementById("switch");

// When the page loads: remember what the visitor picked last time
if (localStorage.getItem("mode") === "dark") {
  document.body.classList.add("dark");
  switchButton.textContent = "☀️";
}

switchButton.addEventListener("click", () => {
  document.body.classList.toggle("dark");

  if (document.body.classList.contains("dark")) {
    localStorage.setItem("mode", "dark");
    switchButton.textContent = "☀️";
  } else {
    localStorage.setItem("mode", "light");
    switchButton.textContent = "🌙";
  }
});

新しい3つ：

classList.toggle("dark") – 「クラスがあれば外す、なければ付ける。」1行のスイッチ。
classList.contains("dark") – 「今付いてる？」（true/false、条件で便利）。
localStorage – ブラウザのノート。setItem で書き、getItem で読む。保存したものはブラウザを閉じても残る。（このサイトも学習の進捗を保存するのに使ってる！）

やってみよう 💪

自分の style.css にダークコスチュームを追加——すべての色（背景、ヘッダー、カード、フッター、バッジ）に body.dark 版を。
全ページ のヘッダーにスイッチボタン、script.js にコード。
試す：ダークに切り替え、ブラウザを閉じて、また開く——ダークのまま起動するはず。

より完全なダークコスチュームの例（プロジェクトに合わせて調整）

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2,
body.dark h3 {
  color: #93c5fd;
}

body.dark header {
  background-color: #0f172a;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
  box-shadow: none;
}

body.dark footer {
  background-color: #0f172a;
}

body.dark a {
  color: #93c5fd;
}

✅

確認： 🌙 をクリックで暗く（アイコンが ☀️ に）、☀️ で明るく。ブラウザを閉じて開き直しても選択を覚えてる。「大人の」サイトにもない機能がたくさんある！

このレッスンのまとめ

ダークモード = 準備した CSS コスチューム（body.dark）+ クラスを切り替える JavaScript。
classList.toggle() でクラス付け外し、classList.contains() で確認。
localStorage はブラウザの永続メモリ：setItem("key", "value") と getItem("key")。