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.
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.
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 |