Overview

Material Theming refers to the customization of your Material Design app to better reflect your product’s brand.


Material Theming

What is Material Theming?

Material Theming is the ability to systematically customize Material Design to better reflect your product’s brand. When you begin changing aspects of your UI, such...

Material Theming is the ability to systematically customize Material Design to better reflect your product’s brand.

When you begin changing aspects of your UI, such as color and typography, Material Theming tools apply your design vision throughout your user experience. These tools allow easy switching between design and code workflows by providing specific values for all customizable attributes. Customizing these values creates a Material Theme for your product.


Using Material Theming

Material Theming consists of three main actions: customizing your theme, applying it across your design mocks, and using it in code. Material Design comes designed...

Material Theming consists of three main actions: customizing your theme, applying it across your design mocks, and using it in code.

Material Design comes designed with a built-in, baseline theme that can be used as-is, straight out of the proverbial box. You can then customize it as little, or as much, as you like to make Material work for your product.


Using Material Theming

Theming in practice

Theming affects your entire UI, including individual components, like a button. This example shows how a button component’s out-of-the-box values can be customized. A contained...

Theming affects your entire UI, including individual components, like a button. This example shows how a button component’s out-of-the-box values can be customized.

Customization: before and after

A contained button is assigned values for a specific color, shape, and type family. By default, contained buttons have the following default values:

  • The color is #6200EE
  • The text is 14pt, Roboto, Medium, and all caps
  • The corners have a rounded radii of 4dp

You can adjust the default color, type, and shape of this contained button to suit your app’s style.

On the left, a Material button shows the default styles. On the right, these values have been altered to create a button that is entirely customized.

A baseline Material button
That same Material button, but customized

Default and customized values

Buttons have the following attributes and default values, with customizations for this example indicated in bold.

Typography

Element Category Attribute Default values Custom values
Text Label BUTTON Type Family
Font
Case
Size
Roboto
Medium
All Caps
14pt
Rubik
Medium
All Caps
14pt

Color

Element Category Attribute Default values Custom values
Container Primary Color
Opacity
#6200EE
100%
#FEDBD0
100%
Text Label On Primary Color
Opacity
#FFFFFFF
100%
#442C2E
100%
Icon On Primary Color
Opacity
#FFFFFFF
100%
#442C2E
100%

Iconography

Element Category Attribute Default values Custom values
Icon Icon Set Icon Family
Icon
Filled
Add
Outlined
Shopping Cart

Shape

Element Category Attribute Default values Custom values
Container Small component Top Left Corner
Top Right Corner
Bottom Right Corner
Bottom Left Corner
Rounded 4dp
Rounded 4dp
Rounded 4dp
Rounded 4dp
Cut 6dp
Cut 6dp
Cut 6dp
Cut 6dp

Bold values indicate values that have been customized from the defaults.

Up next