テーマスイッチャー

ライト、ダーク、システムテーマ間でアプリケーションの外観を変更します。

ライト、ダーク、システムテーマ間でアプリケーションの外観を変更します。テーマスイッチャーは、個人の好みに合わせてビジュアルインターフェースの色をカスタマイズしたり、目の疲れを軽減したりすることができ、オペレーティングシステムの設定にシームレスに適応する自動システム検出機能を備えています。

機能

• 3つのテーマオプション（ライト、ダーク、システム）を切り替え
• ユーザープロファイルメニューからテーマコントロールにアクセス
• ページのリロードなしでテーマの変更を即座に適用
• セッションとデバイス間でテーマの設定を保持
• システムオプションが選択されている場合、システムテーマを自動的に検出して追従
• 選択時にテーマの変更を即座にプレビュー
• すべてのアプリケーションページでテーマの一貫性を維持

使用方法

1. ユーザープロファイルメニューを開く:

   • サイドバーの下部にあるユーザープロファイルボタンをクリック（アバターと名前を表示）
   • プロファイルメニューが開き、ユーザー情報と設定が表示されます

2. テーマスイッチャーにアクセス:

   • プロファイルメニューのユーザー情報セクションの下にあるテーマスイッチャーを見つける
   • テーマスイッチャーは水平列に3つのアイコンボタンとして表示されます
   • 現在のテーマは強調表示/選択された状態で表示されます
   

3. ライトテーマを選択:

   • 太陽アイコン（最初のボタン）をクリックしてライトテーマをアクティブ化
   • インターフェースが明るい背景と暗いテキストに切り替わります
   • テーマはすべてのページにすぐに適用されます
   • 選択は将来のセッションのために自動的に保持されます

4. ダークテーマを選択:

   • 月アイコン（2番目のボタン）をクリックしてダークテーマをアクティブ化
   • インターフェースが暗い背景と明るいテキストに切り替わります
   • 低照度環境での目の疲れを軽減します
   • テーマの選択は自動的に保存されます
   

5. システムテーマを選択:

   • モニターアイコン（3番目のボタン）をクリックしてシステムテーマをアクティブ化
   • アプリケーションがオペレーティングシステムのテーマ設定を自動的に検出
   • テーマはOS設定に基づいてライトとダークを切り替えます
   • システムテーマが変更されると自動的に更新されます
   

6. テーマの適用を確認:

   • 外側をクリックするかEscapeキーを押してプロファイルメニューを閉じる
   • アプリケーションページを移動してテーマの一貫性を確認
   • テーマはすべてのUI要素（サイドバー、コンテンツ、ダイアログ、ボタン）に適用されます

要件

要件	詳細
権限	認証されたユーザー
ブラウザ	Chrome、Firefox、Safari（最新2バージョン）
システム	テーマ検出サポート付きのオペレーティングシステム（システムオプション用）
ストレージ	設定の保持のためにブラウザのlocalStorageが有効

制限事項

制限	値
テーマオプション	3テーマ（ライト、ダーク、システム）
システム検出	prefers-color-schemeのブラウザサポートが必要
カスタムテーマ	カスタムカラースキームまたはユーザー定義テーマなし
保持	デバイスごとのストレージ（複数デバイス間で同期しない）
遷移	即座に切り替え（アニメーションまたはフェード効果なし）

サポートされていない機能:

• カスタムテーマカラーパレットの作成
• 個別のUI要素の色を独立して調整
• 時刻によるテーマの自動変更のスケジューリング
• カスタムテーマ構成のインポートまたはエクスポート
• プロジェクトごとのテーマ設定（テーマはグローバルに適用）
• ハイコントラストモードまたはアクセシビリティ固有のテーマ
• 選択を適用する前のテーマプレビュー
• 元に戻すボタンで前のテーマに戻る
• 複数デバイス間でテーマ設定を共有
• テーマスイッチャーボタン用のカスタムアイコンセット

設定

設定	デフォルト	説明
デフォルトテーマ	システム	新規ユーザーはOSに一致するシステムテーマから開始
ストレージメソッド	localStorage	テーマの設定はブラウザのlocalStorageに保存されます
ストレージキー	theme	localStorageテーマ値のキー名
システム検出	有効	システムが選択された場合、OSテーマを自動的に検出
アプリケーションスコープ	グローバル	テーマはアプリケーション全体に均一に適用されます

関連

• ユーザープロファイルメニュー - アカウント設定と設定へのアクセス
• サイドバーナビゲーション - セクション間の移動
• 言語スイッチャー - インターフェース言語の変更