Branding & Colors
Configure the colour scheme for your app with support for both light and dark themes.
Light Theme Colors
The primary colour palette for your app. All 31 properties are grouped by function below.
General
| Property | Description | Default |
|---|
| primaryColor | The primary brand colour used throughout the app | #1976D2 |
| secondaryColor | The secondary brand colour for supporting elements | #424242 |
| accentColor | The accent colour for highlights and interactive elements | #FF4081 |
Background
| Property | Description | Default |
|---|
| backgroundColor | The main background colour of the app | #FFFFFF |
| scaffoldBackgroundColor | The scaffold background colour behind page content | #FAFAFA |
App Bar
| Property | Description | Default |
|---|
| appBarColor | The background colour of the top app bar | #1976D2 |
| appBarTextColor | The text colour in the top app bar | #FFFFFF |
| appBarIconColor | The icon colour in the top app bar | #FFFFFF |
Tab Bar
| Property | Description | Default |
|---|
| tabBarColor | The background colour of the tab bar | #1976D2 |
| tabBarSelectedColor | The colour of the currently selected tab | #FFFFFF |
| tabBarUnselectedColor | The colour of unselected tabs | #B0BEC5 |
| tabBarIndicatorColor | The colour of the tab selection indicator | #FFFFFF |
Bottom Navigation
| Property | Description | Default |
|---|
| bottomNavBarColor | The background colour of the bottom navigation bar | #FFFFFF |
| bottomNavBarSelectedColor | The colour of the selected bottom navigation item | #1976D2 |
| bottomNavBarUnselectedColor | The colour of unselected bottom navigation items | #757575 |
Cards
| Property | Description | Default |
|---|
| cardColor | The background colour of card components | #FFFFFF |
| cardTextColor | The text colour within card components | #212121 |
Text
| Property | Description | Default |
|---|
| textPrimaryColor | The primary text colour for body content | #212121 |
| textSecondaryColor | The secondary text colour for supporting content | #757575 |
| stackTextColor | The text colour used on stack overlay content | #FFFFFF |
Buttons
| Property | Description | Default |
|---|
| buttonPrimaryColor | The background colour of primary buttons | #1976D2 |
| buttonPrimaryTextColor | The text colour of primary buttons | #FFFFFF |
| buttonSecondaryColor | The background colour of secondary buttons | #E0E0E0 |
| buttonSecondaryTextColor | The text colour of secondary buttons | #212121 |
Input Fields
| Property | Description | Default |
|---|
| inputFieldColor | The background colour of input fields | #FFFFFF |
| inputFieldBorderColor | The border colour of input fields | #BDBDBD |
| inputFieldTextColor | The text colour within input fields | #212121 |
System
| Property | Description | Default |
|---|
| dividerColor | The colour of divider lines and separators | #E0E0E0 |
| errorColor | The colour used for error states and messages | #D32F2F |
| successColor | The colour used for success states and messages | #388E3C |
| warningColor | The colour used for warning states and messages | #FFA000 |
Icons
| Property | Description | Default |
|---|
| iconPrimaryColor | The primary colour for icons | #212121 |
| iconSecondaryColor | The secondary colour for icons | #757575 |
| toggleOnColor | Track colour of switches (notifications, location) when on | #34C759 |
| toggleOffColor | Track colour of switches when off | #E0E0E0 |
Dark Theme
The dark theme is optional. Enable it to provide a separate set of colour values for users who prefer a dark interface. When enabled, the same 31 properties listed above are available with independent values, allowing you to create a fully customised dark colour scheme.
If the dark theme is not enabled, the app uses the light theme only, regardless of the user's device settings.
Tip
Use the colour pickers in Mission Control to visually select colours. All values are stored as hex colour codes (e.g. #1976D2).