Dokumentation der Theme-Farben

Kurzübersicht

Hier finden Sie eine kurze Zuordnung einiger Farben in den JSON-Dateien benutzerdefinierter Themes.

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

• surface: Standardhintergrund.
• surfaceContainer: Navigationsleisten und Standardfarbe des kompakten Players.
• surfaceContainerHigh: Hintergründe von Dialogen, Kopfzeilen von unteren Bedienfeldern, Karten und bei Verwendung mit Transparenz auch Überlagerungshintergründe.
• surfaceContainerHighest: Kurzmeldungen.
• surfaceContainerLow: Verknüpfungen, einige Schaltflächen, Hintergründe für fehlende Bilder und gefilterte Bibliotheken.
• surfaceContainerLowest: Hintergrund der unteren Bedienfelder.
• outlineVariant: Standardrollen von Material Design 3 und bei Verwendung mit Transparenz die aktuell aktive Zeile.
• onSurfaceVariant: Standardrollen von Material Design 3 und bei Verwendung mit Transparenz Untertiteltexte.

Theme-Struktur

Die Symfonium-Benutzeroberflä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 Themes legen Sie den genauen Farbwert für jede Rolle fest. Diese Werte bestimmen die Farben der Elemente und das gesamte Erscheinungsbild der Komponenten.

Die Symfonium-Benutzeroberflä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; Sie finden sie jedoch in der Komponententabelle.

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

Startbildschirm und Hauptnavigation

Der Startbildschirm besteht aus Abschnitten mit einer optionalen Überschrift und einer Medienliste. Sie können 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. Sie erscheint in einem Container über dem Hauptinhalt der App.

Anzeigestile für Medien und Verknüpfungen auf dem Startbildschirm

In den verschiedenen Abschnittslayouts des Startbildschirms werden dieselben Elemente verwendet. Sie sind unten nebeneinander dargestellt.

Albumansicht und Mini-Player

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

Listenansicht und Auswahl

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

Untere Bedienfelder

Untere Bedienfelder enthalten kontextbezogene Informationen oder Menüs. Sie schieben sich vorübergehend über die App, einschließlich der Hauptnavigation.

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.

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ählen Sie 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ählen Sie 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 Themes 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

Verwandte Seiten

Benutzerdefinierte Symfonium-ThemesErstellen, importieren, bearbeiten, exportieren und teilen Sie benutzerdefinierte Farb-Themes für Symfonium.

Benutzeroberfläche – Theme, Schriftart und FarbenKonfigurieren Sie Theme, Schriftart, Farben und benutzerdefinierte Themes der Symfonium-Benutzeroberfläche.

Zurück zum Wiki