> For the complete documentation index, see [llms.txt](https://docs.chamilo.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chamilo.org/2.x/ja/gaido-2/developer-guide/theming/color-themes.md).
# カラーテーマ
Chamilo 2.0 では、データベース駆動型のカラーテーマシステムを採用しています。テーマは管理UIを通じて管理され、データベースに保存され、CSSファイルとしてディスクに書き込まれます。アクセスURLごとにカスタマイズが可能で、複数のURLを持つインストール環境では異なる視覚的アイデンティティを持つことができます。
## データモデル
テーマシステムを駆動する2つのエンティティがあります：
**`ColorTheme`** (`src/CoreBundle/Entity/ColorTheme.php`)
| フィールド | タイプ | 説明 |
| ----------- | ------------ | ------------------------------------------------------------------------ |
| `id` | int | 主キー |
| `title` | string | 人間が読める名前 |
| `slug` | string | `title` から自動生成（例：`"My Theme"` → `my-theme`）；`var/themes/` 内のディレクトリ名として使用 |
| `variables` | array (JSON) | CSSカスタムプロパティ名と値のマップ（例：`{"--color-primary-base": "46 117 163"}`） |
**`AccessUrlRelColorTheme`** (`src/CoreBundle/Entity/AccessUrlRelColorTheme.php`)
`ColorTheme` と `AccessUrl` を関連付けます。`active` ブールフラグは、そのURLに対して現在アクティブなテーマを示します。1つのアクセスURLに対して同時にアクティブにできるテーマは1つだけです。
## テーマの保存方法
テーマがAPIを通じて作成または更新されると、`ColorThemeStateProcessor` がCSSファイルを生成し、Flysystem の `themes_filesystem`（`var/themes/` に裏付けられる）に書き込みます：
```
var/themes/
└── {slug}/
└── colors.css ← ColorTheme.variables から生成
```
生成された `colors.css` はすべての変数を `:root` ブロックでラップします：
```css
:root {
--color-primary-base: 46 117 163;
--color-secondary-base: 243 126 47;
--color-tertiary-base: 51 51 51;
/* ... */
}
```
値はスペースで区切られたRGBチャンネルトリプレット（`rgb()` ではない）で、Tailwind が追加の設定なしで `bg-primary/50` のような不透明度のバリエーションを構成できるようにしています。
## テーマ解決の優先順位
`ThemeHelper::getVisualTheme()` は、任意のページに適用するテーマスラグを以下の順序で解決します：
1. **現在の AccessUrl のアクティブなテーマ** — `active = true` の `AccessUrlRelColorTheme` レコード
2. **ユーザーが選択したテーマ** — `profile.user_selected_theme` プラットフォーム設定が有効な場合、`User` エンティティに保存されたテーマ
3. **コーステーマ** — `course.allow_course_theme` プラットフォーム設定が有効な場合、`course_theme` コース設定
4. **学習パステーマ** — `allow_learning_path_theme` コース設定が有効な場合、LP の `$lp_theme_css` 値
5. **`THEME_FALLBACK` 環境変数** — `.env` で `THEME_FALLBACK='chamilo'` として設定
6. **デフォルト** — `chamilo`（`ThemeHelper::DEFAULT_THEME` としてハードコード）
## アセットの提供
テーマアセットは `ThemeController`（`src/CoreBundle/Controller/ThemeController.php`）によって `/themes` プレフィックス下で提供されます。
| ルート | 目的 |
| ------------------------------------ | -------------------------------------------------------------------- |
| `GET /themes/{name}/{path}` | 任意のテーマアセット（CSS、JS、画像）を提供；リクエストされたテーマに見つからない場合は `chamilo` テーマにフォールバック |
| `GET /themes/{slug}/logo/{type}` | 優先ロゴ（`header` または `email`）を提供、SVG → PNG フォールバック付き |
| `POST /themes/{slug}/logos` | ヘッダー/メールロゴ（SVG および/または PNG）をアップロード |
| `DELETE /themes/{slug}/logos/{type}` | 特定のロゴを削除 |
一般的なアセットルート（`/{name}/{path}`）は、要求されたテーマからファイルが見つからない場合に自動的に `chamilo` デフォルトテーマにフォールバックするため、テーマは実際にオーバーライドするファイルのみを含める必要があります。
## テンプレートでのテーマの読み込み方法
`head.html.twig` レイアウトテンプレートは、Twig ヘルパー関数を介してアクティブなテーマのアセットを読み込みます：
```twig
{# テーマのカラーバリエーションを注入 #}
{{ theme_asset_link_tag('colors.css') }}
{# TinyMCE カラーパレットを注入 #}
{{ theme_asset_script_tag('tiny-settings.js') }}
{# 他のテーマアセットを参照 #}
```
3つの Twig 関数（`ChamiloExtension` に登録）は、`ThemeHelper` を通じてアセットパスを解決し、上記と同じフォールバックチェインを適用します：
| 関数 | 戻り値 |
| -------------------------------- | -------------------------------- |
| `theme_asset('path')` | 解決されたテーマ内のアセットへのURL |
| `theme_asset_link_tag('path')` | 完全な `` タグ |
| `theme_asset_script_tag('path')` | 完全な `