Documentação das cores de tema

Visão geral rápida

Este é um mapeamento rápido de algumas cores 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 player compacto.
surfaceContainerHigh: planos de fundo de caixas de diálogo, cabeçalhos de painéis inferiores, cartões e planos de fundo sobrepostos quando usado com transparência.
surfaceContainerHighest: avisos temporários.
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 usado com transparência, a linha ativa.
onSurfaceVariant: funções padrão do Material Design 3 e, quando usado com transparência, o texto de subtítulo.

Estrutura dos temas

A interface do Symfonium consiste em 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 tem uma função de cor atribuída. 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 tela inicial. Os rótulos das tabelas permanecem em inglês para corresponder às capturas de tela anotadas.

Tela inicial e navegação principal

A tela inicial consiste em seções com um cabeçalho opcional e uma lista de mídia. Você pode configurar os layouts das listas e os botões de atalho, mas os mesmos elementos são usados em cada layout.

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

Tela inicial e navegação principal do Symfonium com componentes de tema anotados

Estilos de exibição de mídia e atalhos da tela inicial

Os mesmos elementos são usados nos diferentes layouts das seções da tela inicial, mostrados lado a lado abaixo.

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

Visualização do álbum e miniplayer

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 miniplayer 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 nos diferentes layouts. 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 ao Wiki