Theme colors documentation

WIP


Short Overview

To help during the betas here’s a quick mapping of some colors in the JSON files.

Many of the colors respect M3 1.2 colors roles (Material Design 3 for Compose 1.2 - Material Design and Components – Material Design 3)

But some colors have been assigned specific roles to allow more variations in the themes:

  • surface: The default background
  • surfaceContainer: The navigations bars and compact player default color
  • surfaceContainerHigh: Dialogs background. Bottom sheet headers. With alpha as overlay background. Cards
  • surfaceContainerHighest: Snackbars.
  • surfaceContainerLow: Shorcuts. Some buttons. Missing image background. Filtered library. Missing image background.
  • surfaceContainerLowest: Bottomsheet background
  • outlineVariant: Default M3 roles. With alpha currently active row.
  • onSurfaceVariant: Default M3 roles. With alpha subtitle texts.

Theme Framework

The Symfonium UI consists of several components (e.g. a search bar), which again break down into singular elements (e.g. the search bar background, the search text, …). Each element has a color role assigned. In the custom theme JSON file, you can define the exact color applied to each color role. Through that, elements get their colors and components get their overall theme.

The Symfonium UI consists of Components which consist of one or more Elements which each are assigned a Color Role which has a specific Color Value.

Components

In the following screenshots you see components (in red) and elements (in green) labeled. The elements belonging to one component are usually not shown, but you can find them listed in the components table.

Some of the screens are configurable and might look different depending on your settings. This is especially the case for the home screen.

Home Screen and Main Navigation

The Home Screen is very configurable, but in the end consists of several sections with an optional heading and some kind of media listing. The layout of the listings can be configured. The same goes for the shortcut buttons. We see the same elements, no matter which layout is chosen.

The main navigation is visible at all times (except when entering the settings, or when disabled) and presents itself as a container which lays over the main app content.

Home Screen Media and Shortcut Button Display Styles

To illustrate the similarity of the elements in different home screen section layouts, you can see them here side by side.

Album View and Mini Player

Besides the cover image, the album view features buttons and the tracklist.

The Mini Player works similar to the main navigation as it lays on top of the main application content.

List View and Selections

Artist, albums, genres etc. can be displayed in lists. The list layout is configurable similar to the home screen sections, but the same elements are used in different layouts. When selecting items in a list, an action menu pops up over the list contents.

Bottom Sheets

Bottoms sheets contain contextual information or menus. They temporarily slide over the the application (including the main navigation).

Search Screen

The search screen is devided into the search part on the top and the result list on the bottom.

Settings

The settings pages consist mostly of strctured text lists with switches or selectable items. Sometimes the items can be moved (ordered).

Lists of Components, Elements and Color Roles

The following tables show the relations between Components, Elements and Color Roles.

Components (Element Groups)

Individual elements are grouped into Components here. Click on any element in the components table to jump to the elements table and see the assigned color role.

Component consists of elements
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)
Dragndrop Bar Dragndrop Background
Dragndrop Button Background
Dragndrop 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

Elements

The color role determines the eventual color of an element. Click on any color role in the elements table to jump to the color roles table and see all elements that have the same color role assigned.

Element has color role
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
Dragndrop Background surfaceContainer
Dragndrop Button Background tertiaryContainer
Dragndrop 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
Text Input Border
Text Input Border (selected)
Text Input Text
Text Input Title
Three dots onSurface
Top Bar Active Icon primary
Top Bar Background surfaceContainerHigh
Top Bar Icon onSurface

Color Roles

This is the list of color roles and shows all elements that have the same role assigned. The colors for the color roles are defined in the theme JSON file.

Color role is assigned to elements
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
Top Bar Active Icon
Switch (On) Background
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 Dragndrop Button Background
onTertiaryContainer Dragndrop 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 Dragndrop 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
1 Like

Love what you did with the new theme options.

1 Like