React MUIのテーマを永続化する方法 | Next.js、TypeScript使用

"use client";

import React, { createContext, useContext, useState, useEffect } from "react";
import { ThemeProvider as MuiThemeProvider, CssBaseline, PaletteMode } from "@mui/material";
import { createTheme } from "@mui/material/styles";

// **テーマ管理用のコンテキストを作成**
// - `mode`: 現在のテーマモード（"light" または "dark"）
// - `toggleColorMode`: テーマを切り替える関数
const ThemeContext = createContext<{
  mode: PaletteMode;
  toggleColorMode: () => void;
}>({
  mode: "light", // 初期値を "light" に設定
  toggleColorMode: () => {}, // 初期値として空の関数を設定
});

// **カスタムテーマプロバイダーコンポーネント**
// - アプリ全体でテーマを管理し、コンポーネントにテーマを適用
export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  // **テーマの状態を管理**
  // - 初期値は "light"
  const [mode, setMode] = useState<PaletteMode>("light");

  // **コンポーネントマウント時にテーマをローカルストレージから取得**
  // - ローカルストレージに保存されているテーマモードを復元
  useEffect(() => {
    const savedMode = localStorage.getItem("themeMode") as PaletteMode;
    if (savedMode) setMode(savedMode);
  }, []);

  // **テーマを切り替える関数**
  // - 現在のテーマモードを反転（"light" → "dark" またはその逆）
  // - 切り替え後のテーマモードをローカルストレージに保存
  const toggleColorMode = () => {
    setMode((prev) => {
      const newMode = prev === "dark" ? "light" : "dark";
      localStorage.setItem("themeMode", newMode); // 保存
      return newMode;
    });
  };

  // **MUIテーマの設定を作成**
  // - 現在のテーマモードに基づき、カラーパレットを設定
  const customTheme = createTheme({
    palette: {
      mode, // 現在のテーマモード（"light" または "dark"）
      primary: {
        main: "#234090", // メインカラー
        light: "#5367c8", // メインより明るい色
        dark: "#001b5f", // メインより暗い色
      },
      error: {
        main: "#f26523", // エラーカラー
      },
    },
  });

  return (
    // **コンテキストプロバイダーでテーマ状態を提供**
    // - 子コンポーネントでテーマモードと切り替え関数を使用可能
    <ThemeContext.Provider value={{ mode, toggleColorMode }}>
      {/* MUIのテーマプロバイダーでテーマを適用 */}
      <MuiThemeProvider theme={customTheme}>
        {/* CSSリセットを適用 */}
        <CssBaseline />
        {/* 子コンポーネントを描画 */}
        {children}
      </MuiThemeProvider>
    </ThemeContext.Provider>
  );
};

// **カスタムフック: テーマコンテキストを簡単に利用するためのユーティリティ**
export const useThemeContext = () => useContext(ThemeContext);

import type { AppProps } from "next/app";
import { CustomThemeProvider } from "@/contexts/ThemeProvider";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <CustomThemeProvider>
      <Component {...pageProps} />
    </CustomThemeProvider>
  );
}

"use client";

import AppHeader from "@/components/common/section/Header";
import Footer from "@/components/common/section/Footer";
import { Box, Container, CssBaseline } from "@mui/material";
import { useThemeContext } from "@/contexts/ThemeProvider";

export default function Layout({ children }: { children: React.ReactNode }) {
  // **マウント状態を管理**
  // サーバーサイドレンダリング（SSR）環境でクライアント特有の処理を安全に実行するためのフラグ
  const [isMounted, setIsMounted] = React.useState(false);

  // **テーマコンテキストの利用**
  // - `mode`: 現在のテーマモード（"light" または "dark"）
  // - `toggleColorMode`: テーマ切り替え関数
  const { mode, toggleColorMode } = useThemeContext();

  // **クライアントマウント時にフラグを設定**
  // サーバーサイド環境で`localStorage`などのクライアント依存処理を防ぐ
  React.useEffect(() => {
    setIsMounted(true);
  }, []);

  // **SSR環境では何も描画しない**
  // テーマやその他クライアントサイドの処理が完了するまで遅延レンダリング
  if (!isMounted) {
    return null;
  }

  return (
    <>
      {/* MUIのCSSリセットを適用 */}
      <CssBaseline />
      {/* ヘッダー: 現在のテーマモードと切り替え関数を渡す */}
      <AppHeader mode={mode} toggleColorMode={toggleColorMode} />
      <Box
        sx={{
          bgcolor: "background.default", // 現在のテーマに応じた背景色を適用
          display: "flex",
          flexDirection: "column",
          minHeight: "100vh",
        }}
      >
        <Container
          sx={{
            width: "100%",
            maxWidth: "100%",
            pt: 12, // ページ内容の上部余白を設定
          }}
        >
          {children}
        </Container>
        <Footer />
      </Box>
    </>
  );
}