YURI TORIYAMA Portfolio

テーマ切り替え（ライト／ダーク）

JavaScript
theme
JavaScript
// OSのダークモード設定を監視するMediaQueryList
const isDark = window.matchMedia("(prefers-color-scheme: dark)");

// テーマ用クラス名
const lightClass = "is-light";
const darkClass = "is-dark";

// テーマ適用処理（DOMクラスの付け替え）
function applyTheme(isDarkMode) {
  // 第2引数でtrue/falseを指定すると自動で追加/削除される
  document.body.classList.toggle(darkClass, isDarkMode);
  document.body.classList.toggle(lightClass, !isDarkMode);
}

// テーマを設定して保存する（ユーザー操作時）
function setTheme(mode) {
  // "dark" なら true、それ以外は false
  applyTheme(mode === "dark");

  // 永続化（タブを閉じても保持される）
  localStorage.setItem("theme", mode);
}

// 初期表示時のテーマ決定
function initTheme() {
  // 保存済みテーマを取得
  const saved = localStorage.getItem("theme");

  if (saved) {
    // ユーザー設定があればそれを優先
    applyTheme(saved === "dark");
  } else {
    // なければOS設定に従う
    applyTheme(isDark.matches);
  }
}

// 初期テーマ適用
initTheme();

// OS側のテーマ変更を監視
isDark.addEventListener("change", () => {
  // ユーザーが明示的にテーマを選択していない場合のみ反映
  if (!localStorage.getItem("theme")) {
    applyTheme(isDark.matches);
  }
});

// テーマ切り替えボタンが存在する場合のみイベント登録
if (themeSwitch) {
  themeSwitch.addEventListener("click", () => {
    // 現在の状態を確認
    const isCurrentlyDark = document.body.classList.contains(darkClass);

    // 状態を反転して保存
    setTheme(isCurrentlyDark ? "light" : "dark");
  });
}

Loading...