Dokumentation der Designfarben

Kurzübersicht

Hier findest du eine kurze Zuordnung einiger Farben in den JSON-Dateien benutzerdefinierter Designs.

Viele Farben folgen den Farbrollen von Material Design 3. Einige Farben werden in Symfonium gezielt eingesetzt, um mehr Designvariationen zu ermöglichen:

surface: Standardhintergrund.
surfaceContainer: Navigationsleisten und Standardfarbe des Miniplayers.
surfaceContainerHigh: Hintergründe von Dialogen, Kopfzeilen der von unten eingeblendeten Dialoge, Karten und bei Verwendung mit Transparenz auch Überlagerungshintergründe.
surfaceContainerHighest: Kurz eingeblendete Meldungen.
surfaceContainerLow: Verknüpfungen, einige Schaltflächen, Hintergründe für fehlende Bilder und gefilterte Bibliotheken.
surfaceContainerLowest: Hintergrund der von unten eingeblendeten Dialoge.
outlineVariant: Standardrollen von Material Design 3 und bei Verwendung mit einem Alpha-Wert die aktuell aktive Zeile.
onSurfaceVariant: Standardrollen von Material Design 3 und bei Verwendung mit einem Alpha-Wert Untertiteltexte.

Designstruktur

Die Symfonium-Oberfläche besteht aus mehreren Komponenten, etwa einer Suchleiste. Jede Komponente enthält einzelne Elemente, beispielsweise den Hintergrund und den Text der Suchleiste. Jedem Element ist eine Farbrolle zugewiesen. In der JSON-Datei des benutzerdefinierten Designs legst du den genauen Farbwert für jede Rolle fest. Diese Werte bestimmen die Farben der Elemente und das gesamte Erscheinungsbild der Komponenten.

Die Symfonium-Oberfläche besteht aus Komponenten, die ein oder mehrere Elemente enthalten. Jedem Element ist eine Farbrolle mit einem bestimmten Farbwert zugewiesen.

Komponenten

In den folgenden Screenshots sind Komponenten rot und Elemente grün beschriftet. Nicht alle Elemente einer Komponente sind immer abgebildet; du findest sie jedoch in der Komponententabelle.

Einige Ansichten sind konfigurierbar und können je nach deinen Einstellungen anders aussehen. Dies gilt besonders für die Startseite. Die Bezeichnungen in den Tabellen bleiben auf Englisch, damit sie mit den beschrifteten Screenshots übereinstimmen.

Startseite und Hauptnavigation

Die Startseite besteht aus Abschnitten mit einer optionalen Überschrift und einer Medienliste. Du kannst die Listenlayouts und Verknüpfungsschaltflächen konfigurieren, in jedem Layout werden jedoch dieselben Elemente verwendet.

Die Hauptnavigation ist normalerweise immer sichtbar, außer in den Einstellungen oder wenn sie deaktiviert wurde, und befindet sich in einem Container über dem Hauptinhalt der App.

Beschriftete Symfonium-Startseite mit Hauptnavigation und Designkomponenten

Anzeigestile für Medien und Verknüpfungen auf der Startseite

In den verschiedenen Abschnittslayouts der Startseite werden dieselben Elemente verwendet. Die Beispiele sind unten nebeneinander dargestellt.

Beschriftete Medien- und Verknüpfungsstile auf der Symfonium-Startseite

Albumansicht und Miniplayer

Neben dem Cover enthält die Albumansicht Schaltflächen und die Titelliste. Wie die Hauptnavigation erscheint der Miniplayer über dem Hauptinhalt der App.

Beschriftete Symfonium-Albumansicht mit Miniplayer und Designkomponenten

Listenansicht und Auswahl

Interpreten, Alben, Genres und andere Medien können in konfigurierbaren Listen angezeigt werden. In verschiedenen Layouts werden dieselben Elemente verwendet. Wenn du Listeneinträge auswählst, erscheint ein Aktionsmenü über dem Listeninhalt.

Beschriftete Symfonium-Listenansicht mit Auswahl und Designkomponenten

Von unten eingeblendete Dialoge

Diese Dialoge enthalten kontextbezogene Informationen oder Menüs, schieben sich vorübergehend über die App und verdecken dabei auch die Hauptnavigation.

Beschrifteter, von unten eingeblendeter Symfonium-Dialog mit Designkomponenten

Suchansicht

Die Suchansicht enthält oben den Suchbereich und darunter die Ergebnisliste.

Einstellungen

Die Einstellungsseiten bestehen hauptsächlich aus strukturierten Textlisten mit Schaltern oder auswählbaren Einträgen. Einige Einträge können auch neu angeordnet werden.

Beschriftete Symfonium-Einstellungsansicht mit Designkomponenten

Listen der Komponenten, Elemente und Farbrollen

Die folgenden Tabellen zeigen die Beziehungen zwischen Komponenten, Elementen und Farbrollen.

Komponenten (Elementgruppen)

Einzelne Elemente sind zu Komponenten zusammengefasst. Wähle ein Element aus, um zur Elementtabelle zu springen und seine zugewiesene Farbrolle anzuzeigen.

Komponente	Besteht aus Elementen
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

Elemente

Die Farbrolle bestimmt die endgültige Farbe eines Elements. Wähle eine Farbrolle aus, um zur Farbrollentabelle zu springen und alle Elemente mit dieser Rolle anzuzeigen.

Element	Hat die Farbrolle
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	Nicht dokumentiert
Text Input Border	Nicht dokumentiert
Text Input Border (selected)	Nicht dokumentiert
Text Input Text	Nicht dokumentiert
Text Input Title	Nicht dokumentiert
Three dots	`onSurface`
Top Bar Active Icon	`primary`
Top Bar Background	`surfaceContainerHigh`
Top Bar Icon	`onSurface`

Farbrollen

Diese Liste zeigt alle Farbrollen und die ihnen zugewiesenen Elemente. Die JSON-Datei des Designs definiert den Farbwert jeder Rolle.

Farbrolle	Ist Elementen zugewiesen
`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