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

Read More

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

Read More

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

The Material Theme editor

Material Theming can be implemented with the help of the Material Theme Editor, a tool that currently allows you to customize color, type, and shape...

Read More

Material Theming can be implemented with the help of the Material Theme Editor, a tool that currently allows you to customize color, type, and shape and create your own branded symbol library, helping you deploy Material quickly and reliably. Selected values will cascade throughout your stickersheet, appropriately altering components, text, and surfaces.

It’s currently available for the design app Sketch. You can download the Material Plugin to get started with Material Theme editing.

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

Read More

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

Attribute

Default values

Custom values

Container

Top Left Corner

Top Right Corner

Bottom Right Corner

Bottom Left Corner

Rounded 4dp

Rounded 4dp

Rounded 4 dp

Rounded 4 dp

Cut 4 dp

Cut 4 dp

Cut 4 dp

Cut 4 dp

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