Documentación de colores de tema

Resumen breve

Aquí tienes una correspondencia rápida de algunos colores utilizados en los archivos JSON de temas personalizados.

Muchos colores siguen los roles de color de Material Design 3. Algunos colores tienen usos específicos en Symfonium para permitir más variaciones de tema:

surface: fondo predeterminado.
surfaceContainer: barras de navegación y color predeterminado del reproductor compacto.
surfaceContainerHigh: fondos de cuadros de diálogo, encabezados de paneles inferiores, tarjetas y fondos superpuestos cuando se utiliza con transparencia.
surfaceContainerHighest: avisos temporales.
surfaceContainerLow: accesos directos, algunos botones, fondos cuando no hay una imagen y bibliotecas filtradas.
surfaceContainerLowest: fondo de los paneles inferiores.
outlineVariant: usos predeterminados de Material Design 3 y, con transparencia, la fila activa.
onSurfaceVariant: usos predeterminados de Material Design 3 y, con transparencia, el texto de los subtítulos.

Estructura de los temas

La interfaz de Symfonium consta de varios componentes, como una barra de búsqueda. Cada componente contiene elementos individuales, como el fondo y el texto de esa barra. Cada elemento tiene asignado un rol de color. En el archivo JSON del tema personalizado, defines el valor exacto de cada rol. Esos valores determinan los colores de los elementos y el aspecto general de cada componente.

La interfaz de Symfonium consta de componentes, que contienen uno o más elementos. Cada elemento tiene asignado un rol de color con un valor de color específico.

Componentes

Las siguientes capturas muestran los componentes en rojo y los elementos en verde. No todos los elementos de cada componente aparecen en las capturas, pero se enumeran en la tabla de componentes.

Algunas pantallas son configurables y pueden tener un aspecto diferente según tus ajustes, especialmente la página de inicio. Los nombres de componentes y elementos de las tablas se conservan en inglés como identificadores de referencia para que coincidan con las capturas anotadas.

Página de inicio y navegación principal

La página de inicio consta de secciones con un encabezado opcional y una lista de medios. Puedes configurar la disposición de las listas y los botones de acceso directo, pero se utilizan los mismos elementos en todos los diseños.

La navegación principal suele estar visible, salvo en Ajustes o cuando está desactivada. Aparece en un contenedor sobre el contenido principal de la aplicación.

Página de inicio y navegación principal de Symfonium con componentes de tema anotados

Estilos de visualización de medios y accesos directos de la página de inicio

Los mismos elementos se utilizan en las distintas disposiciones de las secciones de la página de inicio, que se muestran juntas a continuación.

Estilos de medios y accesos directos de la página de inicio de Symfonium con anotaciones

Vista del álbum y reproductor compacto

Además de la carátula, la vista del álbum contiene botones y la lista de pistas. Al igual que la navegación principal, el reproductor compacto aparece sobre el contenido principal de la aplicación.

Vista de lista y selecciones

Los artistas, álbumes, géneros y otros medios se pueden mostrar en listas configurables. Los mismos elementos se utilizan en distintas disposiciones. Al seleccionar elementos, aparece un menú de acciones sobre el contenido de la lista.

Vista de lista y selección de Symfonium con componentes de tema anotados

Paneles inferiores

Los paneles inferiores contienen información contextual o menús. Se deslizan temporalmente sobre la aplicación, incluida la navegación principal.

Panel inferior de Symfonium con componentes de tema anotados

Pantalla de búsqueda

La pantalla de búsqueda contiene el área de búsqueda en la parte superior y la lista de resultados debajo.

Ajustes

Las páginas de ajustes constan principalmente de listas de texto estructuradas con interruptores o elementos seleccionables. Algunos elementos también se pueden reordenar.

Listas de componentes, elementos y roles de color

Las siguientes tablas muestran las relaciones entre componentes, elementos y roles de color.

Componentes (grupos de elementos)

Los elementos individuales se agrupan en componentes. Selecciona un elemento para ir a la tabla de elementos y ver su rol de color asignado.

Componente	Se compone de los elementos
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

Elementos

El rol de color determina el color final de un elemento. Selecciona un rol para ir a la tabla de roles de color y ver todos los elementos que lo usan.

Elemento	Tiene el rol de color
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	No documentado
Text Input Border	No documentado
Text Input Border (selected)	No documentado
Text Input Text	No documentado
Text Input Title	No documentado
Three dots	`onSurface`
Top Bar Active Icon	`primary`
Top Bar Background	`surfaceContainerHigh`
Top Bar Icon	`onSurface`

Roles de color

Esta lista muestra cada rol de color y los elementos a los que se asigna. El archivo JSON del tema define el valor de color de cada rol.

Rol de color	Se asigna a los elementos
`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

Páginas relacionadas

Temas personalizados de SymfoniumCrea, importa, edita, exporta y comparte temas de color personalizados para Symfonium.

Ajustes – Interfaz – Tema, fuente y coloresConfigura el tema, la fuente, los colores y los temas personalizados de la interfaz de Symfonium.

Volver a la wiki