2023-09-22 23:05:50 -07:00
|
|
|
<!-- catalog-only-start --><!-- ---
|
|
|
|
|
name: Material Theming
|
|
|
|
|
title: Theming
|
|
|
|
|
order: 1
|
|
|
|
|
-----><!-- catalog-only-end -->
|
|
|
|
|
|
2023-09-08 13:51:40 -07:00
|
|
|
# Theming
|
|
|
|
|
|
|
|
|
|
<!-- go/mwc-theming -->
|
|
|
|
|
|
|
|
|
|
<!--*
|
|
|
|
|
# Document freshness: For more information, see go/fresh-source.
|
2025-11-25 13:00:41 -08:00
|
|
|
freshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }
|
2023-09-08 13:51:40 -07:00
|
|
|
tag: 'docType:concepts'
|
|
|
|
|
*-->
|
|
|
|
|
|
|
|
|
|
<!-- [TOC] -->
|
|
|
|
|
|
|
|
|
|
[Material Design theming](https://m3.material.io/foundations/customization)<!-- {.external} -->
|
|
|
|
|
creates unique branded products with familiar patterns and accessible
|
|
|
|
|
interactions.
|
|
|
|
|
|
|
|
|
|
|
2023-09-08 13:51:40 -07:00
|
|
|
|
|
|
|
|
## Tokens
|
|
|
|
|
|
|
|
|
|
Material is expressed in
|
|
|
|
|
[design tokens](https://m3.material.io/foundations/design-tokens/overview)<!-- {.external} -->,
|
|
|
|
|
which are the building blocks of all UI elements.
|
|
|
|
|
|
|
|
|
|
Each component token maps to a system token, which has a concrete reference
|
|
|
|
|
value.
|
|
|
|
|
|
|
|
|
|
|
2023-09-08 13:51:40 -07:00
|
|
|
|
|
|
|
|
On the web, design tokens are
|
|
|
|
|
[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)<!-- {.external} -->
|
|
|
|
|
and can be scoped with CSS selectors.
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
.square-buttons {
|
|
|
|
|
/* Changes all <md-filled-button> instances matching the selector */
|
|
|
|
|
--md-filled-button-container-shape: 0px;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Reference
|
|
|
|
|
|
|
|
|
|
Reference tokens hold concrete values, such as a hex color, pixel size, or font
|
|
|
|
|
family name.
|
|
|
|
|
|
|
|
|
|
#### Typeface
|
|
|
|
|
|
|
|
|
|
[`--md-ref-typeface` tokens](typography.md#typeface) can be used to change font
|
|
|
|
|
families and weights across all system and component tokens.
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
:root {
|
|
|
|
|
--md-ref-typeface-brand: 'Open Sans';
|
|
|
|
|
--md-ref-typeface-plain: 'Open Sans';
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### Palette
|
|
|
|
|
|
|
|
|
|
*MWC does not currently support `--md-ref-palette` tokens.*
|
|
|
|
|
|
|
|
|
|
### System
|
|
|
|
|
|
|
|
|
|
System tokens define decisions and roles that give the design system its
|
|
|
|
|
character, from color and typography, to elevation and shape.
|
|
|
|
|
|
|
|
|
|
#### Color
|
|
|
|
|
|
|
|
|
|
[`--md-sys-color` tokens](color.md#tokens) define dynamic color roles that map
|
|
|
|
|
to components. See the [color guide](color.md) for more details.
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
:root {
|
|
|
|
|
--md-sys-color-primary: red;
|
|
|
|
|
--md-sys-color-secondary: blue;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### Typography
|
|
|
|
|
|
2024-04-17 15:42:44 +02:00
|
|
|
[`--md-sys-typescale` tokens](typography.md#typescale) define typescale roles
|
2023-09-08 13:51:40 -07:00
|
|
|
that map to components. See the [typography guide](typography.md) for more
|
|
|
|
|
details.
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
:root {
|
2024-04-17 15:42:44 +02:00
|
|
|
--md-sys-typescale-body-medium-size: 1rem;
|
|
|
|
|
--md-sys-typescale-body-medium-line-height: 1.5rem;
|
2023-09-08 13:51:40 -07:00
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
#### Shape
|
|
|
|
|
|
2024-02-15 12:59:45 -08:00
|
|
|
[`--md-sys-shape` tokens](shape.md#tokens) define corner shapes used in
|
|
|
|
|
components. See the [shape guide](shape.md) for more details.
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
:root {
|
|
|
|
|
--md-sys-shape-corner-small: 4px;
|
|
|
|
|
--md-sys-shape-corner-medium: 6px;
|
|
|
|
|
--md-sys-shape-corner-large: 8px;
|
|
|
|
|
}
|
|
|
|
|
```
|
2023-09-08 13:51:40 -07:00
|
|
|
|
|
|
|
|
#### Motion
|
|
|
|
|
|
|
|
|
|
*MWC does not currently support `--md-sys-motion` tokens.*
|
|
|
|
|
|
|
|
|
|
### Component
|
|
|
|
|
|
|
|
|
|
Component tokens are design attributes assigned to elements. They can be system
|
|
|
|
|
tokens or concrete values.
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
:root {
|
|
|
|
|
--md-filled-button-container-shape: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
md-filled-button.error {
|
|
|
|
|
--md-filled-button-container-color: var(--md-sys-color-error);
|
|
|
|
|
--md-filled-button-label-text-color: var(--md-sys-color-on-error);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2023-09-23 11:19:39 -07:00
|
|
|
Refer to each [components' documentation](../components/) for available tokens.
|
2023-09-08 13:51:40 -07:00
|
|
|
|
|
|
|
|
> Note: unlike `--md-ref-*` and `--md-sys-*` tokens, which are prefixed with
|
|
|
|
|
> `ref` and `sys`, component tokens are *not* prefixed with `comp`.
|
