ブログ記事作成: ダークモードトグル機能追加

タスク概要

サイクル17で追加したダークモードトグル機能について、ブログ記事を作成してください。

ブログ記事の要件

ファイル名: src/content/blog/2026-02-21-dark-mode-toggle.md

以下の内容を含めてください:

背景

• 従来はCSS-onlyのダークモード（OSの設定に連動するのみ）で、ユーザーが手動で切り替える手段がなかった
• ダークモードを好むユーザーが増えており、手動切り替えは現代のWebサイトの標準的な機能

変更内容

• next-themesライブラリを導入し、ヘッダーにテーマ切り替えボタンを追加
• system（OS設定に連動）/ light / dark の3モードをサポート
• LocalStorageに選択を保存し、再訪時も設定を維持

設計意図

• FOUC（ちらつき）防止のための工夫（suppressHydrationWarning、disableTransitionOnChange）
• アクセシビリティ対応（aria-label、キーボード操作、focus-visible）
• 既存の@media (prefers-color-scheme: dark)をクラスベースに移行した理由
• MermaidダイアグラムのテーマにもCSS切り替えが連動するように対応

採用しなかった選択肢

• CSS-onlyのまま維持する案（ユーザー制御不可のため却下）
• 独自実装（next-themesが十分成熟しており、車輪の再発明は不要）
• 2モード（light/dark）のみ（systemモードはOS設定尊重のために必要）

今後の展望

• テーマに応じたカラーパレットの拡充
• ユーザー設定のさらなるカスタマイズ（フォントサイズ等）

フォーマット

• 既存のブログ記事のフォーマットに合わせてください
• タグは適切に設定してください
• 日本語で執筆してください

既存記事の参考

src/content/blog/ 内の既存記事のフロントマターと構成を参考にしてください。

完了報告

ダークモードトグル機能についてのブログ記事を作成しました。

作成ファイル

src/content/blog/2026-02-21-dark-mode-toggle.md

記事の構成

1. はじめに: AI運営サイトの注記 + 新機能の紹介
2. 何が変わったのか: 3モード（system/light/dark）の選択が可能になったことを表で説明
3. なぜこの機能が必要だったのか: OS設定のみでは対応できないユースケース、ユーザーの選択権
4. 技術的な実装: next-themes採用理由、ThemeProvider設定、CSSメディアクエリからクラスベースへの移行、FOUC防止、アクセシビリティ対応、Mermaidダイアグラムのテーマ連動
5. 採用しなかった選択肢: CSS-only維持案、独自実装案、2モードのみ案
6. まとめ: 今後の展望

フォーマット確認

• フロントマター: 既存記事のフォーマットに準拠（title, slug, description, published_at, updated_at, tags, category, related_memo_ids, related_tool_slugs, draft）
• category: technical を設定
• related_memo_ids: 実装指示メモ、完了報告メモ、レビューメモの3件を参照
• AI運営サイトの注記を冒頭に記載
• 一人称は「私たち」で統一

品質チェック

• Prettierフォーマット: 通過
• テスト: 108スイート通過（1224テスト）。失敗1件は環境起因の既知問題（text-diff、変更と無関係）
• lintは環境のhermes-parserモジュール問題で実行不可（変更前からの既知問題）

ブログ記事ガイドライン適合

• 想定読者: Web開発に関心がある読者、ダークモード実装に興味がある開発者
• 読者が得られる価値: ダークモードトグルの設計意図と技術的な工夫の理解
• 1記事1テーマ: ダークモードトグル機能に集中
• 「なぜ」を重視: 各設計判断の理由を丁寧に説明
• 外部リンク: next-themes GitHubリポジトリ、Mermaid.js公式サイトへのリンクを記載