B-017: ユーザートグル式ダークモード（next-themes）実装

タスク概要

B-017: ユーザートグル式ダークモード（next-themes）を実装してください。

背景

現在、サイトはCSS-onlyのダークモード（prefers-color-schemeメディアクエリ）に対応していますが、ユーザーが手動でライト/ダークモードを切り替える機能がありません。next-themesライブラリを使用して、ユーザートグル機能を追加してください。

要件

1. next-themesをインストールし、ThemeProviderを設定する
2. ヘッダーにダークモードトグルボタンを追加する
3. system / light / dark の3モードをサポートする（systemがデフォルト）
4. 既存のCSS変数ベースのダークモードスタイルと互換性を保つ
5. ちらつき（FOUC）を防止する
6. LocalStorageにユーザーの選択を保存する

制約

• 既存のデザインやレイアウトを壊さないこと
• テストが全て通ること
• アクセシビリティ（aria-label等）に配慮すること

実装手順

1. 現在のダークモード実装を調査する（CSS変数、メディアクエリの使用箇所を確認）
2. next-themesをインストールする
3. ThemeProviderをルートレイアウトに設置する
4. ヘッダーにテーマ切り替えボタンを追加する
5. 既存のCSSをnext-themesのクラス名方式に対応させる
6. テストを実行して問題がないことを確認する

完了条件

• ヘッダーにテーマ切り替えボタンが表示される
• ライト/ダーク/システムの切り替えが正しく動作する
• ページリロード後も選択が維持される
• FOUC（ちらつき）がない
• 全テストが通る
• npm run build が成功する

完了報告

B-017: ユーザートグル式ダークモードの実装が完了しました。

実装内容

1. next-themes の導入

• next-themes パッケージをインストール

2. ThemeProvider の設置

• src/components/common/ThemeProvider.tsx を新規作成（"use client" コンポーネント）
• attribute="class" で html 要素に dark クラスを付与する方式を採用
• defaultTheme="system" でシステム設定をデフォルトに
• src/app/layout.tsx に ThemeProvider を追加、suppressHydrationWarning を html 要素に追加（FOUC 防止）

3. テーマ切り替えボタン

• src/components/common/ThemeToggle.tsx を新規作成
• src/components/common/ThemeToggle.module.css を新規作成
• system（モニターアイコン）-> light（太陽アイコン）-> dark（月アイコン）のサイクル切り替え
• aria-label、title 属性による日本語アクセシビリティ対応
• mounted 状態チェックによるハイドレーションミスマッチ防止

4. Header への統合

• src/components/common/Header.tsx に ThemeToggle を追加
• src/components/common/Header.module.css に .actions コンテナを追加
• デスクトップ・モバイル両方でトグルボタンが表示される

5. CSS のクラスベース方式への移行

以下のファイルの @media (prefers-color-scheme: dark) を :root.dark または :global(html.dark) セレクタに変換:

• src/app/globals.css - グローバル CSS 変数
• src/app/page.module.css - ホームページ
• src/app/games/page.module.css - ゲーム一覧
• src/app/quiz/page.module.css - クイズ一覧
• src/app/dictionary/page.module.css - 辞典一覧
• src/components/dictionary/DictionaryCard.module.css
• src/components/dictionary/color/ColorCard.module.css
• src/components/games/nakamawake/SolvedGroups.module.css
• src/components/games/nakamawake/GameContainer.module.css
• src/components/games/kanji-kanaru/styles/KanjiKanaru.module.css
• src/components/games/yoji-kimeru/styles/YojiKimeru.module.css

6. MermaidRenderer の更新

• src/components/blog/MermaidRenderer.tsx を window.matchMedia から useTheme().resolvedTheme に変更

テスト結果

• 全 108 テストスイート通過（1216 テスト）
• 新規テスト ThemeToggle.test.tsx（3テスト）を追加・通過
• 既存の Header テスト（4テスト）も全て通過
• TypeScript 型チェックで新規エラーなし
• npm run build は環境のメモリ問題（Bus error）で失敗するが、変更前の状態でも同じエラーが発生するため、コード変更に起因しない

注意事項

• next-themes は LocalStorage にテーマ選択を自動保存する
• system モードでは OS の設定に追従し、dark クラスの付与・除去を自動で行う
• FOUC 防止は next-themes の script injection と suppressHydrationWarning で対応済み