Themes
With themes, you can define a custom color palette, default border radius, button and input variants, tooltip size and color, and typography settings to be applied across an app. A default theme is applied to new apps, but you can change the theme in App Settings or on app creation if you already have the theme defined.
As you edit a theme, example components will be rendered on the right-hand side of theme editor. Individual components can be customized within the UI designer, but some general settings such as available colors and font families must be declared within a theme.
Changing colors
To change a color, click the existing color in the theme editor and either:
Select an option from the Material Palette
Use the Color Picker to define a custom color.
With the color picker, you can also enter hex, RGB, and opacity values directly. Click the hex or rgb label to switch between the two.
With the exception of Primary and Secondary colors, you can also enter hex and opacity values directly into the input field.
Light theme or dark theme
By default, a theme is set to be a Light Theme. This means your app will have white or light-colored backgrounds and dark text. Alternatively, you can set a theme to be a Dark Theme, often known as dark mode. With a dark theme, your app will have black or dark-colored backgrounds and white or light-colored text.
Set the palette with your audience and primary use cases in mind. Dark palettes are more popular for mobile apps and night-time use, while they are rarely used for corporate solutions. When in doubt, choose a light theme.
Good to know
If you want to offer your users the choice of a light or dark theme, these must created as two separate themes.
Color palette
Under Color palette, you can define the primary and secondary colors for your theme. These are the colors that you want to feature most prominently in your app and are available everywhere you can adjust the color in your UI. In a typical app, the primary color will be used for the main user interface elements and the secondary color as an accent color where required. For both of these colors, a lighter and darker version is automatically generated.
Contrast text
You can choose to override the contrast text color for the primary and secondary colors. Contrast colors are used when the the main colors are used as solid backgrounds, for example in the App Bar or as buttons. The theme will apply sensible defaults, and ensure that dark text is used on light backgrounds and vice versa.
Custom colors
If you need additional colors available throughout your UI, you can add those under Custom colors. When you add a custom color, you should set a sensible key (name).
Note that when applying a color to a UI component using the style properties, an additional set of nine shades of grey is available. These are not customizable.
Important
If a color key is changed, any reference to that color from an app will be lost.
Text colors
Text colors are automatically assigned based on the context in the UI, and can also be assigned directly to some components.
Primary
The primary color for body text.
Secondary
A secondary color for body text and also used to style to input fields.
Disabled Text
Used to style input field labels and values when the component is disabled.
Backgrounds
Default
The background color applied to new views.
Paper
An alternative background color often used for containers to provide contrast to the default background.
Action
Action colors are applied to UI components either manually or automatically depending on their state.
Active
This color can can be manually applied to Icon buttons (Button Color: Default) and Icons (Icon Color: Action).
Hover
Automatically applied as the background color of a row in a Table or an item in a List on hover. Note that hover must be enabled on the component.
Selected
Automatically applied as the background color of an item in a List when selected. Note that selection must be enabled on the component.
Disabled
Automatically applied to Buttons, Icon buttons, Radio buttons and checkboxes when disabled.
Disabled Background
Applied to Buttons when disabled.
States
State colors are used to consistently represent messages of various severity within your app. These colors are available within the color picker when styling UI components.
Info
Typically used to provide general information in the context of a user action.
Success
Typically used to indicate a user or automated action was successfully completed.
Warning
Typically used to indicate that there are consequences to be aware of before performing an action or that non-critical functionality has failed.
Error
Typically used to indicate invalid data or that critical functionality has failed.
This color is used to highlight an input field and for any helper text if the Error property for that component equates to true.
Other
Divider
The divider color is applied to dividers enabled within UI components such as Lists. You can also use it as a border color when setting up custom borders.
Link
Override the default link text color.
Settings
Theme Border Radius
This Theme Border Radius sets the border radius in pixels for relevant UI components, such as Text Inputs and Buttons.
For some UI Components, such as the Container, this value serves as a default that can be applied to the UI Components by selecting the Use Border Radius from Theme checkbox in Style properties.
Button
Border Radius Override
By default, buttons will inherit the border radius from the Theme Border Radius. You may override this border radius by ticking Override Border Radius.
Default variant
Select the default variant (Text, Outlined, Contained) for Buttons added to your UI.
Border Radius
Visible when Override Border Radius is selected. Select the number of pixels to be applied as border radius for all buttons.
Disable elevation
Remove elevation from buttons with variant Contained.
Input
Default variant
Select the default variant (Text, Outlined, Contained) for Inputs (Text Input, Date and Time Picker, Select etc) added to your UI.
Popover
Border Radius Override
By default, Popovers will inherit the border radius from the Theme Border Radius. You may override this border radius by ticking Border Radius Override.
Tooltip
Arrow
Select whether arrows should be visible on tooltips.
Border Radius Override
By default, Tooltips will inherit the border radius from the Theme Border Radius. You may override this border radius by ticking Border Radius Override.
Font Size
Change the default font size for all tooltips. The default font size is 11px.
Background Color
Change the background color for tooltips.
Color
Change the text color for tooltips.
Font families
Add and manage fonts from Google Fonts or your own custom fonts. Custom fonts must first be uploaded under Fonts.
To add a new font family to your Theme:
Click the + icon to open the Add Theme Font dialog.
Select a font family from either the Featured, Google Fonts, or Custom Fonts tabs. A sample will be displayed along with a list of the styles available.
Select the styles required for your app(s). These can be adjusted later.
Click Add Font.
Each theme has a default font family that is applied to UI components. This font family is marked with a star icon. To select a new default font family:
Click the font family in the list of font families added to the theme.
Click the star icon in the top-right of the popover.
Good to know
If you have modified the typography variants, changing the default font family will not change the font family in any variant.
To replace one font family with another:
Click the font family in the list of font families added to the theme.
Click the left/right arrows icon in the top-right of the popover.
Select a font family and the styles required.
Click Replace Font.
Typography variants
There is a pre-defined array of typography variants configured. These variants are applied automatically to some UI components while you can also apply a variant manually, such as on the Text component. The variants, with some of their default applications in parentheses, are:
H1–H6
Subtitle1
Subtitle2
Body1 (Text components)
Body2 (Container loader messages)
Button (Button components)
Caption (Input helper text)
Overline
Each variant has the following properties which can all be customized.
Last updated