Documentation des couleurs de thème

Présentation rapide

Voici une correspondance rapide de certaines couleurs dans les fichiers JSON de thème personnalisé.

De nombreuses couleurs suivent les rôles de couleur Material Design 3. Certaines couleurs ont des usages propres à Symfonium afin d’offrir davantage de variations de thème :

surface : arrière-plan par défaut.
surfaceContainer : barres de navigation et couleur par défaut du lecteur compact.
surfaceContainerHigh : arrière-plans des boîtes de dialogue, en-têtes des panneaux inférieurs, cartes et arrière-plans superposés avec transparence.
surfaceContainerHighest : notifications temporaires.
surfaceContainerLow : raccourcis, certains boutons, arrière-plans d’image manquante et bibliothèques filtrées.
surfaceContainerLowest : arrière-plan des panneaux inférieurs.
outlineVariant : rôles Material Design 3 par défaut et, avec transparence, ligne actuellement active.
onSurfaceVariant : rôles Material Design 3 par défaut et, avec transparence, texte des sous-titres.

Structure des thèmes

L’interface Symfonium se compose de plusieurs composants, comme une barre de recherche. Chaque composant contient des éléments individuels, tels que l’arrière-plan et le texte de la barre de recherche. Un rôle de couleur est attribué à chaque élément. Dans le fichier JSON du thème personnalisé, vous définissez la valeur de couleur exacte de chaque rôle. Ces valeurs déterminent la couleur des éléments et l’apparence générale de chaque composant.

L’interface Symfonium se compose de composants, qui contiennent un ou plusieurs éléments. Chaque élément reçoit un rôle de couleur possédant une valeur de couleur précise.

Composants

Les captures d’écran suivantes indiquent les composants en rouge et les éléments en vert. Les éléments d’un composant ne sont pas toujours tous affichés, mais ils figurent dans le tableau des composants.

Certains écrans sont configurables et peuvent différer selon vos paramètres, en particulier l’écran d’accueil. Les libellés des tableaux restent en anglais afin de correspondre aux captures d’écran annotées.

L’écran d’accueil se compose de sections avec un en-tête facultatif et une liste de médias. Vous pouvez configurer la disposition des listes et les boutons de raccourci, mais les mêmes éléments sont utilisés dans chaque disposition.

La navigation principale est normalement toujours visible, sauf dans les paramètres ou lorsqu’elle est désactivée. Elle apparaît dans un conteneur au-dessus du contenu principal de l’application.

Écran d’accueil et navigation principale de Symfonium avec composants de thème annotés

Styles d’affichage des médias et raccourcis de l’accueil

Les mêmes éléments sont utilisés dans les différentes dispositions des sections de l’écran d’accueil, présentées côte à côte ci-dessous.

Styles de médias et de raccourcis de l’accueil Symfonium avec annotations

Vue de l’album et mini-lecteur

Outre la pochette, la vue de l’album contient des boutons et la liste des pistes. Comme la navigation principale, le mini-lecteur apparaît au-dessus du contenu principal de l’application.

Vue en liste et sélections

Les artistes, albums, genres et autres médias peuvent être affichés dans des listes configurables. Les mêmes éléments sont utilisés dans les différentes dispositions. Lorsque vous sélectionnez des éléments, un menu d’actions apparaît au-dessus du contenu de la liste.

Panneaux inférieurs

Les panneaux inférieurs contiennent des informations contextuelles ou des menus. Ils glissent temporairement par-dessus l’application, y compris la navigation principale.

Panneau inférieur Symfonium avec composants de thème annotés

Écran de recherche

L’écran de recherche contient la zone de recherche en haut et la liste des résultats en dessous.

Paramètres

Les pages de paramètres se composent principalement de listes de texte structurées avec des interrupteurs ou des éléments sélectionnables. Certains éléments peuvent également être réorganisés.

Listes des composants, éléments et rôles de couleur

Les tableaux suivants présentent les relations entre les composants, les éléments et les rôles de couleur.

Composants (groupes d’éléments)

Les éléments individuels sont regroupés en composants. Sélectionnez un élément pour accéder au tableau des éléments et voir son rôle de couleur.

Composant	Composé des éléments
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

Éléments

Le rôle de couleur détermine la couleur finale d’un élément. Sélectionnez un rôle pour accéder au tableau des rôles de couleur et voir tous les éléments qui l’utilisent.

Élément	Possède le rôle de couleur
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	Non documenté
Text Input Border	Non documenté
Text Input Border (selected)	Non documenté
Text Input Text	Non documenté
Text Input Title	Non documenté
Three dots	`onSurface`
Top Bar Active Icon	`primary`
Top Bar Background	`surfaceContainerHigh`
Top Bar Icon	`onSurface`

Rôles de couleur

Cette liste présente chaque rôle de couleur et les éléments auxquels il est attribué. Le fichier JSON du thème définit la valeur de couleur de chaque rôle.

Rôle de couleur	Attribué aux éléments
`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

Pages liées

Thèmes personnalisés SymfoniumCréez, importez, modifiez, exportez et partagez des thèmes de couleurs personnalisés pour Symfonium.

Interface - Thème, police et couleursConfigurez les paramètres de thème, de police, de couleurs et de thèmes personnalisés de l’interface Symfonium.

Retour au Wiki