# 画面設計書 57-Theme Variants

## 概要

本ドキュメントは、AvaloniaフレームワークのControlCatalogサンプルアプリケーションにおけるTheme Variantsデモページの画面設計書です。テーマバリアント機能によるUI外観の動的切り替えをデモンストレーションします。

### 本画面の処理概要

本画面は、Avaloniaフレームワークが提供するテーマバリアント（ThemeVariant）機能を実演するデモページです。ダーク、ライト、カスタム（Pink）テーマの切り替えにより、アプリケーションUIの外観をリアルタイムで変更できることを示します。

**業務上の目的・背景**：テーマバリアントは、ユーザーの好みやシステム設定に応じてアプリケーションの外観を切り替える機能で、現代のアプリケーション開発において重要な要素です。ダークモードはバッテリー消費削減、目の疲労軽減などのメリットがあり、多くのユーザーが好んで使用しています。本デモページは、開発者がThemeVariantScope、ThemeDictionaries、カスタムテーマ定義を理解し、自アプリケーションにテーマ切り替え機能を実装するための参考資料として機能します。

**画面へのアクセス方法**：ControlCatalogアプリケーションのメインウィンドウから、HamburgerMenuナビゲーションを使用して「Theme Variants」項目を選択することで本画面にアクセスします。

**主要な操作・処理内容**：
1. テーマ選択ComboBoxでDefault/Dark/Light/Pinkテーマを選択
2. 選択したテーマに応じて背景色とコントロールスタイルが即座に変更
3. Username/Passwordテキストボックスの入力（テーマに応じたスタイル適用）
4. Loginボタンの表示確認（テーマに応じたスタイル適用）

**画面遷移**：HamburgerMenuから他のデモページへ遷移可能。本ページからの特別な遷移先はありません。

**権限による表示制御**：本デモページでは権限による表示制御は実装されていません。すべての機能がすべてのユーザーに公開されます。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 65 | ThemeVariant | 主機能 | テーマバリアントのデモ。ライト・ダーク等のテーマ切り替え |
| 64 | ControlTheme | 補助機能 | コントロールテーマの適用と切り替え |

## 画面種別

デモ / 機能確認

## URL/ルーティング

ControlCatalogアプリケーション内のHamburgerMenuナビゲーションによるページ遷移（直接URLなし）

## 入出力項目

| 項目名 | 項目種別 | 入力/出力 | データ型 | 説明 |
|--------|----------|-----------|----------|------|
| SelectedTheme | ComboBox | 入出力 | ThemeVariant | 選択されたテーマ |
| Username | TextBox | 入出力 | string | ユーザー名入力 |
| Password | TextBox | 入出力 | string | パスワード入力 |

## 表示項目

| 表示項目 | 説明 |
|----------|------|
| テーマ選択ComboBox | Default/Dark/Light/Pinkの4つの選択肢 |
| Background Border | 選択テーマに応じた背景色 |
| "Username:"ラベル | ユーザー名入力欄のラベル |
| "Password:"ラベル | パスワード入力欄のラベル |
| UsernameテキストボックS | プレースホルダー"Input here" |
| Passwordテキストボックス | プレースホルダー"Input here" |
| Loginボタン | ログイン実行ボタン |

## イベント仕様

### 1-テーマ選択変更

ComboBoxのSelectionChangedイベントで、選択されたThemeVariantをThemeVariantScope.RequestedThemeVariantに設定し、即座にテーマを切り替えます。

### 2-Pinkテーマ適用

Pinkテーマ選択時は、カスタム定義されたThemeDictionaryが適用され、ピンク系の色でコントロールがスタイリングされます。

## データベース更新仕様

### 操作別データベース影響一覧

本画面はUIデモのため、データベース操作は発生しません。

## メッセージ仕様

本画面にはメッセージ表示機能は実装されていません。

## 例外処理

本画面はデモ用途のため、特別な例外処理は実装されていません。

## 備考

- ThemeVariant.Defaultはシステム設定に従います
- ThemeVariantScope内のコントロールのみがテーマ切り替えの影響を受けます
- カスタムテーマはThemeDictionaryのKeyに独自のThemeVariantを指定することで定義できます
- Fluentテーマとデフォルトテーマの両方のリソースキーをオーバーライドすることで、両対応のカスタムテーマを作成できます

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

