All Components

Customization

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

Variables

Common

Name Default value Description
$font-family-monospace Consolas, "Ubuntu Mono", "Lucida Console", "Courier New", monospace Font family for monospaced text. Used for styling the code.
$border-radius 2px Border radius for all components.
$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.
$base-text if($theme-type == dark, white, black) The text color of the components' chrome area.
$base-bg if($theme-type == dark, black, white) The background of the components' chrome area.
$base-gradient null The gradient background of the components' chrome area.
$hovered-text $base-text The text color of hovered items.
$hovered-bg rgba( if($theme-type == dark, white, black), .07) The background 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.
$error #f31700 The color for error messages and states.
$warning #ffc000 The color for warning messages and states.
$success #37b400 The color for success messages and states.
$info #3f51b5 The color for informational messages and states.

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

Fonts

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.
$line-height (28 / 14) Line height used along with $font-size.

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.

Mixins

In this article