テーマ設定
テーマデモ
現在のテーマ
ライトモードが適用されています
プライマリカラー
テーマに応じて色が変化します
セカンダリカラー
ダークモードでも見やすい色調
注意事項
テーマの設定はlocalStorageに保存され、次回訪問時も維持されます
学習ポイント
💡
Context API:React Context APIを使ってテーマ状態をグローバルに管理
🎨
Tailwind CSS Dark Mode:dark:プレフィックスを使ってダークモード対応のスタイリング
💾
localStorage:テーマ設定をブラウザに永続化して次回訪問時に復元
🖥️
システムテーマ連携:prefers-color-schemeメディアクエリでOSの設定に追従