Documentação das cores do tema

Visão geral rápida

Veja abaixo um mapeamento resumido de algumas cores presentes nos arquivos JSON de temas personalizados.

Muitas cores seguem as funções de cor do Material Design 3. Algumas cores têm usos específicos no Symfonium para permitir mais variações de tema:

surface: plano de fundo padrão.
surfaceContainer: barras de navegação e cor padrão do reprodutor compacto.
surfaceContainerHigh: planos de fundo de caixas de diálogo, cabeçalhos de painéis inferiores, cartões e fundos de sobreposições quando há transparência.
surfaceContainerHighest: mensagens temporárias.
surfaceContainerLow: atalhos, alguns botões, planos de fundo de imagens ausentes e bibliotecas filtradas.
surfaceContainerLowest: plano de fundo dos painéis inferiores.
outlineVariant: funções padrão do Material Design 3 e, quando a transparência é aplicada, a linha ativa.
onSurfaceVariant: funções padrão do Material Design 3 e, quando a transparência é aplicada, o texto do subtítulo.

Estrutura dos temas

A interface do Symfonium é composta por vários componentes, como uma barra de pesquisa. Cada componente contém elementos individuais, como o plano de fundo e o texto da barra de pesquisa. Cada elemento recebe uma função de cor. No arquivo JSON do tema personalizado, você define o valor de cor exato de cada função. Esses valores determinam as cores dos elementos e a aparência geral de cada componente.

A interface do Symfonium consiste em componentes, que contêm um ou mais elementos. Cada elemento recebe uma função de cor com um valor de cor específico.

Componentes

As capturas de tela a seguir identificam os componentes em vermelho e os elementos em verde. Nem todos os elementos de um componente aparecem nas imagens, mas eles são listados na tabela de componentes.

Algumas telas são configuráveis e podem ter uma aparência diferente conforme suas configurações, especialmente a página inicial. Os rótulos das tabelas permanecem em inglês para corresponder às capturas de tela anotadas.

Página inicial e navegação principal

A página inicial é composta por seções com um cabeçalho opcional e uma lista de mídia. Você pode configurar a disposição das listas e os botões de atalho, mas os mesmos elementos são usados em cada disposição.

A navegação principal geralmente permanece visível, exceto nas configurações ou quando está desativada. Ela aparece em um contêiner sobre o conteúdo principal do aplicativo.

Página inicial e navegação principal do Symfonium com componentes do tema anotados

Estilos de exibição de mídia e atalhos da página inicial

Os mesmos elementos são usados nas diferentes disposições das seções da página inicial, mostradas lado a lado abaixo.

Estilos de mídia e atalhos da página inicial do Symfonium com anotações

Visualização do álbum e reprodutor compacto

Além da capa, a visualização do álbum contém botões e a lista de faixas. Assim como a navegação principal, o reprodutor compacto aparece sobre o conteúdo principal do aplicativo.

Visualização em lista e seleções

Artistas, álbuns, gêneros e outras mídias podem ser exibidos em listas configuráveis. Os mesmos elementos são usados nas diferentes disposições. Ao selecionar itens, um menu de ações aparece sobre o conteúdo da lista.

Visualização em lista e seleção do Symfonium com componentes de tema anotados

Painéis inferiores

Os painéis inferiores contêm informações contextuais ou menus. Eles deslizam temporariamente sobre o aplicativo, incluindo a navegação principal.

Painel inferior do Symfonium com componentes de tema anotados

Tela de pesquisa

A tela de pesquisa contém a área de pesquisa na parte superior e a lista de resultados abaixo.

Configurações

As páginas de configurações consistem principalmente em listas de texto estruturadas com controles ou itens selecionáveis. Alguns itens também podem ser reordenados.

Listas de componentes, elementos e funções de cor

As tabelas a seguir mostram as relações entre componentes, elementos e funções de cor.

Componentes (grupos de elementos)

Os elementos individuais são agrupados em componentes. Selecione um elemento para ir à tabela de elementos e ver sua função de cor atribuída.

Componente	Composto pelos 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

A função de cor determina a cor final de um elemento. Selecione uma função para ir à tabela de funções de cor e ver todos os elementos que a usam.

Elemento	Tem a função de cor
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	Não documentado
Text Input Border	Não documentado
Text Input Border (selected)	Não documentado
Text Input Text	Não documentado
Text Input Title	Não documentado
Three dots	`onSurface`
Top Bar Active Icon	`primary`
Top Bar Background	`surfaceContainerHigh`
Top Bar Icon	`onSurface`

Funções de cor

Esta lista mostra todas as funções de cor e os elementos aos quais elas são atribuídas. O arquivo JSON do tema define o valor de cor de cada função.

Função de cor	Atribuída aos 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 do SymfoniumCrie, importe, edite, exporte e compartilhe temas de cores personalizados para o Symfonium.

Interface - Tema, fonte e coresConfigure o tema, a fonte, as cores e os temas personalizados da interface do Symfonium.

Voltar à Wiki