テーマカラーのドキュメント

概要

カスタムテーマの JSON ファイルで使用される主な色の対応を示します。

多くの色は Material Design 3 のカラーロールに従います。一部の色には、テーマのバリエーションを増やすために Symfonium 固有の用途があります。

• surface：デフォルトの背景。
• surfaceContainer：ナビゲーションバーとコンパクトプレーヤーのデフォルト色。
• surfaceContainerHigh：ダイアログの背景、ボトムシートのヘッダー、カード、およびアルファ値を使用したオーバーレイの背景。
• surfaceContainerHighest：スナックバー。
• surfaceContainerLow：ショートカット、一部のボタン、画像がない場合の背景、フィルターされたライブラリ。
• surfaceContainerLowest：ボトムシートの背景。
• outlineVariant：Material Design 3 のデフォルトロール、およびアルファ値を使用した現在アクティブな行。
• onSurfaceVariant：Material Design 3 のデフォルトロール、およびアルファ値を使用したサブタイトルテキスト。

テーマの構造

Symfonium のインターフェースは、検索バーなどの複数の_コンポーネント_で構成されます。各コンポーネントには、検索バーの背景やテキストなどの個別の_要素_があります。それぞれの要素には_カラーロール_が割り当てられます。カスタムテーマの JSON ファイルでは、各ロールに適用する正確なカラー値を定義します。この値によって各要素の色とコンポーネント全体の外観が決まります。

Symfonium のインターフェースはコンポーネントで構成され、各コンポーネントには 1 つ以上の要素があります。それぞれの要素には、特定のカラー値を持つカラーロールが割り当てられます。

コンポーネント

以下のスクリーンショットでは、コンポーネントを赤、要素を緑で示しています。コンポーネントに属するすべての要素が画像に表示されているとは限りませんが、コンポーネント表で確認できます。

一部の画面、特にホーム画面は設定によって表示が異なる場合があります。表のラベルは注釈付きスクリーンショットと一致させるため、英語のまま記載しています。

ホーム画面とメインナビゲーション

ホーム画面は、任意の見出しとメディアリストを持つセクションで構成されます。リストのレイアウトやショートカットボタンは設定できますが、どのレイアウトでも同じ要素が使われます。

メインナビゲーションは、設定画面を開いている場合や無効にしている場合を除き、通常は常に表示されます。アプリのメインコンテンツ上にコンテナとして表示されます。

ホーム画面のメディアとショートカットボタンの表示スタイル

ホーム画面の異なるセクションレイアウトでも同じ要素が使われます。以下では各レイアウトを並べて示します。

アルバム表示とミニプレーヤー

アルバム表示には、カバー画像のほかにボタンとトラックリストがあります。ミニプレーヤーはメインナビゲーションと同様に、アプリのメインコンテンツ上に表示されます。

リスト表示と選択

アーティスト、アルバム、ジャンルなどのメディアは、設定可能なリストで表示できます。異なるレイアウトでも同じ要素が使われます。リスト内の項目を選択すると、リストの上にアクションメニューが表示されます。

ボトムシート

ボトムシートには、状況に応じた情報やメニューが表示されます。メインナビゲーションを含むアプリの上に一時的にスライドして表示されます。

検索画面

検索画面は、上部の検索エリアと下部の結果リストで構成されます。

設定

設定ページは主に、スイッチや選択可能な項目を含む構造化されたテキストリストで構成されます。一部の項目は並べ替えることもできます。

コンポーネント、要素、カラーロールの一覧

以下の表は、コンポーネント、要素、カラーロールの関係を示します。

コンポーネント（要素グループ）

個々の要素はコンポーネントにまとめられています。要素を選択すると要素表に移動し、割り当てられたカラーロールを確認できます。

コンポーネント	構成する要素
Defaults	Default Background Default Text Default Separator Home Icon Lowest Container Low Container High Container Highest Container Category Heading
Chip	Chip Border Chip Text Chip Icon Chip (Selected) Background Chip (Selected) Text
Shortcut Button	Shortcut Background Shortcut Icon Shortcut Text
Placeholder Image	Placeholder Background Placeholder Icon
Album Button	Play Overlay Background Play Overlay Icon Default Text Subtitle
Top Button Bar	Top Bar Background Top Bar Icon Top Bar Active Icon
Main Navigation	Navigation Background Navigation Icon Navigation Icon (Selected) Background Navigation Icon (Selected) Navigation Label Navigation Label (Selected)
Drag-and-drop Bar	Drag-and-drop Background Drag-and-drop Button Background Drag-and-drop Icon
High Importance Button	HI Button Background HI Button Text
Low Importance Button	LI Button Border LI Button Text
Album Tracklist	Default Text Subtitle Three dots Active Background
Album Details	Default Text Subtitle
List	Default Text Subtitle
Selectable Indicator	Selectable Border Selectable (Selected) Background Selectable (Selected) Icon
Select Action Menu	Select Action Background Select Action Icon
Notification Modal	Notification Background Default Text
Bottom Sheet	Bottom Sheet Background Bottom Sheet Header Background Default Text
Search Bar	Search Bar Background Search Bar Text
Text Input	Text Input Border Text Input Border (selected) Text Input Background Text Input Text Text Input Title
Dropdown Selector	Dropdown Border Dropdown Border (selected) Dropdown Background Dropdown Box Background Dropdown Text Dropdown Title
Switch	Switch (Off) Background Switch (On) Background Switch (Off) Border Switch (On) Icon

