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