Documentazione dei colori dei temi

Breve panoramica

Ecco una rapida corrispondenza di alcuni colori nei file JSON dei temi personalizzati.

Molti colori seguono i ruoli colore di Material Design 3. Alcuni colori hanno usi specifici in Symfonium per consentire più varianti dei temi:

• surface: sfondo predefinito.
• surfaceContainer: barre di navigazione e colore predefinito del player compatto.
• surfaceContainerHigh: sfondi delle finestre, intestazioni dei pannelli inferiori, schede e sfondi degli overlay quando viene usato con il canale alfa.
• surfaceContainerHighest: snackbar.
• surfaceContainerLow: scorciatoie, alcuni pulsanti, sfondi delle immagini mancanti e librerie filtrate.
• surfaceContainerLowest: sfondo dei pannelli inferiori.
• outlineVariant: ruoli predefiniti di Material Design 3 e, quando usato con il canale alfa, riga attualmente attiva.
• onSurfaceVariant: ruoli predefiniti di Material Design 3 e, quando usato con il canale alfa, testo dei sottotitoli.

Struttura dei temi

L’interfaccia di Symfonium è composta da diversi componenti, ad esempio una barra di ricerca. Ogni componente contiene singoli elementi, come lo sfondo e il testo della barra di ricerca. A ciascun elemento è assegnato un ruolo colore. Nel file JSON del tema personalizzato definisci il valore esatto del colore per ogni ruolo. Questi valori determinano i colori degli elementi e l’aspetto complessivo di ogni componente.

L’interfaccia di Symfonium è composta da componenti, che contengono uno o più elementi. A ogni elemento è assegnato un ruolo colore con uno specifico valore colore.

Componenti

Nelle schermate seguenti i componenti sono indicati in rosso e gli elementi in verde. Gli elementi appartenenti a un componente non sono sempre mostrati nelle immagini, ma sono elencati nella tabella dei componenti.

Alcune schermate sono configurabili e possono avere un aspetto diverso a seconda delle impostazioni, in particolare la schermata Home. Le etichette nelle tabelle restano in inglese affinché corrispondano alle schermate annotate.

Schermata Home e navigazione principale

La schermata Home è composta da sezioni con un’intestazione facoltativa e un elenco multimediale. Puoi configurare i layout degli elenchi e i pulsanti delle scorciatoie, ma in ogni layout vengono usati gli stessi elementi.

La navigazione principale è normalmente sempre visibile, tranne nelle impostazioni o quando è disattivata. Compare in un contenitore sopra il contenuto principale dell’app.

Stili di visualizzazione dei media e dei pulsanti delle scorciatoie nella schermata Home

Gli stessi elementi vengono usati nei diversi layout delle sezioni della schermata Home, come mostrato affiancato di seguito.

Vista Album e mini player

Oltre all’immagine di copertina, la vista Album contiene pulsanti e l’elenco delle tracce. Come la navigazione principale, il mini player compare sopra il contenuto principale dell’app.

Vista a elenco e selezioni

Artisti, album, generi e altri media possono essere visualizzati in elenchi configurabili. Gli stessi elementi vengono usati nei diversi layout. Quando selezioni elementi dell’elenco, sopra il contenuto compare un menu delle azioni.

Pannelli inferiori

I pannelli inferiori contengono informazioni o menu contestuali. Scorrono temporaneamente sopra l’app, inclusa la navigazione principale.

Schermata di ricerca

La schermata di ricerca contiene l’area di ricerca in alto e l’elenco dei risultati nella parte inferiore.

Impostazioni

Le pagine delle impostazioni sono composte principalmente da elenchi di testo strutturati, con interruttori o elementi selezionabili. Alcuni elementi possono inoltre essere riordinati.

Elenchi di componenti, elementi e ruoli colore

Le tabelle seguenti mostrano le relazioni tra componenti, elementi e ruoli colore.

Componenti (gruppi di elementi)

I singoli elementi sono raggruppati in componenti. Seleziona un elemento per passare alla tabella degli elementi e vedere il ruolo colore assegnato.

Componente	Composto dagli elementi
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

Elementi

Il ruolo colore determina il colore finale di un elemento. Seleziona un ruolo colore per passare alla relativa tabella e vedere tutti gli elementi ai quali è assegnato.

Elemento	Ha il ruolo colore
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 documentato
Text Input Border	Non documentato
Text Input Border (selected)	Non documentato
Text Input Text	Non documentato
Text Input Title	Non documentato
Three dots	onSurface
Top Bar Active Icon	primary
Top Bar Background	surfaceContainerHigh
Top Bar Icon	onSurface

Ruoli colore

Questo elenco mostra ogni ruolo colore e gli elementi ai quali è assegnato. Il file JSON del tema definisce il valore colore di ogni ruolo.

Ruolo colore	Assegnato agli elementi
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

Pagine correlate

Temi personalizzati di SymfoniumCrea, importa, modifica, esporta e condividi temi cromatici personalizzati per Symfonium.

Interfaccia - Temi, font e coloriConfigura le impostazioni di temi, font, colori e temi personalizzati dell’interfaccia di Symfonium.

Torna alla Wiki