要素

カラーロールによって要素の最終的な色が決まります。カラーロールを選択するとカラーロール表に移動し、そのロールを使うすべての要素を確認できます。

要素	割り当てられたカラーロール
Active Background	outlineVariant
Bottom Sheet Background	surfaceContainerLowest
Bottom Sheet Header Background	surfaceContainerHigh
Category Heading	primary
Chip (Selected) Background	secondaryContainer
Chip (Selected) Text	onSecondaryContainer
Chip Border	outline
Chip Icon	primary
Chip Text	onSurfaceVariant
Default Background	surface
Default Separator	secondary
Default Text	onSurface
Drag-and-drop Background	surfaceContainer
Drag-and-drop Button Background	tertiaryContainer
Drag-and-drop Icon	onTertiaryContainer
Dropdown Background	surfaceContainerHighest
Dropdown Border	onSurfaceVariant
Dropdown Border (selected)	primary
Dropdown Box Background	surfaceContainer
Dropdown Text	onSurface
Dropdown Title	onSurfaceVariant
HI Button Background	primary
HI Button Text	onPrimary
High Container	surfaceContainerHigh
Highest Container	surfaceContainerHighest
Home Icon	primary
LI Button Border	outline
LI Button Text	primary
Low Container	surfaceContainerLow
Lowest Container	surfaceContainerLowest
Navigation Background	surfaceContainer
Navigation Icon	onSurfaceVariant
Navigation Icon (Selected)	onSecondaryContainer
Navigation Icon (Selected) Background	secondaryContainer
Navigation Label	onSurfaceVariant
Navigation Label (Selected)	onSurface
Notification Background	surfaceContainerHighest
Placeholder Background	surfaceContainerLow
Placeholder Icon	onSurface
Play Overlay Background	surfaceContainerHigh
Play Overlay Icon	secondary
Search Bar Background	secondaryContainer
Search Bar Text	onSecondaryContainer
Select Action Background	primary
Select Action Icon	onPrimary
Selectable (Selected) Background	primary
Selectable (Selected) Icon	onPrimary
Selectable Border	primary
Shortcut Background	surfaceContainerLow
Shortcut Icon	primary
Shortcut Text	onSurface
Subtitle	onSurfaceVariant
Switch (Off) Background	surfaceContainerHighest
Switch (Off) Border	outline
Switch (On) Background	primary
Switch (On) Icon	onPrimary
Text Input Background	未記載
Text Input Border	未記載
Text Input Border (selected)	未記載
Text Input Text	未記載
Text Input Title	未記載
Three dots	onSurface
Top Bar Active Icon	primary
Top Bar Background	surfaceContainerHigh
Top Bar Icon	onSurface

カラーロール

各カラーロールと、それが割り当てられている要素の一覧です。各ロールのカラー値はテーマの JSON ファイルで定義します。

カラーロール	割り当て先の要素
primary	Category Heading Chip Icon Dropdown Border (selected) HI Button Background Home Icon LI Button Text Select Action Background Selectable (Selected) Background Selectable Border Shortcut Icon Switch (On) Background Top Bar Active Icon
onPrimary	HI Button Text Select Action Icon Selectable (Selected) Icon Switch (On) Icon
secondary	Default Separator Play Overlay Icon
onSecondary	—
tertiary	—
onTertiary	—
primaryContainer	—
onPrimaryContainer	—
secondaryContainer	Chip (Selected) Background Navigation Icon (Selected) Background Search Bar Background
onSecondaryContainer	Chip (Selected) Text Navigation Icon (Selected) Search Bar Text
tertiaryContainer	Drag-and-drop Button Background
onTertiaryContainer	Drag-and-drop Icon
error	—
onError	—
errorContainer	—
onErrorContainer	—
surface	Default Background
onSurface	Default Text Dropdown Text Navigation Label (Selected) Placeholder Icon Shortcut Text Three dots Top Bar Icon
onSurfaceVariant	Chip Text Dropdown Border Dropdown Title Navigation Icon Navigation Label Subtitle
outline	Chip Border LI Button Border Switch (Off) Border
outlineVariant	Active Background
surfaceContainerLowest	Bottom Sheet Background Lowest Container
surfaceContainerLow	Low Container Placeholder Background Shortcut Background
surfaceContainer	Drag-and-drop Background Dropdown Box Background Navigation Background
surfaceContainerHigh	Bottom Sheet Header Background High Container Play Overlay Background Top Bar Background
surfaceContainerHighest	Dropdown Background Highest Container Notification Background Switch (Off) Background

関連ページ

Symfonium カスタムテーマSymfonium のカスタムカラーテーマを作成、インポート、編集、エクスポート、共有します。

インターフェース - テーマ、フォント、色Symfonium のインターフェースのテーマ、フォント、色、カスタムテーマを設定します。

Wiki に戻る