Wear Material Theming

Stay organized with collections Save and categorize content based on your preferences.

Wear Material Theming is the ability to systematically customize Wear Material Design to reflect your brand. When you begin changing aspects of your UI such as color and typography, Wear Material Theming tools apply your design vision throughout your user experience. The tools allow easy switching between design and code workflows by providing specific values for all customizable attributes. Customizing the attribute values creates a Wear Material Theme for your product.

Use Wear Material Theming

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

Wear Material Design comes with a built-in theme that can be used as is. Customize the built-in theme to make Material work for your product.

Theming in practice

Theming affects your entire UI, including individual components such as chips. The following example shows how to customize a chip component’s default values.

A contained chip is assigned values for a specific color, shape, and type family. Adjust the default values to suit your app’s style.

Before

A baseline Wear Material chip with default styles.

After

A customized Wear Material chip.

Color

The color system supports setting custom colors for components, text, icons, and surfaces. Set your theme colors for the 13 following categories:

  1. Primary

  2. Primary Variant

  3. Secondary

  4. Secondary Variant

  5. Background

  6. Surface

  7. Error

  8. On Primary

  9. On Secondary

  10. On Background

  11. On Surface

  12. On Surface Variant

  13. On Error

Typography

The typography system supports 11 categories that together form the type scale. This type scale determines the various type styles and sizes that appear on-screen, ranging from body copy to button text.

Typography attributes are controlled by values that can be customized for the type family, font, case, size, and tracking.