ThemePageはカスタムThemeVariant（Pink）を定義し、ThemeDictionariesでテーマごとのリソースを管理しています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ThemePage.axaml.cs | `samples/ControlCatalog/Pages/ThemePage.axaml.cs` | Pinkカスタムテーマの定義とSelectionChangedハンドラを確認 |

**読解のコツ**: ThemeVariantは静的プロパティとして定義され、ThemeDictionaryのKeyとして使用されます。Pinkテーマはライトテーマを継承（ThemeVariant.Light）しています。

#### Step 2: エントリーポイントを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ThemePage.axaml | `samples/ControlCatalog/Pages/ThemePage.axaml` | ThemeDictionariesとThemeVariantScopeの構造を確認 |
| 2-2 | ThemePage.axaml.cs | `samples/ControlCatalog/Pages/ThemePage.axaml.cs` | テーマ切り替えロジックを確認 |

**主要処理フロー**:
1. **行9**: 静的Pink ThemeVariantの定義（ThemeVariant.Lightを継承）
2. **行15-21**: ItemsSourceに4つのThemeVariant（Default、Dark、Light、Pink）を設定
3. **行24-29**: SelectionChangedイベントでRequestedThemeVariantを更新
4. **行10-54**: ThemeDictionariesでDark、Light、Pinkのリソースを定義
5. **行57-78**: ThemeVariantScopeで囲まれたコンテンツ領域

#### Step 3: ThemeDictionaryの構造を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ThemePage.axaml（行10-54） | `samples/ControlCatalog/Pages/ThemePage.axaml` | 各テーマのリソース定義 |

**主要処理フロー**:
- **行13-15**: Darkテーマ - DemoBackground=Black
- **行16-18**: Lightテーマ - DemoBackground=White
- **行19-52**: Pinkテーマ - カスタム色定義
  - **行20**: DemoBackground=#ffe5ea
  - **行21-26**: ボタン用ブラシ（Normal/PointerOver/Pressed）
  - **行29-40**: Fluentテーマリソースのオーバーライド
  - **行47-51**: デフォルトテーマリソースのオーバーライド

### プログラム呼び出し階層図

```
MainView (HamburgerMenu)
    │
    └─ ThemePage (UserControl)
           │
           ├─ UserControl.Resources
           │      └─ ResourceDictionary
           │             └─ ThemeDictionaries
           │                    ├─ Dark (Key="Dark")
           │                    │      └─ DemoBackground: Black
           │                    │
           │                    ├─ Light (Key="Light")
           │                    │      └─ DemoBackground: White
           │                    │
           │                    └─ Pink (Key=ThemePage.Pink)
           │                           ├─ DemoBackground: #ffe5ea
           │                           ├─ Button Brushes
           │                           ├─ TextControl Brushes
           │                           └─ ComboBox Brushes
           │
           └─ ThemeVariantScope
                  │
                  ├─ Border (Background=DemoBackground)
                  │
                  └─ Grid
                         ├─ ComboBox (テーマ選択)
                         ├─ TextBlock "Username:"
                         ├─ TextBlock "Password:"
                         ├─ TextBox (Username)
                         ├─ TextBox (Password)
                         └─ Button "Login"
```

### データフロー図

```
[入力]                      [処理]                         [出力]

ComboBox選択 ───▶ SelectionChanged ───▶ ThemeVariantScope.RequestedThemeVariant
                        │
                        └──▶ ThemeDictionary適用 ───▶ DynamicResourceバインド更新
                                    │
                                    └──▶ コントロールスタイル変更
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ThemePage.axaml | `samples/ControlCatalog/Pages/ThemePage.axaml` | ソース | ページのXAML定義、ThemeDictionaries |
| ThemePage.axaml.cs | `samples/ControlCatalog/Pages/ThemePage.axaml.cs` | ソース | コードビハインド、テーマ切り替えロジック |
| ThemeVariant.cs | `src/Avalonia.Styling/ThemeVariant.cs` | フレームワーク | テーマバリアント定義 |
| ThemeVariantScope.cs | `src/Avalonia.Controls/ThemeVariantScope.cs` | フレームワーク | テーマスコープコントロール |
