Customization
The following table lists the available variables for customizing the Material theme.
Variables
Common
| Name | Default value | Description |
|---|---|---|
| $border-radius | 2px | Border radius for all components. |
| $base-bg | map-get( $theme, base-bg ) | The background of the components' chrome area. |
| $base-text | map-get($theme, component-text) | The text color of the components' chrome area. |
| $base-border | rgba( if($theme-type == dark, white, black), .08 ) | The border of the components' chrome area. |
| $base-gradient | null | The gradient background of the components' chrome area. |
| $hovered-bg | map-get( $theme, hover-bg ) | The background of hovered items. |
| $hovered-text | $base-text | The text color of hovered items. |
| $hovered-border | rgba( if($theme-type == dark, white, black), .15 ) | The border color of hovered items. |
| $hovered-gradient | null | The gradient background of hovered items. |
| $selected-bg | $secondary | The background of selected items. |
| $selected-text | $secondary-contrast | The text color of selected items. |
| $selected-border | rgba( if($theme-type == dark, white, black), .1 ) | The border color of selected items. |
| $selected-gradient | null | The gradient background of selected items. |
Buttons
| Name | Default value | Description |
|---|---|---|
| $button-bg | $base-bg | The background of the buttons. |
| $button-text | $base-text | The text color of the buttons. |
| $button-border | $button-bg | The border color of the buttons. |
| $button-gradient | null | The background gradient of the buttons. |
| $button-hovered-bg | true-mix( $button-text, $button-bg, 12%) | The background of hovered buttons. |
| $button-hovered-text | null | The text color of hovered buttons. |
| $button-hovered-border | $button-hovered-bg | The border color of hovered buttons. |
| $button-hovered-gradient | null | The background gradient of hovered buttons. |
| $button-pressed-bg | true-mix( $button-text, $button-bg, 12%) | The background color of pressed buttons. |
| $button-pressed-text | null | The text color of pressed buttons. |
| $button-pressed-border | $button-pressed-bg | The border color of pressed buttons. |
| $button-pressed-gradient | null | The background gradient of pressed buttons. |
| $button-focused-shadow | null | The shadow of focused buttons. |
Charts
| Name | Default value | Description |
|---|---|---|
| $series-a | #3f51b5 | The color of the first series. |
| $series-b | #2196f3 | The clor of the second series. |
| $series-c | #43a047 | The color of the third series. |
| $series-d | #ffc107 | The color of the fourth series. |
| $series-e | #ff5722 | The color of the fifth series. |
| $series-f | #e91e63 | The color of the sixth series. |
| $chart-major-lines | rgba(0, 0, 0, .08) | The color of the Chart grid lines (major). |
| $chart-minor-lines | rgba(0, 0, 0, .04) | The color of the Chart grid lines (minor). |
Color System
| Name | Default value | Description |
|---|---|---|
| $primary | material-color( $primary-palette, default ) | The color that focuses the user attention. Used for primary buttons and for elements of primary importance across the theme. |
| $primary-contrast | material-color( $primary-palette, default-contrast ) | The color used along with the primary color denoted by $primary. Used to provide contrast between the background and foreground colors. |
| $secondary | material-color( $secondary-palette, default ) | The secondary color of the theme. |
| $secondary-contrast | material-color( $secondary-palette, default-contrast ) | The color used along with the secondary color denoted by $secondary. Used to provide contrast between the background and foreground colors. |
| $tertiary | material-color($tertiary-palette, default) | The tertiary color of the theme. |
| $tertiary-contrast | material-color($tertiary-palette, default-contrast) | The color used along with the tertiary color denoted by $tertiary. Used to provide contrast between the background and foreground colors. |
| $info | #0058e9 | The color for informational messages and states. |
| $success | #37b400 | The color for success messages and states. |
| $warning | #ffc000 | The color for warning messages and states. |
| $error | #f31700 | The color for error messages and states. |
| $dark | get-base-hue( grey, 800 ) | The dark color of the theme. |
| $light | get-base-hue( grey, 100 ) | The light color of the theme. |
| $inverse | if( $is-dark-theme, $light, $dark ) | Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark |
Component
| Name | Default value | Description |
|---|---|---|
| $component-bg | map-get($theme, component-bg) | Background color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`. |
| $component-text | map-get($theme, component-text) | Text color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`. |
| $component-border | map-get($theme, component-border) | Border color of a component. Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`. |
| $widget-bg | $component-bg | Deprecated. Will be removed in v5. Use `$component-bg` variable instead. |
| $widget-text | $component-text | Deprecated. Will be removed in v5. Use `$component-text` variable instead. |
| $widget-border | $component-border | Deprecated. Will be removed in v5. Use `$component-border` variable instead. |
Icons
| Name | Default value | Description |
|---|---|---|
| $icon-font-url | null | The URL to the icon font that will be used by the theme The default value of `null` embeds the package font with a `data:` URL |
Shadows
| Name | Default value | Description |
|---|---|---|
| $elevation | map-get( $theme, elevation ) | Color of shadows |
| $box-shadow-depth-1 | 0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 ) | Shadow for switch. Equivalent to material elevation 1. |
| $box-shadow-depth-2 | 0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 ) | Shadow for resting state of button, card and other widgets. Equivalent to material elevation 2. |
| $box-shadow-depth-3 | 0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 ) | Shadow for menu, popups and raised state of button and card. Equivalent to material elevation 8. |
| $box-shadow-depth-4 | 0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 ) | Shadow for drawers and other overlaying elements. Equivalent to material elevation 16. |
| $box-shadow-depth-5 | 0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 ) | Shadow for window and dialog. Equivalent to material elevation 24. |
Tabstrip
| Name | Default value | Description |
|---|---|---|
| $tabstrip-bg | null | Component background. Set to `transparent` to blend the component with the page. |
| $tabstrip-text | inherit | Component text color. Set to `inherit` to blend the component with the page. |
| $tabstrip-indicator-color | $primary | Active tab indicator color. Set to `currentColor` to use the text color |
Toolbar
| Name | Default value | Description |
|---|---|---|
| $toolbar-padding-x | 0 | The horizontal padding of the container. |
| $toolbar-padding-y | 0 | The vertical padding of the container. |
Typography
| Name | Default value | Description |
|---|---|---|
| $font-size | 14px | Base font size across all components. |
| $font-family | Roboto, "Helvetica Neue", sans-serif | Font family across all components. |
| $font-family-monospace | Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace | Font family for monospaced text. Used for styling the code. |
| $line-height | (28 / 14) | Line height used along with $font-size. |