Customization

The following table lists the available variables for customizing the Material theme.

Variables

Common

NameTypeDefault valueComputed value
$border-radius2px2px
Description
Border radius for all components.
$base-bgmap-get( $theme, base-bg )map-get( $theme, base-bg )
Description
The background of the components' chrome area.
$base-textmap-get($theme, component-text)map-get($theme, component-text)
Description
The text color of the components' chrome area.
$base-borderrgba( if($theme-type == dark, white, black), .08 )rgba( if($theme-type == dark, white, black), .08 )
Description
The border of the components' chrome area.
$base-gradientnullnull
Description
The gradient background of the components' chrome area.
$hovered-bgmap-get( $theme, hover-bg )map-get( $theme, hover-bg )
Description
The background of hovered items.
$hovered-text$base-textmap-get($theme, component-text)
Description
The text color of hovered items.
$hovered-borderrgba( if($theme-type == dark, white, black), .15 )rgba( if($theme-type == dark, white, black), .15 )
Description
The border color of hovered items.
$hovered-gradientnullnull
Description
The gradient background of hovered items.
$selected-bg$secondarymaterial-color( $secondary-palette, default )
Description
The background of selected items.
$selected-text$secondary-contrastmaterial-color( $secondary-palette, default-contrast )
Description
The text color of selected items.
$selected-borderrgba( if($theme-type == dark, white, black), .1 )rgba( if($theme-type == dark, white, black), .1 )
Description
The border color of selected items.
$selected-gradientnullnull
Description
The gradient background of selected items.
### Buttons
NameTypeDefault valueComputed value
$button-bg$base-bgmap-get( $theme, base-bg )
Description
The background of the buttons.
$button-text$base-textmap-get($theme, component-text)
Description
The text color of the buttons.
$button-border$button-bgmap-get( $theme, base-bg )
Description
The border color of the buttons.
$button-gradientnullnull
Description
The background gradient of the buttons.
$button-hovered-bgtrue-mix( $button-text, $button-bg, 12%)true-mix( $button-text, $button-bg, 12%)
Description
The background of hovered buttons.
$button-hovered-textnullnull
Description
The text color of hovered buttons.
$button-hovered-border$button-hovered-bgtrue-mix( $button-text, $button-bg, 12%)
Description
The border color of hovered buttons.
$button-hovered-gradientnullnull
Description
The background gradient of hovered buttons.
$button-pressed-bgtrue-mix( $button-text, $button-bg, 12%)true-mix( $button-text, $button-bg, 12%)
Description
The background color of pressed buttons.
$button-pressed-textnullnull
Description
The text color of pressed buttons.
$button-pressed-border$button-pressed-bgtrue-mix( $button-text, $button-bg, 12%)
Description
The border color of pressed buttons.
$button-pressed-gradientnullnull
Description
The background gradient of pressed buttons.
$button-focused-shadownullnull
Description
The shadow of focused buttons.
### Charts
NameTypeDefault valueComputed value
$series-a#3f51b5#3f51b5
Description
The color of the first series.
$series-b#2196f3#2196f3
Description
The clor of the second series.
$series-c#43a047#43a047
Description
The color of the third series.
$series-d#ffc107#ffc107
Description
The color of the fourth series.
$series-e#ff5722#ff5722
Description
The color of the fifth series.
$series-f#e91e63#e91e63
Description
The color of the sixth series.
$chart-major-linesrgba(0, 0, 0, .08)rgba(0, 0, 0, .08)
Description
The color of the Chart grid lines (major).
$chart-minor-linesrgba(0, 0, 0, .04)rgba(0, 0, 0, .04)
Description
The color of the Chart grid lines (minor).
### Color System
NameTypeDefault valueComputed value
$primaryColormaterial-color( $primary-palette, default )material-color( $primary-palette, default )
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrastColormaterial-color( $primary-palette, default-contrast )material-color( $primary-palette, default-contrast )
Description
The color used along with the primary color denoted by $primary.
Used to provide contrast between the background and foreground colors.
$secondaryColormaterial-color( $secondary-palette, default )material-color( $secondary-palette, default )
Description
The secondary color of the theme.
$secondary-contrastColormaterial-color( $secondary-palette, default-contrast )material-color( $secondary-palette, default-contrast )
Description
The color used along with the secondary color denoted by $secondary.
Used to provide contrast between the background and foreground colors.
$tertiaryColormaterial-color($tertiary-palette, default)material-color($tertiary-palette, default)
Description
The tertiary color of the theme.
$tertiary-contrastColormaterial-color($tertiary-palette, default-contrast)material-color($tertiary-palette, default-contrast)
Description
The color used along with the tertiary color denoted by $tertiary.
Used to provide contrast between the background and foreground colors.
$infoColor#0058e9#0058e9
Description
The color for informational messages and states.
$successColor#37b400#37b400
Description
The color for success messages and states.
$warningColor#ffc000#ffc000
Description
The color for warning messages and states.
$errorColor#f31700#f31700
Description
The color for error messages and states.
$darkColorget-base-hue( grey, 800 )get-base-hue( grey, 800 )
Description
The dark color of the theme.
$lightColorget-base-hue( grey, 100 )get-base-hue( grey, 100 )
Description
The light color of the theme.
$inverseif( $is-dark-theme, $light, $dark )if( $is-dark-theme, $light, $dark )
Description
Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark
### Component
NameTypeDefault valueComputed value
$component-bgmap-get($theme, component-bg)map-get($theme, component-bg)
Description
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-textmap-get($theme, component-text)map-get($theme, component-text)
Description
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-bordermap-get($theme, component-border)map-get($theme, component-border)
Description
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-bgmap-get($theme, component-bg)
Deprecated
Will be removed in v5. Use `$component-bg` variable instead.
Description
Background color of a component.
$widget-text$component-textmap-get($theme, component-text)
Deprecated
Will be removed in v5. Use `$component-text` variable instead.
Description
Text color of a component.
$widget-border$component-bordermap-get($theme, component-border)
Deprecated
Will be removed in v5. Use `$component-border` variable instead.
Description
Border color of a component.
### Grid
NameTypeDefault valueComputed value
$grid-bg$component-bgmap-get($theme, component-bg)
Description
Background color of the grid component
$grid-text$component-textmap-get($theme, component-text)
Description
Text color of the grid component
$grid-border$component-bordermap-get($theme, component-border)
Description
Border color of the grid component
$grid-header-bgtransparenttransparent
Description
Background color of grid header
$grid-header-textif($theme-type == dark, $light-secondary-text, $dark-secondary-text)if($theme-type == dark, $light-secondary-text, $dark-secondary-text)
Description
Background color of grid header
$grid-header-border$grid-bordermap-get($theme, component-border)
Description
Border color of grid header
$grid-header-gradientnullnull
Description
Background gradient of grid header
$grid-alt-bgtransparenttransparent
Description
Background color of alternating rows in grid
$grid-alt-textnullnull
Description
Text color of alternating rows in grid
$grid-alt-bordernullnull
Description
Text color of alternating rows in grid
$grid-hovered-bgrgba( contrast-wcag( $grid-bg ), .07 )rgba( contrast-wcag( $grid-bg ), .07 )
Description
Background color of hovered rows in grid
$grid-hovered-text$grid-textmap-get($theme, component-text)
Description
Text color of hovered rows in grid
$grid-hovered-border$grid-bordermap-get($theme, component-border)
Description
Border color of hovered rows in grid
$grid-selected-bgrgba( contrast-wcag( $grid-bg ), .04 )rgba( contrast-wcag( $grid-bg ), .04 )
Description
Background color of selected rows in grid
$grid-selected-text#000000#000000
Description
Text color of selected rows in grid
$grid-selected-border$grid-bordermap-get($theme, component-border)
Description
Border color of selected rows in grid
### Icons
NameTypeDefault valueComputed value
$icon-font-urlnullnull
Description
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
NameTypeDefault valueComputed value
$elevationmap-get( $theme, elevation )map-get( $theme, elevation )
Description
Color of shadows
$box-shadow-depth-10 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 )0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 )
Description
Shadow for switch.
Equivalent to material elevation 1.
$box-shadow-depth-20 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 )0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 )
Description
Shadow for resting state of button, card and other widgets.
Equivalent to material elevation 2.
$box-shadow-depth-30 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 )0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 )
Description
Shadow for menu, popups and raised state of button and card.
Equivalent to material elevation 8.
$box-shadow-depth-40 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 )0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 )
Description
Shadow for drawers and other overlaying elements.
Equivalent to material elevation 16.
$box-shadow-depth-50 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 )0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 )
Description
Shadow for window and dialog.
Equivalent to material elevation 24.
### Tabstrip
NameTypeDefault valueComputed value
$button-border-width00
Description
Width of border around buttons
$button-border-radius$border-radius2px
Description
Border radius of buttons
$button-padding-x$padding-x
Description
Horizontal padding of buttons
$button-padding-y8px8px
Description
Vertical padding of buttons
$tabstrip-bgnullnull
Description
Background color of tabstrip component
$tabstrip-textinheritinherit
Description
Text color of tabstrip component
$tabstrip-border$component-bordermap-get($theme, component-border)
Description
Border color of tabstrip component
$tabstrip-item-padding-x24px24px
Description
Horizontal padding of tabs
$tabstrip-item-padding-y14px14px
Description
Vertical padding of tabs
$tabstrip-item-border-width00
Description
Width of border around of tabs
$tabstrip-item-border-radius00
Description
Border radius of tabs
$tabstrip-item-gap00
Description
Spacing between tabs
$tabstrip-item-bgnullnull
Description
Background color of tabs
$tabstrip-item-textinheritinherit
Description
Text color of tabs
$tabstrip-item-bordernullnull
Description
Border color of tabs
$tabstrip-item-gradientnullnull
Description
Background gradient of tabs
$tabstrip-item-hovered-bgnullnull
Description
Background color of hovered tabs
$tabstrip-item-hovered-textinheritinherit
Description
Text color of hovered tabs
$tabstrip-item-hovered-bordernullnull
Description
Border color of hovered tabs
$tabstrip-item-hovered-gradientnullnull
Description
Background gradent of hovered tabs
$tabstrip-item-selected-bgnullnull
Description
Background color of selected tabs
$tabstrip-item-selected-textinheritinherit
Description
Text color of selected tabs
$tabstrip-item-selected-bordernullnull
Description
Border color of selected tabs
$tabstrip-item-selected-gradientnullnull
Description
Background gradient of selected tabs
$tabstrip-content-padding-x$tabstrip-item-padding-x24px
Description
Horizontal padding of tabstrip content
$tabstrip-content-padding-y$tabstrip-item-padding-y14px
Description
Vertical padding of tabstrip content
$tabstrip-content-border-width00
Description
Width of border around tabstrip content
$tabstrip-content-bgtransparenttransparent
Description
Background color of tabstrip content
$tabstrip-content-textinheritinherit
Description
Text color of tabstrip content
$tabstrip-content-bordertransparenttransparent
Description
Border color of tabstrip content
### Toolbar
NameTypeDefault valueComputed value
$toolbar-padding-x00
Description
The horizontal padding of the container.
$toolbar-padding-y00
Description
The vertical padding of the container.
### Typography
NameTypeDefault valueComputed value
$font-size14px14px
Description
Base font size across all components.
$font-familyRoboto, "Helvetica Neue", sans-serifRoboto, "Helvetica Neue", sans-serif
Description
Font family across all components.
$font-family-monospaceConsolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospaceConsolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace
Description
Font family for monospaced text. Used for styling the code.
$line-height(28 / 14)(28 / 14)
Description
Line height used along with $font-size.

Mixins

In this article

Not finding the help you need?