themes

function sizable public view code open_in_new

Used to switch between values based on the size of the component. The passed sizes are converted to absolute values before comparing.

Example

--size: #{sizable(rem(40px), rem(64px), rem(88px))};

Parameters

Name	Type	Default	Description
$sm *	Number	-	The preferred value when the component's size is small.
$md	Number	$sm	The preferred value when the component's size is medium.
$lg	Number	$md	The preferred value when the component's size is large.

function category-chart-theme public view code open_in_new

Example

$custom-chart-theme: category-chart-theme($brushes: (red, green, blue));
// Pass the theme to the css-vars mixin
@include css-vars($custom-chart-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$target	Map	'angular'	The target platform to be used when scoping the theme variables.
$margin	List	null	Sets the margin (top, right, bottom, left) of the chart content.
$brushes	List	series	Defines the palette from which automatically assigned series brushes colors are selected.
$marker-brushes	List	series	Defines the palette from which automatically assigned series marker brushes colors are selected.
$negative-brushes	List	series	Defines the palette used for coloring negative items in a chart type with contextual coloring, such as Waterfall.
$outlines	List	series	Defines the palette from which automatically assigned series outline colors are selected.
$marker-outlines	List	series	Defines the palette from which automatically assigned series marker outline colors are selected.
$negative-outlines	List	series	Defines the brushes used for drawing negative elements in a chart type with contextual coloring, such as Waterfall.
$title-alignment	String	null	The horizontal alignment to use for the title.
$title-margin	List	null	Sets the margin (top, right, bottom, left) of the chart title.
$title-text-color	Color	null	Sets the color of the chart title.
$title-text-style	String	null	Sets the CSS font property of the chart title.
$subtitle-margin	List	null	Sets the margins (top, right, bottom, left) of the chart subtitle.
$subtitle-alignment	String	null	The horizontal alignment to use for the subtitle.
$subtitle-text-color	Color	null	Sets the color of the chart subtitle.
$subtitle-text-style	String	null	Sets the CSS font property of the chart subtitle.
$thickness	Number	null	Sets the thickness for all series in a chart.
$trend-line-brushes	List	series	Defines the palette of brushes used for coloring trend lines in a chart.
$trend-line-thickness	Number	null	Sets the thickness of the trend lines in a chart of type point, line, spline or bubble.
$x-axis-label-margin	List	null	Sets the margin (top, right, bottom, left) of labels on the X-axis.
$x-axis-label-text-color	Color	null	Sets the color of labels on the X-axis.
$x-axis-label-text-style	String	null	Sets the CSS font property for labels on X-axis.
$x-axis-label-vertical-alignment	String	null	Sets the vertical alignment of X-axis labels.
$x-axis-major-stroke	Color	null	Sets the color to apply to major gridlines along the X-axis.
$x-axis-major-stroke-thickness	Number	null	Sets the thickness to apply to major gridlines along the X-axis.
$x-axis-minor-stroke	Color	null	Sets the color to apply to minor gridlines along the X-axis.
$x-axis-minor-stroke-thickness	Number	null	Sets the thickness to apply to minor gridlines along the X-axis.
$x-axis-strip	Color	null	Sets the color to apply to stripes along the X-axis.
$x-axis-stroke	Color	null	Sets the color to apply to the X-axis line.
$x-axis-stroke-thickness	Number	null	Sets the thickness to apply to the X-axis line.
$x-axis-tick-length	Number	null	Sets the length of tickmarks along the X-axis.
$x-axis-tick-stroke	Color	null	Sets the color to apply to tickmarks along the X-axis.
$x-axis-tick-stroke-thickness	Number	null	Sets the thickness to apply to tickmarks along the X-axis.
$x-axis-title-alignment	String	null	Sets the horizontal alignment of the X-axis title.
$x-axis-title-margin	List	null	Sets the margin (top, right, bottom, left) of a title on the X-axis.
$x-axis-title-text-color	Color	null	Sets the color of the title on the X-axis.
$x-axis-title-text-style	String	null	Sets the CSS font property for the title on the X-axis.
$y-axis-label-margin	List	null	Sets the margin (top, right, bottom, left) of labels on the Y-axis.
$y-axis-label-text-color	Color	null	Sets the color of labels on the Y-axis.
$y-axis-label-text-style	String	null	Sets the CSS font property for labels on Y-axis.
$y-axis-label-vertical-alignment	String	null	Sets the vertical alignment of Y-axis labels.
$y-axis-major-stroke	Color	null	Sets the color to apply to major gridlines along the y-axis.
$y-axis-major-stroke-thickness	Number	null	Sets the thickness to apply to major gridlines along the Y-axis.
$y-axis-minor-stroke	Color	null	Sets the color to apply to minor gridlines along the Y-axis.
$y-axis-minor-stroke-thickness	Number	null	Sets the thickness to apply to minor gridlines along the Y-axis.
$y-axis-strip	Color	null	Sets the color to apply to stripes along the Y-axis.
$y-axis-stroke	Color	null	Sets the color to apply to the Y-axis line.
$y-axis-stroke-thickness	Number	null	Sets the thickness to apply to the Y-axis line.
$y-axis-title-alignment	String	null	Sets the horizontal alignment of the Y-axis title.
$y-axis-title-margin	List	null	Sets the margin (top, right, bottom, left) of a title on the Y-axis.
$y-axis-title-text-color	Color	null	Sets the color of a title on the Y-axis.
$y-axis-title-text-style	String	null	Sets the CSS font property for the title on the Y-axis.
$y-axis-tick-length	Number	null	Sets the length of tickmarks along the Y-axis.
$y-axis-tick-stroke	Color	null	Sets the color to apply to tickmarks along the Y-axis.
$y-axis-tick-stroke-thickness	Number	null	Sets the thickness to apply to tickmarks along the Y-axis.

Requires

function extend

function data-chart-theme public view code open_in_new

Example

$my-chart-theme: data-chart-theme($brushes: (orange, blue, pink));
// Pass the theme to the css-vars mixin
@include css-vars($my-chart-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$target	Map	'angular'	The target platform to be used when scoping the theme variables.
$margin	List	null	Sets the margin (top, right, bottom, left) of the chart content.
$title-text-color	Color	null	Sets the color of the chart title.
$title-margin	List	null	Sets the margin (top, right, bottom, left) of the chart title.
$subtitle-text-color	Color	null	Sets the color of the chart subtitle.
$subtitle-margin	List	null	Sets the margins (top, right, bottom, left) of the chart subtitle.
$brushes	List	null	Defines the palette from which automatically assigned series colors are selected.
$marker-brushes	List	null	Defines the palette from which automatically assigned marker brushes are selected.
$outlines	List	null	Defines the palette from which automatically assigned series outline colors are selected.
$marker-outlines	List	null	Defines the palette from which automatically assigned marker outlines are selected.
$plot-area-background	Color	null	Sets the brush used as the background for the current Chart object's plot area.
$title-horizontal-alignment	String	null	The horizontal alignment to use for the title. Valid options are 'left', 'center', and 'right';
$subtitle-horizontal-alignment	String	null	The horizontal alignment to use for the subtitle. Valid options are 'left', 'center', and 'right';
$axis-label-margin	List	null	Sets the margin (top, right, bottom, left) of labels on the both axes.
$axis-label-text-color	Color	null	Sets the color of labels on both axes.
$axis-label-text-style	String	null	Sets the CSS font property for labels on both axes.
$axis-label-vertical-alignment	String	null	Sets the vertical alignment of X-axis labels.
$axis-major-stroke	Color	null	Sets the color to apply to major gridlines along both axes.
$axis-major-stroke-thickness	Number	null	Sets the thickness to apply to major gridlines on both axes.
$axis-minor-stroke	Color	null	Sets the color to apply to minor gridlines along both axes.
$axis-minor-stroke-thickness	Number	null	Sets the thickness to apply to minor gridlines along both axes.
$axis-strip	Color	null	Sets the color to apply to stripes along both axes.
$axis-stroke	Color	null	Sets the color to apply to both axes.
$axis-stroke-thickness	Number	null	Sets the thickness to apply to both axes.
$axis-tick-length	Number	null	Sets the length of tickmarks along both axes.
$axis-tick-stroke	Color	null	Sets the color to apply to tickmarks along both axes.
$axis-tick-stroke-thickness	Number	null	Sets the thickness to apply to tickmarks along both axes.
$axis-title-alignment	String	null	Sets the horizontal alignment of both axes.
$axis-title-margin	List	null	Sets the margin (top, right, bottom, left) of a title on both axes.
$axis-title-text-color	Color	null	Sets the color of the title on the X-axis.
$axis-title-text-style	String	null	Sets the CSS font property for the title on both axes.

Requires

function extend

function doughnut-chart-theme public view code open_in_new

Example

$my-chart-theme: doughnut-chart-theme($brushes: (orange, blue, pink));
// Pass the theme to the css-vars mixin
@include css-vars($my-chart-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$target	Map	'angular'	The target platform to be used when scoping the theme variables.
$others-category-fill	Color	null	Sets the fill color for others category.
$others-category-opacity	Number	null	Sets the opacity for others category.
$others-category-stroke	Color	null	Sets the others category stroke color.
$others-category-stroke-thickness	Number	null	Sets the others category stroke thickness.
$selected-slice-fill	Color	null	Sets the fill color of the selected slice.
$selected-slice-opacity	Number	null	Sets the opacity of the selected slice.
$selected-slice-stroke	Color	null	Sets the stroke color of the selected slice.
$selected-slice-stroke-thickness	Number	null	Sets the stroke thickness of the selected slice.

Requires

function extend

function linear-gauge-theme public view code open_in_new

Example

$custom-gauge-theme: linear-gauge-theme($brushes: (red, green, blue));
// Pass the theme to the css-vars mixin
@include css-vars($custom-gauge-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$target	Map	'angular'	The target platform to be used when scoping the theme variables.
$backing-brush	Color	null	Sets the color to use to fill the backing of the linear gauge.
$backing-outline	Color	null	Sets the color to use for the outline of the backing.
$backing-stroke-thickness	Number	null	Sets the stroke thickness of the backing outline.
$font-brush	Color	null	Sets the color to use for the label font.
$minor-tick-stroke-thickness	Number	null	Sets the stroke thickness to use when rendering minor ticks.
$needle-breadth	Number	null	Sets the needle breadth.
$needle-brush	Color	null	Sets the color to use for the needle element.
$needle-inner-base-width	Number	null	Sets the width of the needle's inner base.
$needle-inner-point-width	Number	null	Sets the width of the needle's inner point.
$needle-outer-base-width	Number	null	Sets the width of the needle's outer base.
$needle-outer-point-width	Number	null	Sets the width of the needle's outer point.
$needle-outline	Color	null	Sets the color to use for the outline of needle element.
$needle-stroke-thickness	Number	null	Sets the stroke thickness to use when rendering single actual value element.
$range-brushes	List	null	Sets a collection of colors to be used as the palette for linear gauge ranges.
$range-outlines	List	null	Sets a collection of colors to be used as the palette for linear gauge outlines.
$scale-brush	Color	null	Sets the color to use to fill the scale of the linear gauge.
$scale-outline	Color	null	Sets the color to use for the outline of the scale.
$scale-stroke-thickness	Number	null	Sets the stroke thickness of the scale outline.
$tick-brush	Color	null	Sets the color to use for the major tickmarks.
$tick-stroke-thickness	Number	null	Sets the stroke thickness to use when rendering ticks.

Requires

function extend

function radial-gauge-theme public view code open_in_new

Example

$custom-gauge-theme: radial-gauge-theme($brushes: (red, green, blue));
// Pass the theme to the css-vars mixin
@include css-vars($custom-gauge-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$target	Map	'angular'	The target platform to be used when scoping the theme variables.
$width	Map	null	The width of the gauge in pixels, string (px) or percentage (%).
$height	Map	null	The height of the gauge in pixels, string (px) or percentage (%).
$backing-brush	Color	null	Sets the color to use to fill the backing of the linear gauge.
$backing-outline	Color	null	Sets the color to use for the outline of the backing.
$backing-stroke-thickness	Number	null	Sets the stroke thickness of the backing outline.
$font-brush	Color	null	Sets the color to use for the label font.
$minor-tick-stroke-thickness	Number	null	Sets the stroke thickness to use when rendering minor ticks.
$needle-brush	Color	null	Sets the color to use for the needle element.
$needle-outline	Color	null	Sets the color to use for the outline of needle element.
$needle-stroke-thickness	Number	null	Sets the stroke thickness to use when rendering single actual value element.
$range-brushes	List	null	Sets a collection of colors to be used as the palette for linear gauge ranges.
$range-outlines	List	null	Sets a collection of colors to be used as the palette for linear gauge outlines.
$scale-brush	Color	null	Sets the color to use to fill the scale of the linear gauge.
$tick-brush	Color	null	Sets the color to use for the major tickmarks.
$tick-stroke-thickness	Number	null	Sets the stroke thickness to use when rendering ticks.
$needle-pivot-brush	Color	null	Sets the color of the needle pivot point.
$needle-pivot-outline	Color	null	Sets the outline color of the needle pivot point.

Requires

function extend

function bullet-graph-theme public view code open_in_new

Example

$my-chart-theme: bullet-graph-theme($brushes: (orange, blue, pink));
// Pass the theme to the css-vars mixin
@include css-vars($my-chart-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$target	Map	'angular'	The target platform to be used when scoping the theme variables.
$backing-brush	Color	null	Sets the brush to use to fill the backing of the bullet graph.
$backing-outline	Color	null	Sets the brush to use for the outline of the backing.
$backing-stroke-thickness	Number	null	Sets the stroke thickness of the backing outline.
$font-brush	Color	null	Sets the brush to use for the label font.
$minor-tick-brush	Color	null	Sets the brush to use for the minor tickmarks.
$minor-tick-thickness	Number	null	Stroke thickness to use when rendering minor ticks.
$range-brushes	List	null	Sets a collection of brushes to be used as the palette for bullet graph ranges.
$range-outlines	List	null	Sets a collection of brushes to be used as the palette for bullet graph outlines.
$scale-background-brush	Color	null	Sets the background brush for the scale.
$scale-background-outline	Color	null	Sets the background outline for the scale.
$scale-background-thickness	Number	null	Sets the background outline thickness for the scale.
$target-value-breadth	Number	null	Sets the breadth of the target value element.
$target-value-brush	Color	null	Sets the brush to use when rendering the fill of the comparative marker.
$target-value-outline	Color	null	Sets the brush to use when rendering the outline of the target value.
$target-value-thickness	Number	null	Sets the stroke thickness of the outline of the target value bar.
$tick-brush	Color	null	Sets the brush to use for the major tickmarks.
$tick-stroke-thickness	Number	null	Sets the stroke thickness to use when rendering ticks.
$value-brush	Color	null	Sets the brush to use for the actual value element.
$value-outline	Color	null	Sets the brush to use for the outline of actual value element.
$value-stroke-thickness	Number	null	Sets the stroke thickness to use when rendering single actual value element.

Requires

function extend

function pie-chart-theme public view code open_in_new

Example

$my-chart-theme: pie-chart-theme($brushes: (red, orange, blue));
// Pass the theme to the css-vars mixin
@include css-vars($my-chart-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$target	Map	'angular'	The target platform to be used when scoping the theme variables.
$brushes	List	series	Defines the palette from which automatically assigned series colors are selected.
$outlines	List	series	Defines the palette from which automatically assigned series outline colors are selected.
$label-extent	Number	null	Sets the pixel amount by which the labels are offset from the edge of the slices.
$label-inner-color	Color	null	Sets the color for labels rendered inside of the pie chart.
$label-outer-color	Color	null	Sets the color for labels rendered outside of the pie chart.
$labels-position	String	null	Sets the position of chart labels. Valid values are: 'none', 'center', 'insideEnd', 'outsideEnd', and 'bestFit'.
$leader-line-margin	Number	null	Sets the margin between a label and the end of its leader line.
$leader-line-type	String	null	Sets what type of leader lines will be used for the outside end labels. Valid values are: 'straight', 'spline', and 'arc'.
$leader-line-visibility	String	null	Sets whether the leader lines are visible. Valid values are: 'visible' and 'collapsed'.
$radius-factor	Number	null	Sets the scaling factor of the chart's radius. Value between 0 and 1.

Requires

function extend

function shape-chart-theme public view code open_in_new

Example

$my-chart-theme: shape-chart-theme($brushes: (orange, blue, pink));
// Pass the theme to the css-vars mixin
@include css-vars($my-chart-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$target	Map	'angular'	The target platform to be used when scoping the theme variables.
$margin	List	null	Sets the margin (top, right, bottom, left) of the chart content.
$title-alignment	Color	null	Sets horizontal alignment which determines the title position, relative to the left and right edges of the control.
$title-text-color	Color	null	Sets the color of the chart title.
$title-margin	List	null	Sets the margin (top, right, bottom, left) of the chart title.
$subtitle-alignment	String	null	Sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
$subtitle-text-color	Color	null	Sets the color of the chart subtitle.
$subtitle-margin	List	null	Sets the margins (top, right, bottom, left) of the chart subtitle.
$brushes	List	null	Defines the palette from which automatically assigned series colors are selected.
$marker-brushes	List	null	Sets the palette of brushes used for rendering fill area of data point markers.
$outlines	List	null	Sets the palette of brushes to use for outlines on the chart series.
$marker-outlines	List	null	Sets the palette of brushes used for rendering outlines of data point markers.
$thickness	Number	null	Sets the thickness for all series in this chart.
$trend-line-brushes	List	null	Sets the palette of brushes to used for coloring trend lines in this chart.
$trend-line-thickness	Number	null	Sets the thickness of the trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble.
$x-axis-label-margin	List	null	Sets the margin of labels on the X-axis.
$x-axis-label-text-color	Color	null	Sets color of labels on the X-axis.
$x-axis-label-vertical-alignment	String	null	Sets Vertical alignment of X-axis labels.
$x-axis-major-stroke	Color	null	Sets the color to apply to major gridlines along the X-axis.
$x-axis-major-stroke-thickness	Number	null	Sets the thickness to apply to major gridlines along the X-axis.
$x-axis-minor-stroke	Color	null	Sets the color to apply to minor gridlines along the X-axis.
$x-axis-minor-stroke-thickness	Number	null	Sets the thickness to apply to minor gridlines along the X-axis.
$x-axis-strip	Color	null	Sets the color to apply to stripes along the X-axis.
$x-axis-stroke	Color	null	Sets the color to apply to the X-axis line.
$x-axis-stroke-thickness	Number	null	Sets the thickness to apply to the X-axis line.
$x-axis-title-alignment	String	null	Sets Horizontal alignment of the X-axis title.
$x-axis-title-color	Color	null	Sets color of title on the X-axis.
$x-axis-title-margin	List	null	Sets the margin around the title on the X-axis.
$y-axis-label-margin	List	null	Sets the margin of labels on the Y-axis.
$y-axis-label-text-color	Color	null	Sets color of labels on the Y-axis.
$y-axis-label-vertical-alignment	String	null	Sets Vertical alignment of Y-axis labels.
$y-axis-major-stroke	Color	null	Sets the color to apply to major gridlines along the Y-axis.
$y-axis-major-stroke-thickness	Number	null	Sets the thickness to apply to major gridlines along the Y-axis.
$y-axis-minor-stroke	Color	null	Sets the color to apply to minor gridlines along the Y-axis.
$y-axis-minor-stroke-thickness	Number	null	Sets the thickness to apply to minor gridlines along the Y-axis.
$y-axis-strip	Color	null	Sets the color to apply to stripes along the Y-axis.
$y-axis-stroke	Color	null	Sets the color to apply to the Y-axis line.
$y-axis-stroke-thickness	Number	null	Sets the thickness to apply to the Y-axis line.
$y-axis-title-alignment	String	null	Sets Horizontal alignment of the Y-axis title.
$y-axis-title-color	Color	null	Sets color of title on the Y-axis.
$y-axis-title-margin	List	null	Sets the margin around the title on the Y-axis.

Requires

function extend

function sparkline-theme public view code open_in_new

Example

$my-sparkline-theme: sparkline-theme($brushes: (orange, blue, pink));
// Pass the theme to the css-vars mixin
@include css-vars($my-sparkline-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$target	Map	'angular'	The target platform to be used when scoping the theme variables.
$brush	Color	null	Sets the sparkline brush.
$line-thickness	Number	null	Sets the line thickness of the sparkline.
$marker-brush	Color	null	Sets the marker brush of the sparkline.
$marker-size	Color	null	Sets the marker size of the sparkline.
$first-marker-brush	Color	null	Sets the first marker brush of the sparkline.
$first-marker-size	Number	null	Sets the first marker size of the sparkline.
$last-marker-brush	Color	null	Sets the last marker brush of the sparkline.
$last-marker-size	Number	null	Sets the last marker size of the sparkline.
$low-marker-brush	Color	null	Sets the low marker brush of the sparkline.
$low-marker-size	Number	null	Sets the low marker size of the sparkline.
$high-marker-brush	Color	null	Sets the high marker brush of the sparkline.
$high-marker-size	Number	null	Sets the high marker size of the sparkline.
$negative-brush	Color	null	Sets the negative brush of the sparkline.
$negative-marker-brush	Color	null	Sets the negative marker brush of the sparkline.
$negative *	Number	-	marker-size [null] - Sets the negative marker size of the sparkline.
$trend-line-brush	Color	null	Sets the trendline brush of the sparkline.
$trend-line-thickness	Color	null	Sets the thickness of the sparkline's trendline.
$horizontal-axis-brush	Color	null	Sets the horizontal axis line brush of the sparkline.
$vertical-axis-brush	Color	null	Sets the vertical axis line brush of the sparkline.
$normal-range-fill	Color	null	Sets the normal range brush of the sparkline.

Requires

function extend

function action-strip-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color.

Example

Change the background and icon colors in action strip

$my-action-strip-theme: action-strip-theme($background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-action-strip-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$icon-color	Color	null	The color used for the actions icons.
$background	Color	null	The color used for the action strip component content background.
$actions-background	Color	null	The color used for the actions background.
$delete-action	Color	null	The color used for the delete icon in action strip component.
$actions-border-radius	List	null	The border radius used for actions container inside action strip component.

function avatar-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color.

Example

Change the background and icon colors in icon avatars

$my-avatar-theme: avatar-theme($icon-background: black, $icon-color: white);
// Pass the theme to the css-vars() mixin
@include css-vars($my-avatar-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$color	Color	null	The text color used of the avatar.
$icon-color	Color	null	The icon color used of the avatar.
$background	Color	null	The background color used of the avatar.
$border-radius	Number	null	The border-radius used of the avatar.
$size	Number	null	The size of the avatar.

Requires

variables light-material-schema

function badge-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color.

Example

Change the text and icon colors in a badge

$my-badge-theme: badge-theme($icon-color: black, $background-color: white);
// Pass the theme to the css-vars() mixin
@include css-vars($my-badge-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$icon-color	Color	null	The icon color used.
$text-color	Color	null	The text color used.
$border-color	Color	null	The border color used.
$background-color	Color	null	The background color used.
$shadow	box-shadow	null	Sets a shadow to be used for the badge.
$border-radius	Number	null	The border radius used for badge component.
$size	Number	null	The size of the badge component.
$dot-size	Number	null	The size of the dot type badge.

Requires

variables light-material-schema

If only background color is specified, text/icon color will be assigned automatically to a contrasting color.

Example

Change the background in banner

$my-banner-theme: banner-theme($banner-background: #000);
// Pass the theme to the css-vars() mixin
@include css-vars($my-banner-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$banner-background	Color	null	The color used for the banner background.
$banner-message-color	Color	null	The color used for the banner label.
$banner-border-color	Color	null	The color used for the banner border.
$banner-illustration-color	Color	null	The color used for the banner illustration.
$border-radius	Number	null	The border-radius for the banner.

Requires

variables light-material-schema

function bottom-nav-theme public view code open_in_new

If only background color is specified, the label and icon colors will be assigned automatically to a contrasting color.

Example

Set a custom background color

$my-bottom-nav-theme: bottom-nav-theme($background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-bottom-nav-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The background color used for the toast.
$label-color	Color	null	The label color used in idle state.
$icon-color	Color	null	The icon color used in idle state.
$label-selected-color	Color	null	The label color used in selected state.
$icon-selected-color	Color	null	The icon color used in selected state.
$icon-disabled-color	Color	null	The disabled color of the icon.
$label-disabled-color	Color	null	The disabled color of the label.
$border-color	Color	null	The border color of the bottom navigation.
$shadow	box-shadow	null	Sets a shadow to be used for the bar.

Requires

variables light-material-schema

function button-group-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.

Example

Change the background, text, and border colors

$my-button-group-theme: button-group-theme(
  $item-text-color: white,
  $item-background: rgba(0, 0, 0, .8),
  $item-border-color: #dadada
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-group-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$shadow	box-shadow	null	The shadow to be applied for the button group.
$item-text-color	Color	null	The text color for button group items.
$item-icon-color	color	null	The icon color for button group items.
$item-background	Color	null	The background color for button group items .
$item-border-color	Color	null	The border color between button group items.
$item-hover-text-color	Color	null	The hover text color for button group items.
$item-hover-icon-color	Color	null	The hover icon color for button group items.
$item-hover-background	Color	null	The hover background color for button group items.
$item-hover-border-color	Color	null	The hover border color between button group items.
$item-focused-text-color	Color	null	The focused text color for button group items.
$item-focused-background	Color	null	The focused background color for button group items.
$item-focused-border-color	Color	null	The focused border color for an item from the button group.
$item-focused-hover-background	Color	null	The focused & hover background color for button group items.
$idle-shadow-color	Color	null	The outline color of focused button group items.
$selected-shadow-color	Color	null	The outline color of focused/selected button group items.
$disabled-text-color	Color	null	The text/icon color for a disabled item in the button group.
$disabled-background-color	Color	null	The background color for a disabled item in the button group.
$item-disabled-border	Color	null	The border color for a disabled item in the button group.
$item-selected-text-color	Color	null	The text color for a selected item in the button group.
$item-selected-icon-color	Color	null	The icon color for a selected item in the button group.
$item-selected-background	Color	null	The background color for a selected item in the button group.
$item-selected-border-color	Color	null	The border color for a selected item from the button group.
$item-selected-hover-text-color	Color	null	The text color for a selected item in hover state in the button group.
$item-selected-hover-icon-color	Color	null	The icon color for a selected item in hover state in the button group.
$item-selected-hover-background	Color	null	The background color for a selected item in hover state in the button group.
$item-selected-hover-border-color	Color	null	The border color for a selected item in hover state in the button group.
$item-selected-focus-background	Color	null	The background color for a selected item in focused state in the button group.
$item-selected-focus-hover-background	Color	null	The background color for a selected item in focused & hover state in the button group.
$disabled-selected-text-color	Color	null	The disabled text color for a selected item in the button group.
$disabled-selected-icon-color	Color	null	The disabled icon color for a selected item in the button group.
$disabled-selected-background	Color	null	The disabled background color for a selected item in the button group.
$disabled-selected-border-color	Color	null	The disabled border color for a selected item from the button group.
$border-radius	List	null	The border radius used for button-group component.

Requires

variables light-material-schema

function button-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.

Example

Change the background and text colors in contained buttons

$my-button-theme: button-theme(
  $foreground: white,
  $background: black
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The background color of the button.
$foreground	Color	null	The text color of the button.
$icon-color	Color	null	The icon color in the button.
$icon-color-hover	Color	null	The icon color in the button on hover.
$hover-background	Color	null	The hover background color of the button.
$hover-foreground	Color	null	The hover text color of the button.
$focus-background	Color	null	The focus background color of the button.
$focus-foreground	Color	null	The focus text color of the button.
$focus-hover-background	Color	null	The background color on focus hovered state of the button.
$focus-hover-foreground	Color	null	The text color on focus hovered state of the button.
$focus-visible-background	Color	null	The focus-visible background color of the button.
$focus-visible-foreground	Color	null	The focus-visible text color of the button.
$active-background	Color	null	The active background of the button.
$active-foreground	Color	null	The active text color of the button.
$border-radius	List	null	The border radius of the button.
$border-color	Color	null	The border color of the button.
$hover-border-color	Color	null	The hover border color of the button.
$focus-border-color	Color	null	The focus border color of the button.
$focus-visible-border-color	Color	null	The focus-visible border color of the button.
$active-border-color	Color	null	The active border color of the button.
$shadow-color	Color	null	The shadow color of the button.
$resting-shadow	Color	null	The shadow of the button in its idle state.
$hover-shadow	Color	null	The shadow of the button in its hover state.
$focus-shadow	Color	null	The shadow of the button in its focus state.
$active-shadow	Color	null	The shadow of the button in its active state.
$disabled-background	Color	null	The disabled background color of the button.
$disabled-foreground	Color	null	The disabled text color of the button.
$disabled-icon-color	Color	null	The disabled icon color of the button.
$disabled-border-color	Color	null	The disabled border color of the button.

Requires

variables light-material-schema

function contained-button-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.

Example

Change the background and text colors in contained buttons

$my-button-theme: contained-button-theme(
  $foreground: white,
  $background: black
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The background color of the button.
$foreground	Color	null	The text color of the button.
$icon-color	Color	null	The icon color in the button.
$icon-color-hover	Color	null	The icon color in the button on hover.
$hover-background	Color	null	The hover background color of the button.
$hover-foreground	Color	null	The hover text color of the button.
$focus-background	Color	null	The focus background color of the button.
$focus-foreground	Color	null	The focus text color of the button.
$focus-hover-background	Color	null	The background color on focus hovered state of the button.
$focus-hover-foreground	Color	null	The text color on focus hovered state of the button.
$focus-visible-background	Color	null	The focus-visible background color of the button.
$focus-visible-foreground	Color	null	The focus-visible text color of the button.
$active-background	Color	null	The active background of the button.
$active-foreground	Color	null	The active text color of the button.
$border-radius	List	null	The border radius of the button.
$border-color	Color	null	The border color of the button.
$hover-border-color	Color	null	The hover border color of the button.
$focus-border-color	Color	null	The focus border color of the button.
$focus-visible-border-color	Color	null	The focus-visible border color of the button.
$active-border-color	Color	null	The active border color of the button.
$shadow-color	Color	null	The shadow color of the button.
$resting-shadow	Color	null	The shadow of the button in its idle state.
$hover-shadow	Color	null	The shadow of the button in its hover state.
$focus-shadow	Color	null	The shadow of the button in its focus state.
$active-shadow	Color	null	The shadow of the button in its focus state.
$disabled-background	Color	null	The disabled background color of the button.
$disabled-foreground	Color	null	The disabled text color of the button.
$disabled-icon-color	Color	null	The disabled icon color of the button.
$disabled-border-color	Color	null	The disabled border color of the button.

Requires

variables light-material-schema

function fab-button-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.

Example

Change the background and text colors in fab buttons

$my-button-theme: fab-button-theme(
  $foreground: white,
  $background: black
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The background color of the button.
$foreground	Color	null	The text color of the button.
$icon-color	Color	null	The icon color in the button.
$icon-color-hover	Color	null	The icon color in the button on hover.
$hover-background	Color	null	The hover background color of the button.
$hover-foreground	Color	null	The hover text color of the button.
$focus-background	Color	null	The focus background color of the button.
$focus-foreground	Color	null	The focus text color of the button.
$focus-hover-background	Color	null	The background color on focus hovered state of the button.
$focus-hover-foreground	Color	null	The text color on focus hovered state of the button.
$focus-visible-background	Color	null	The focus-visible background color of the button.
$focus-visible-foreground	Color	null	The focus-visible text color of the button.
$active-background	Color	null	The active background of the button.
$active-foreground	Color	null	The active text color of the button.
$border-radius	List	null	The border radius of the button.
$border-color	Color	null	The border color of the button.
$hover-border-color	Color	null	The hover border color of the button.
$focus-border-color	Color	null	The focus border color of the button.
$focus-visible-border-color	Color	null	The focus-visible border color of the button.
$active-border-color	Color	null	The active border color of the button.
$shadow-color	Color	null	The shadow color of the button.
$resting-shadow	Color	null	The shadow of the button in its idle state.
$hover-shadow	Color	null	The shadow of the button in its hover state.
$focus-shadow	Color	null	The shadow of the button in its focus state.
$active-shadow	Color	null	The shadow of the button in its focus state.
$disabled-background	Color	null	The disabled background color of the button.
$disabled-foreground	Color	null	The disabled text color of the button.
$disabled-icon-color	Color	null	The disabled icon color of the button.
$disabled-border-color	Color	null	The disabled border color of the button.

Requires

variables light-material-schema

function flat-button-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.

Example

Change the text colors in flat buttons

$my-button-theme: flat-button-theme(
  $foreground: black,
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The background color of the button.
$foreground	Color	null	The text color of the button.
$icon-color	Color	null	The icon color in the button.
$icon-color-hover	Color	null	The icon color in the button on hover.
$hover-background	Color	null	The hover background color of the button.
$hover-foreground	Color	null	The hover text color of the button.
$focus-background	Color	null	The focus background color of the button.
$focus-foreground	Color	null	The focus text color of the button.
$focus-hover-background	Color	null	The background color on focus hovered state of the button.
$focus-hover-foreground	Color	null	The text color on focus hovered state of the button.
$focus-visible-background	Color	null	The focus-visible background color of the button.
$focus-visible-foreground	Color	null	The focus-visible text color of the button.
$active-background	Color	null	The active background of the button.
$active-foreground	Color	null	The active text color of the button.
$border-radius	List	null	The border radius of the button.
$border-color	Color	null	The border color of the button.
$hover-border-color	Color	null	The hover border color of the button.
$focus-border-color	Color	null	The focus border color of the button.
$focus-visible-border-color	Color	null	The focus-visible border color of the button.
$active-border-color	Color	null	The active border color of the button.
$shadow-color	Color	null	The shadow color of the button.
$disabled-background	Color	null	The disabled background color of the button.
$disabled-foreground	Color	null	The disabled text color of the button.
$disabled-icon-color	Color	null	The disabled icon color of the button.
$disabled-border-color	Color	null	The disabled border color of the button.

Requires

variables light-material-schema

function outlined-button-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.

Example

Change the text colors in outlined buttons

$my-button-theme: outlined-button-theme(
  $foreground: black,
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-button-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The background color of the button.
$foreground	Color	null	The text color of the button.
$icon-color	Color	null	The icon color in the button.
$icon-color-hover	Color	null	The icon color in the button on hover.
$hover-background	Color	null	The hover background color of the button.
$hover-foreground	Color	null	The hover text color of the button.
$focus-background	Color	null	The focus background color of the button.
$focus-foreground	Color	null	The focus text color of the button.
$focus-hover-background	Color	null	The background color on focus hovered state of the button.
$focus-hover-foreground	Color	null	The text color on focus hovered state of the button.
$focus-visible-background	Color	null	The focus-visible background color of the button.
$focus-visible-foreground	Color	null	The focus-visible text color of the button.
$active-background	Color	null	The active background of the button.
$active-foreground	Color	null	The active text color of the button.
$border-radius	List	null	The border radius of the button.
$border-color	Color	null	The border color of the button.
$hover-border-color	Color	null	The hover border color of the button.
$focus-border-color	Color	null	The focus border color of the button.
$focus-visible-border-color	Color	null	The focus-visible border color of the button.
$active-border-color	Color	null	The active border color of the button.
$shadow-color	Color	null	The shadow color of the button.
$disabled-background	Color	null	The disabled background color of the button.
$disabled-foreground	Color	null	The disabled text color of the button.
$disabled-icon-color	Color	null	The disabled icon color of the button.
$disabled-border-color	Color	null	The disabled border color of the button.

Requires

variables light-material-schema

function calendar-theme public view code open_in_new

If only header background color is specified, that color will be used as the leading color for all accented elements, such as: - current date color - selected date background - picker elements hover colors - year/month hover/selected colors If only background colors are specified, text/icon colors will be assigned automatically to a contrasting color.

Example

Change the header and content background colors

$my-calendar-theme: calendar-theme(
  $header-background: purple,
  $content-background: black
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-calendar-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$size	Number	null	Size of days, months, and years views.
$inner-size	Number	null	Inner size for calendar elements.
$weekday-color	Color	null	Color for weekday labels.
$actions-divider-color	Color	null	Divider color for date-picker actions.
$border-radius	List	null	Border radius for calendar container.
$content-background	Color	null	Background color for calendar.
$border-color	Color	null	Border color for calendar container.
$header-background	Color	null	Header background color.
$header-foreground	Color	null	Header foreground color.
$picker-foreground	Color	null	Foreground for the calendar picker.
$picker-background	Color	null	Background for the calendar picker.
$picker-hover-foreground	Color	null	:Hover foreground for the calendar picker.
$picker-focus-foreground	Color	null	:Focus foreground for the calendar picker.
$navigation-color	Color	null	Icon color for month navigation.
$navigation-hover-color	Color	null	:Hover color for navigation icons.
$navigation-focus-color	Color	null	:Focus color for navigation icons.
$ym-border-radius	List	null	Border radius for year/month views.
$ym-hover-foreground	Color	null	:Hover foreground for year/month.
$ym-hover-background	Color	null	:Hover background for year/month.
$ym-current-outline-color	Color	null	Outline color for current year/month.
$ym-current-outline-hover-color	Color	null	:Hover outline color for current year/month.
$ym-current-outline-focus-color	Color	null	:Focus outline color for current year/month.
$ym-current-background	Color	null	Background for current year/month.
$ym-current-foreground	Color	null	Foreground for current year/month.
$ym-current-hover-foreground	Color	null	:Hover foreground for current year/month.
$ym-current-hover-background	Color	null	:Hover background for current year/month.
$ym-selected-outline-color	Color	null	Outline color for selected year/month.
$ym-selected-hover-outline-color	Color	null	:Hover outline color for selected year/month.
$ym-selected-focus-outline-color	Color	null	:Focus outline color for selected year/month.
$ym-selected-foreground	Color	null	Foreground for selected year/month.
$ym-selected-background	Color	null	Background for selected year/month.
$ym-selected-hover-foreground	Color	null	:Hover foreground for selected year/month.
$ym-selected-hover-background	Color	null	:Hover background for selected year/month.
$ym-selected-current-outline-color	Color	null	Outline color for selected current year/month.
$ym-selected-current-outline-hover-color	Color	null	:Hover outline color for selected current year/month.
$ym-selected-current-outline-focus-color	Color	null	:Focus outline color for selected current year/month.
$ym-selected-current-foreground	Color	null	Foreground for selected current year/month.
$ym-selected-current-background	Color	null	Background for selected current year/month.
$ym-selected-current-hover-foreground	Color	null	:Hover foreground for selected current year/month.
$ym-selected-current-hover-background	Color	null	:Hover background for selected current year/month.
$week-number-border-radius	List	null	Border radius for week number column.
$week-number-foreground	Color	null	Foreground for week number column.
$week-number-background	Color	null	Background for week number column.
$content-foreground	Color	null	The foreground color for idle dates.
$weekend-color	Color	null	Color for weekend days.
$inactive-color	Color	null	Color for inactive dates (outside current month).
$date-border-radius	List	null	Border radius for date cells.
$date-border-color	Color	null	Border color for date cells.
$date-hover-border-color	Color	null	:Hover border color for date cells.
$date-focus-border-color	Color	null	:Focus border color for date cells.
$date-hover-background	Color	null	:Hover background for date cells.
$date-focus-background	Color	null	:Focus background for date cells.
$date-hover-foreground	Color	null	:Hover foreground for date cells.
$date-focus-foreground	Color	null	:Focus foreground for date cells.
$date-selected-border-color	Color	null	Border color for selected date.
$date-selected-hover-border-color	Color	null	:Hover border color for selected date.
$date-selected-focus-border-color	Color	null	:Focus border color for selected date.
$date-selected-background	Color	null	Background for selected date.
$date-selected-foreground	Color	null	Foreground for selected date.
$date-selected-hover-background	Color	null	:Hover background for selected date.
$date-selected-focus-background	Color	null	:Focus background for selected date.
$date-selected-hover-foreground	Color	null	:Hover foreground for selected date.
$date-selected-focus-foreground	Color	null	:Focus foreground for selected date.
$date-selected-special-border-color	Color	null	Border color for selected special date.
$date-selected-special-hover-border-color	Color	null	:Hover border color for selected special date.
$date-selected-special-focus-border-color	Color	null	:Focus border color for selected special date.
$date-selected-special-background	Color	null	Background for selected special date.
$date-selected-special-foreground	Color	null	Foreground for selected special date.
$date-selected-special-hover-background	Color	null	:Hover background for selected special date.
$date-selected-special-focus-background	Color	null	:Focus background for selected special date.
$date-selected-special-hover-foreground	Color	null	:Hover foreground for selected special date.
$date-selected-special-focus-foreground	Color	null	:Focus foreground for selected special date.
$date-range-border-radius	List	null	Border radius for date range selection.
$date-range-border-color	Color	null	Border color for date range selection.
$date-range-preview-border-color	Color	null	Preview border color for date range selection.
$date-selected-range-foreground	Color	null	Foreground for dates in selected range.
$date-selected-range-background	Color	null	Background for dates in selected range.
$date-selected-range-hover-foreground	Color	null	:Hover foreground for dates in selected range.
$date-selected-range-hover-background	Color	null	:Hover background for dates in selected range.
$date-selected-range-focus-foreground	Color	null	:Focus foreground for dates in selected range.
$date-selected-range-focus-background	Color	null	:Focus background for dates in selected range.
$date-selected-current-range-foreground	Color	null	Foreground for current date in selected range.
$date-selected-current-range-background	Color	null	Background for current date in selected range.
$date-selected-current-range-hover-foreground	Color	null	:Hover foreground for current date in selected range.
$date-selected-current-range-hover-background	Color	null	:Hover background for current date in selected range.
$date-selected-current-range-focus-foreground	Color	null	:Focus foreground for current date in selected range.
$date-selected-current-range-focus-background	Color	null	:Focus background for current date in selected range.
$date-current-border-radius	List	null	Border radius for current date.
$date-current-border-color	Color	null	Border color for current date.
$date-current-hover-border-color	Color	null	:Hover border color for current date.
$date-current-focus-border-color	Color	null	:Focus border color for current date.
$date-current-background	Color	null	Background for current date.
$date-current-foreground	Color	null	Foreground for current date.
$date-current-hover-background	Color	null	:Hover background for current date.
$date-current-focus-background	Color	null	:Focus background for current date.
$date-current-hover-foreground	Color	null	:Hover foreground for current date.
$date-current-focus-foreground	Color	null	:Focus foreground for current date.
$date-selected-current-border-color	Color	null	Border color for selected current date.
$date-selected-current-hover-border-color	Color	null	:Hover border color for selected current date.
$date-selected-current-focus-border-color	Color	null	:Focus border color for selected current date.
$date-selected-current-background	Color	null	Background for selected current date.
$date-selected-current-hover-background	Color	null	:Hover background for selected current date.
$date-selected-current-focus-background	Color	null	:Focus background for selected current date.
$date-selected-current-foreground	Color	null	Foreground for selected current date.
$date-selected-current-hover-foreground	Color	null	:Hover foreground for selected current date.
$date-selected-current-focus-foreground	Color	null	:Focus foreground for selected current date.
$date-special-border-radius	List	null	Border radius for special date.
$date-special-border-color	Color	null	Border color for special date.
$date-special-hover-border-color	Color	null	:Hover border color for special date.
$date-special-focus-border-color	Color	null	:Focus border color for special date.
$date-special-foreground	Color	null	Foreground for special date.
$date-special-background	Color	null	Background for special date.
$date-special-hover-foreground	Color	null	:Hover foreground for special date.
$date-special-hover-background	Color	null	:Hover background for special date.
$date-special-focus-foreground	Color	null	:Focus foreground for special date.
$date-special-focus-background	Color	null	:Focus background for special date.
$date-special-range-border-color	Color	null	Border color for special date in range.
$date-special-range-hover-border-color	Color	null	:Hover border color for special date in range.
$date-special-range-focus-border-color	Color	null	:Focus border color for special date in range.
$date-special-range-foreground	Color	null	Foreground for special date in range.
$date-special-range-hover-foreground	Color	null	:Hover foreground for special date in range.
$date-special-range-focus-foreground	Color	null	:Focus foreground for special date in range.
$date-special-range-background	Color	null	Background for special date in range.
$date-special-range-hover-background	Color	null	:Hover background for special date in range.
$date-special-range-focus-background	Color	null	:Focus background for special date in range.
$date-disabled-foreground	Color	null	Foreground for disabled dates.
$date-disabled-range-foreground	Color	null	Foreground for disabled dates in selected range.

Requires

variables light-material-schema

function card-theme public view code open_in_new

Example

Change the background and content text colors in card

$my-card-theme: card-theme($background: #fff);
// Pass the theme to the css-vars() mixin
@include css-vars($my-card-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The card background color.
$outline-color	Color	null	The color of the outline for outlined type cards.
$header-text-color	Color	null	The text color of the card title.
$subtitle-text-color	Color	null	The text color of the card subtitle.
$content-text-color	Color	null	The text color of the card content.
$actions-text-color	Color	null	The text color of the card buttons.
$resting-shadow	box-shadow	null	The shadow of the card in its resting state.
$hover-shadow	box-shadow	null	The shadow of the card in its hover state.
$border-radius	List	null	The border radius used for card component.

Requires

variables light-material-schema

function carousel-theme public view code open_in_new

Example

Change the previous/next button colors

$my-carousel-theme: carousel-theme(
  $button-background: black,
  $button-hover-background: white
);
// Pass the carousel theme to the css-vars() mixin
@include css-vars($my-carousel-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$slide-background	Color	null	The slide background color.
$button-background	Color	null	The previous/next buttons idle background color.
$button-hover-background	Color	null	The previous/next buttons hover background color.
$button-disabled-background	Color	null	The previous/next buttons disabled background color.
$button-arrow-color	Color	null	The previous/next buttons idle arrow color.
$button-hover-arrow-color	Color	null	The previous/next buttons hover arrow color.
$button-disabled-arrow-color	Color	null	The previous/next buttons disabled arrow color.
$button-border-color	Color	null	The previous/next buttons idle border color.
$button-hover-border-color	Color	null	The previous/next buttons hover border color.
$button-focus-border-color	Color	null	The navigation buttons border color on focus.
$button-disabled-border-color	Color	null	The previous/next buttons disabled border color.
$indicator-background	Color	null	The indicators container background color.
$label-indicator-background	Color	null	The label indicator container background color.
$indicator-dot-color	Color	null	The idle indicator dot color.
$indicator-hover-dot-color	Color	null	The hover indicator dot color.
$indicator-focus-color	Color	null	The indicators border and dot color on focus.
$indicator-border-color	Color	null	The idle indicator border color.
$indicator-active-dot-color	Color	null	The active indicator dot color.
$indicator-active-border-color	Color	null	The active indicator border color.
$indicator-active-hover-dot-color	Color	null	The active indicator dot color on hover.
$button-shadow	box-shadow	null	Shadow underneath the previous/next buttons.
$border-radius	List	null	The border radius used for carousel component.

Requires

variables light-material-schema

function chat-theme public view code open_in_new

Chat Theme

Example

Change background color

$my-chat-theme: chat-theme($background: blue);
// Pass the theme to the css-vars mixin
@include css-vars($my-chat-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.

Requires

variables light-material-schema

function checkbox-theme public view code open_in_new

Checkbox Theme

Example

Change the checked fill color

$my-checkbox-theme: igx-checkbox-theme($fill-color: magenta);
// Pass the theme to the css-vars mixin
@include css-vars($my-checkbox-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$label-color	Color	null	The text color used for the label text.
$label-color-hover	Color	null	The text color used for the label text on hover.
$empty-color	Color	null	The unchecked border color.
$empty-color-hover	Color	null	The unchecked border color on hover.
$empty-fill-color	Color	null	The unchecked fill color.
$fill-color	Color	null	The checked border and fill colors.
$fill-color-hover	Color	null	The checked border and fill colors on hover.
$tick-color	Color	null	The checked mark color.
$tick-color-hover	Color	null	The checked mark color on hover.
$tick-width	Number	null	The checked mark width.
$disabled-color	Color	null	The disabled border and fill colors.
$disabled-tick-color	Color	null	The checked mark color in disabled state.
$disabled-indeterminate-color	Color	null	The disabled border and fill colors in indeterminate state.
$disabled-color-label	Color	null	The disabled label color.
$border-radius	List	null	The border radius used for checkbox component.
$border-radius-ripple	List	null	The border radius used for checkbox ripple.
$focus-outline-color	Color	null	The focus outlined color.
$focus-outline-color-focused	Color	null	The focus outlined color for focused state.
$focus-border-color	Color	null	The focus border color.
$error-color	Color	null	The border and fill colors in invalid state.
$error-color-hover	Color	null	The border and fill colors in invalid state on hover.
$focus-outline-color-error	Color	null	The focus outline error color. Set to light when the surrounding area is dark.

Requires

variables light-material-schema

function chip-theme public view code open_in_new

Chip Theme

Example

Change the background color

$my-chip-theme: igx-chip-theme($background: black);
// Pass the theme to the css-vars mixin
@include css-vars($my-chip-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$border-radius	List	null	The chip border-radius.
$text-color	Color	null	The chip text color.
$background	Color	null	The chip background color.
$border-color	Color	null	The chip border color.
$disabled-text-color	Color	null	The disabled chip text color.
$disabled-background	Color	null	The disabled chip background color.
$disabled-border-color	Color	null	The disabled chip border color.
$ghost-background	Color	null	The chip ghost background color.
$ghost-shadow	box-shadow	null	The chip ghost shadow.
$hover-text-color	Color	null	The chip text hover color.
$hover-background	Color	null	The chip hover background color.
$hover-border-color	Color	null	The chip hover border color.
$focus-text-color	Color	null	The chip text focus color.
$focus-background	Color	null	The chip focus background color.
$focus-border-color	color	null	The chip focus border color.
$selected-text-color	color	null	The selected chip text color.
$selected-background	color	null	The selected chip background color.
$selected-border-color	color	null	The selected chip border color.
$hover-selected-text-color	color	null	The selected chip hover text color.
$hover-selected-background	color	null	The selected chip hover background color.
$hover-selected-border-color	color	null	The selected chip hover border color.
$focus-selected-text-color	color	null	The selected chip text focus color.
$focus-selected-background	color	null	The selected chip focus background color.
$focus-selected-border-color	color	null	The selected chip focus border color.
$remove-icon-color	color	null	The remove icon color for the chip.
$remove-icon-color-focus	color	null	The remove icon color on focus for the chip.

Requires

variables light-material-schema

function column-actions-theme public view code open_in_new

Column actions Theme

Example

Change the title color

$column-actions-theme: igx-column-actions-theme($title-color: black);
// Pass the theme to the css-vars mixin
@include css-vars($column-actions-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$title-color	Color	null	The text color used for the title of the list.
$background-color	Color	null	The background color of the panel.

Requires

variables light-material-schema

function combo-theme public view code open_in_new

Example

Change the combo empty list background

$my-combo-theme: igx-checkbox-theme($empty-list-background);
// Pass the theme to the css-vars mixin
@include css-vars($my-combo-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$search-separator-border-color	Color	null	The combo search box separator color.
$empty-list-placeholder-color	Color	null	The combo placeholder text color.
$empty-list-background	Color	null	The combo list background color.
$toggle-button-background	Color	null	The combo toggle button background color.
$toggle-button-background-focus	Color	null	The combo toggle button background color when the combo is focused in material box variant.
$toggle-button-background-focus--border	Color	null	The combo toggle button background color when the combo is focused in material border variant.
$toggle-button-background-disabled	Color	null	The combo toggle button background color when the combo is disabled.
$toggle-button-foreground	Color	null	The combo toggle button foreground color.
$toggle-button-foreground-focus	Color	null	The combo toggle button foreground color when the combo is focused.
$toggle-button-foreground-disabled	Color	null	The combo toggle button foreground color when the combo is disabled.
$toggle-button-foreground-filled	Color	null	The combo toggle button foreground color when the combo is filled.
$clear-button-background	Color	null	The combo clear button background color.
$clear-button-background-focus	Color	null	The combo clear button background color when the combo is focused.
$clear-button-foreground	Color	null	The combo clear button foreground color.
$clear-button-foreground-focus	Color	null	The combo clear button foreground color when the combo is focused.

Requires

variables light-material-schema

function date-range-picker-theme public view code open_in_new

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$label-color	color	null	The color for date range separator label.

function dialog-theme public view code open_in_new

Dialog Theme

Example

Change the background color

$my-dialog-theme: dialog-theme($background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-dialog-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The dialog background color.
$title-color	Color	null	The dialog title text color.
$message-color	Color	null	The dialog message text color.
$shadow	box-shadow	null	The shadow used for the dialog.
$border-radius	List	null	The border radius used for dialog component.
$border-color	Color	null	The border color used for dialog component.

Requires

variables light-material-schema

function divider-theme public view code open_in_new

Example

Change the color of the divider

$my-divider-theme: divider-theme($color: orange);
// Pass the theme to the css-vars() mixin
@include css-vars($my-divider-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$color	Color	null	The color of the divider. (Gradients are not supported for dashed dividers).
$inset	number	null	The inset value of the divider.

Requires

variables light-material-schema

function dock-manager-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color.

Example

Change the background and icon colors in icon dock-managers

$my-dock-manager-theme: dock-manager-theme();
// Pass the theme to the css-vars() mixin
@include css-vars($my-dock-manager-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$accent-color	Color	null	Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.
$active-color	Color	null	Sets the active text and border colors for tabs, panes, and menus.
$border-color	Color	null	Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
$button-text	Color	null	Sets the button text color.
$context-menu-background	Color	null	Sets the background color for context menus.
$context-menu-background-active	Color	null	Sets the background color for active context menus.
$context-menu-color	Color	null	Sets the text color for context menus.
$context-menu-color-active	Color	null	Sets the text color for active context menus.
$dock-background	Color	null	Sets the background color of the dock manager.
$dock-text	Color	null	Sets the text color of the dock manager.
$drop-shadow-background	Color	null	Sets the drop-shadow background color.
$floating-pane-border-color	Color	null	Sets the border color for floating panes.
$flyout-shadow-color	Color	null	Sets the flyout shadow color.
$joystick-background	Color	null	Sets the background color of the joystick.
$joystick-background-active	Color	null	Sets the background color of the joysticks.
$joystick-border-color	Color	null	Sets the border color of the joystick.
$joystick-icon-color	Color	null	Sets the color for the joystick icons.
$joystick-icon-color-active	Color	null	Sets the color of the active joystick icons.
$pane-content-background	Color	null	Sets the background color of the content panes.
$pane-content-text	Color	null	Sets the text color of the content panes.
$pane-header-background	Color	null	Sets the background color for pane headers.
$pane-header-text	Color	null	Sets the text color for pane headers.
$pinned-header-background	Color	null	Sets the background colors of pinned headers.
$pinned-header-text	Color	null	Sets the text colors of pinned headers.
$background-color	Color	null	Sets the base dock manager color as well as the pane headers and tabs background colors.
$splitter-background	Color	null	Sets the background color for the splitters.
$splitter-handle	Color	null	Sets the background color for the splitter handles.
$tab-background	Color	null	Sets the background color for tabs.
$tab-background-active	Color	null	Sets the background color for active tabs.
$tab-border-color	Color	null	Sets the border color for tabs.
$tab-border-color-active	Color	null	Sets the border color for active tabs.
$tab-text	Color	null	Sets the text color for tabs.
$tab-text-active	Color	null	Sets the text color for active tabs.
$text-color	Color	null	Sets the text color for most elements in the dock manager. Used as the default joystick icon color.

Requires

variables light-material-schema

function drop-down-theme public view code open_in_new

Generates a drop-down theme.

Example

Change the background-color of the dropdown

$my-dropdown-theme: drop-down-theme($background-color: #09f);
// Pass the theme to the css-vars() mixin
@include css-vars($my-dropdown-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background-color	Color	null	The drop-down background color.
$header-text-color	Color	null	The drop-down header text color.
$item-text-color	Color	null	The drop-down item text color.
$item-icon-color	Color	null	The drop-down item icon color.
$hover-item-text-color	Color	null	The drop-down item hover text color.
$hover-item-icon-color	Color	null	The drop-down item hover icon color.
$hover-item-background	Color	null	The drop-down hover item background color.
$focused-item-background	Color	null	The drop-down focused item background color.
$focused-item-text-color	Color	null	The drop-down focused item text color.
$focused-item-border-color	Color	null	The drop-down item focused border color.
$selected-item-background	Color	null	The drop-down selected item background color.
$selected-item-text-color	Color	null	The drop-down selected item text color.
$selected-item-icon-color	Color	null	The drop-down selected item icon color.
$selected-hover-item-background	Color	null	The drop-down selected item hover background color.
$selected-hover-item-text-color	Color	null	The drop-down selected item hover text color.
$selected-hover-item-icon-color	Color	null	The drop-down selected item hover icon color.
$selected-focus-item-background	Color	null	The drop-down selected item focus background color.
$selected-focus-item-text-color	Color	null	The drop-down selected item focus text color.
$disabled-item-background	Color	null	The drop-down disabled item background color.
$disabled-item-text-color	Color	null	The drop-down disabled item text color.
$shadow	box-shadow	null	Sets a shadow to be used for the drop-down.
$border-width	Number	null	The border width used for drop-down component.
$border-color	Color	null	The border color used for drop-down component.
$border-radius	List	null	The border radius used for drop-down component.
$item-border-radius	List	null	The border radius used for drop-down items.

Requires

variables light-material-schema

function expansion-panel-theme public view code open_in_new

Expansion panel Theme

Example

Change the header background color

$my-expansion-panel-theme: expansion-panel-theme($header-background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-expansion-panel-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$header-background	Color	null	The panel header background color.
$header-focus-background	Color	null	The panel header focus background color.
$header-title-color	Color	null	The panel header title text color.
$header-description-color	Color	null	The panel header description text color.
$header-icon-color	Color	null	The panel header icon color.
$body-color	Color	null	The panel body text color.
$body-background	Color	null	The panel body background color.
$disabled-text-color	Color	null	The panel disabled text color.
$disabled-description-color	Color	null	The panel disabled header description text color.
$expanded-margin	Number	null	The expansion panel margin in expanded state when positioned inside accordion.
$border-radius	List	null	The border radius used for expansion-panel component.

Requires

variables light-material-schema

function grid-summary-theme public view code open_in_new

Example

Change the summaries background and labels color

$my-summary-theme: grid-summary-theme(
  $background-color: black,
  $label-color: white
);
// Pass the theme to the css-vars mixin
@include css-vars($my-summary-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background-color	Color	null	The summaries background color is inherited form igx-grid__tfoot
$label-color	Color	null	The summaries label color.
$result-color	Color	null	The summaries value/result color.
$border-color	Color	null	The summaries border color.
$pinned-border-width	Color	null	The border width of the summary panel.
$pinned-border-style	Color	null	The border style of the summary panel.
$pinned-border-color	Color	null	The border color of the summary panel.
$label-hover-color	Color	null	The summaries hover label color.

Requires

variables light-material-schema

function grid-theme public view code open_in_new

Example

Change the header background color

$my-grid-theme: grid-theme($header-background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-grid-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$header-background	Color	null	The table header background color.
$header-text-color	Color	null	The table header text color.
$header-border-width	String	null	The border width used for header borders.
$header-border-style	String	null	The border style used for header borders.
$header-border-color	Color	null	The color used for header borders.
$header-selected-background	Color	null	The table header background color when selected (ex. column selection).
$header-selected-text-color	Color	null	The table header text color when selected (ex. column selection).
$sorted-header-icon-color	Color	null	The sort icon color when sorted.
$sortable-header-icon-hover-color	color	null	The icon color on hover in grid header when the column is sortable.
$content-background	Color	null	The table body background color.
$content-text-color	Color	null	The table body text color.
$ghost-header-text-color	Color	null	The dragged header text color.
$ghost-header-icon-color	Color	null	The dragged header icon color.
$ghost-header-background	Color	null	The dragged header background color.
$row-odd-background	Color	null	The background color of odd rows.
$row-even-background	Color	null	The background color of even rows.
$row-odd-text-color	Color	null	The text color of odd rows.
$row-even-text-color	Color	null	The text color of even rows.
$row-selected-background	Color	null	The selected row background color.
$row-selected-hover-background	Color	null	The selected row hover background color.
$row-selected-text-color	Color	null	The selected row text color.
$row-selected-hover-text-color	Color	null	The selected row hover text color.
$row-hover-background	Color	null	The hover row background color.
$row-hover-text-color	Color	null	The hover row text color.
$row-border-color	Color	null	The row bottom border color.
$pinned-border-width	String	null	The border width of the pinned border.
$pinned-border-style	String	null	The CSS border style of the pinned border.
$pinned-border-color	Color	null	The color of the pinned border.
$cell-active-border-color	Color	null	The border color for the currently active(focused) cell.
$cell-selected-background	Color	null	The selected cell background color.
$cell-selected-text-color	Color	null	The selected cell text color.
$cell-editing-background	Color	null	The background color of the cell being edited.
$cell-editing-foreground	Color	null	The cell text color in edit mode.
$cell-editing-focus-foreground	Color	null	The cell text color in edit mode on focus.
$cell-edited-value-color	Color	null	The text color of a cell that has been edited.
$cell-new-color	Color	null	The text color of a new, unedited cell. Used when adding new row in a grid.
$cell-disabled-color	Color	null	The text color of a disabled cell.
$cell-selected-within-background	Color	null	The background of the selected cell inside a selected row/column.
$cell-selected-within-text-color	Color	null	The color of the selected cell inside a selected row/column.
$edit-mode-color	Color	null	The color applied around the row/cell when in editing mode.
$edited-row-indicator	Color	null	The color applied to the edited row indicator line.
$resize-line-color	Color	null	The table header resize line color.
$drop-indicator-color	Color	null	The color applied to the line between the columns when dragging a column.
$grouparea-background	Color	null	The grid group area background color.
$grouparea-color	Color	null	The grid group area color.
$group-row-background	Color	null	The grid group row background color.
$group-row-selected-background	Color	null	The drop area background on drop color.
$group-label-column-name-text	Color	null	The grid group row column name text color.
$group-label-icon	Color	null	The grid group row icon color.
$group-label-text	Color	null	The grid group row text color.
$expand-all-icon-color	Color	null	The grid header expand all group rows icon color.
$expand-all-icon-hover-color	Color	null	The grid header expand all group rows icon hover color.
$expand-icon-color	Color	null	The grid row expand icon color.
$expand-icon-hover-color	Color	null	The grid row expand icon hover color.
$active-expand-icon-color	Color	null	The drop area background on drop color.
$active-expand-icon-hover-color	Color	null	The drop area background on drop color.
$group-count-background	Color	null	The grid group row cont badge background color.
$group-count-text-color	Color	null	The grid group row cont badge text color.
$drop-area-text-color	Color	null	The drop area text color.
$drop-area-icon-color	Color	null	The drop area icon color.
$drop-area-background	Color	null	The drop area background color.
$drop-area-on-drop-background	Color	null	The drop area background on drop color.
$filtering-header-background	Color	null	The background color of the filtered column header.
$filtering-header-text-color	Color	null	The text color of the filtered column header.
$filtering-row-background	Color	null	The background color of the filtering row.
$filtering-row-text-color	Color	null	The text color of the filtering row.
$excel-filtering-header-foreground	Color	null	The text color of the header in the excel style filtering.
$excel-filtering-subheader-foreground	Color	null	The text color of the sorting and moving headers in the excel style filtering.
$excel-filtering-actions-foreground	Color	null	The text color of the excel style filtering options.
$excel-filtering-actions-hover-foreground	Color	null	The text color of the excel style filtering options in hover/focus state.
$excel-filtering-actions-disabled-foreground	Color	null	The text color of the excel style filtering options in disabled state.
$tree-filtered-text-color	Color	null	Grouping row background color on focus.
$summaries-patch-background	Color	null	The leading summaries patch backround. Used in hierarchical grids.
$row-highlight	Color	null	The grid row highlight indication color.
$grid-shadow	box-shadow	null	The shadow of the grid.
$drag-shadow	box-shadow	null	The shadow used for movable elements (ex. column headers).
$row-ghost-background	color	null	The dragged row background color.
$row-drag-color	color	null	The row drag handle color.
$grid-border-color	Color	null	The color of the grid border.
$drop-area-border-radius	List	null	The border radius used for column drop area.

Requires

variables light-material-schema

Example

Change the toolbar background color

$my-toolbar-theme: grid-toolbar-theme(
  $background-color: black
);
// Pass the theme to the css-vars mixin
@include css-vars($my-toolbar-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background-color	Color	null	The toolbar background color.
$title-text-color	Color	null	The toolbar title text color.
$dropdown-background	Color	null	The toolbar drop-down background color.
$item-text-color	Color	null	The toolbar drop-down item text color.
$item-hover-background	Color	null	The toolbar drop-down item hover background color.
$item-hover-text-color	Color	null	The toolbar drop-down item hover text color.
$item-focus-background	Color	null	The toolbar drop-down item focus background color.
$item-focus-text-color	Color	null	The toolbar drop-down item focus text color.
$border-color	Color	null	The toolbar border-bottom color.

Requires

variables light-material-schema

function pivot-data-selector-theme public view code open_in_new

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.

function highlight-theme public view code open_in_new

If only background color(s) specified, text color(s) will be assigned automatically to a contrasting color.

Example

Change the background and icon colors in icon highlight

$my-highlight-theme: highlight-theme($resting-background: black, $active-color: white);
// Pass the theme to the css-vars() mixin
@include css-vars($my-highlight-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$resting-background	Color	null	The background color used for the highlight in its resting state.
$resting-color	Color	null	The text color used for the highlight in its resting state.
$active-background	Color	null	The background color used for the highlight in its active state.
$active-color	Color	null	The text color used for the highlight in its active state.

Requires

variables light-material-schema

function contained-icon-button-theme public view code open_in_new

Generates a theme map for the contained variant of the icon button component.

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema map or icon-button schema to use.
$background	Color	null	Background color for the contained icon button.
$foreground	Color	null	Foreground (icon) color.
$shadow-color	Color	null	Shadow color for the icon button.
$hover-background	Color	null	Background color on hover.
$hover-foreground	Color	null	Foreground color on hover.
$focus-background	Color	null	Background color on focus.
$focus-foreground	Color	null	Foreground color on focus.
$focus-hover-background	Color	null	Background color on focus + hover.
$focus-hover-foreground	Color	null	Foreground color on focus + hover.
$active-background	Color	null	Background color when active.
$active-foreground	Color	null	Foreground color when active.
$border-radius	Length	null	Border radius for the icon button.
$border-color	Color	null	Border color.
$focus-border-color	Color	null	Border color on focus.
$disabled-background	Color	null	Background color when disabled.
$disabled-foreground	Color	null	Foreground color when disabled.
$disabled-border-color	Color	null	Border color when disabled.
$size	Length	null	Size of the icon button.

Requires

variables light-material-schema

function flat-icon-button-theme public view code open_in_new

Generates a theme map for the flat variant of the icon button component.

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema map or icon-button schema to use.
$background	Color	null	Background color for the flat icon button.
$foreground	Color	null	Foreground (icon) color.
$shadow-color	Color	null	Shadow color for the icon button.
$hover-background	Color	null	Background color on hover.
$hover-foreground	Color	null	Foreground color on hover.
$focus-background	Color	null	Background color on focus.
$focus-foreground	Color	null	Foreground color on focus.
$focus-hover-background	Color	null	Background color on focus + hover.
$focus-hover-foreground	Color	null	Foreground color on focus + hover.
$active-background	Color	null	Background color when active.
$active-foreground	Color	null	Foreground color when active.
$border-radius	Length	null	Border radius for the icon button.
$border-color	Color	null	Border color.
$focus-border-color	Color	null	Border color on focus.
$disabled-background	Color	null	Background color when disabled.
$disabled-foreground	Color	null	Foreground color when disabled.
$disabled-border-color	Color	null	Border color when disabled.
$size	Length	null	Size of the icon button.

Requires

variables light-material-schema

function icon-button-theme public view code open_in_new

Generates a theme map for the icon button component.

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema map or icon-button schema to use.
$background	Color	null	Background color for the icon button.
$foreground	Color	null	Foreground (icon) color.
$shadow-color	Color	null	Shadow color for the icon button.
$hover-background	Color	null	Background color on hover.
$hover-foreground	Color	null	Foreground color on hover.
$focus-background	Color	null	Background color on focus.
$focus-foreground	Color	null	Foreground color on focus.
$focus-hover-background	Color	null	Background color on focus + hover.
$focus-hover-foreground	Color	null	Foreground color on focus + hover.
$active-background	Color	null	Background color when active.
$active-foreground	Color	null	Foreground color when active.
$border-radius	Length	null	Border radius for the icon button.
$border-color	Color	null	Border color.
$focus-border-color	Color	null	Border color on focus.
$disabled-background	Color	null	Background color when disabled.
$disabled-foreground	Color	null	Foreground color when disabled.
$disabled-border-color	Color	null	Border color when disabled.
$size	Length	null	Size of the icon button.

Requires

variables light-material-schema

function outlined-icon-button-theme public view code open_in_new

Generates a theme map for the outlined variant of the icon button component.

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema map or icon-button schema to use.
$background	Color	null	Background color for the outlined icon button.
$foreground	Color	null	Foreground (icon) color.
$shadow-color	Color	null	Shadow color for the icon button.
$hover-background	Color	null	Background color on hover.
$hover-foreground	Color	null	Foreground color on hover.
$focus-background	Color	null	Background color on focus.
$focus-foreground	Color	null	Foreground color on focus.
$focus-hover-background	Color	null	Background color on focus + hover.
$focus-hover-foreground	Color	null	Foreground color on focus + hover.
$active-background	Color	null	Background color when active.
$active-foreground	Color	null	Foreground color when active.
$border-radius	Length	null	Border radius for the icon button.
$border-color	Color	null	Border color.
$focus-border-color	Color	null	Border color on focus.
$disabled-background	Color	null	Background color when disabled.
$disabled-foreground	Color	null	Foreground color when disabled.
$disabled-border-color	Color	null	Border color when disabled.
$size	Length	null	Size of the icon button.

Requires

variables light-material-schema

function icon-theme public view code open_in_new

Example

Change the icon color

$my-icon-theme: icon-theme($color: orange);
// Pass the theme to the css-vars() mixin
@include css-vars($my-icon-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$color	Color	null	The icon color.
$size	String	null	The icon size.
$disabled-color	Color	null	The disabled icon color.

Requires

variables light-material-schema

function file-input-theme public view code open_in_new

Example

Change the focused border and label colors

$my-file-input-theme: file-input-theme($file-names-foreground: #09f);
// Pass the theme to the css-vars() mixin
@include css-vars($my-file-input-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$file-names-background	Color	null	The file names container background color.
$file-names-background--focused	Color	null	The file names container background color when the file input is focused.
$file-names-background--filled	Color	null	The file names container background color when the file input is filled.
$file-names-background--disabled	Color	null	The file names container background color when the file input is disabled.
$file-names-foreground	Color	null	The file names color.
$file-names-foreground--focused	Color	null	The file names color when the file input is focused.
$file-names-foreground--filled	Color	null	The file names color when the file input is filled.
$file-names-foreground--disabled	Color	null	The file names color when the file input is disabled.
$file-selector-button-background	Color	null	The file input selector button background color.
$file-selector-button-background--focused	Color	null	The selector button background color when the file input is focused.
$file-selector-button-background--filled	Color	null	The selector button background color when the file input is filled.
$file-selector-button-background--disabled	Color	null	The selector button background color when the file input is disabled.
$file-selector-button-foreground	Color	null	The file input selector button foreground color.
$file-selector-button-foreground--focused	Color	null	The selector button foreground color when the file input is focused.
$file-selector-button-foreground--filled	Color	null	The selector button foreground color when the file input is filled.
$file-selector-button-foreground--disabled	Color	null	The selector button foreground color when the file input is disabled.

function input-group-theme public view code open_in_new

Example

Change the focused border and label colors

$my-input-group-theme: input-group-theme($focused-secondary-color: pink, $focused-bottom-line-color: pink);
// Pass the theme to the css-vars() mixin
@include css-vars($my-input-group-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$idle-text-color	Color	null	The input text color in the idle state.
$filled-text-color	Color	null	The input text color in the filled state.
$filled-text-hover-color	Color	null	The input text color in the filled state on hover.
$focused-text-color	Color	null	The input text color in the focused state.
$disabled-text-color	Color	null	The input text color in the disabled state.
$helper-text-color	Color	null	The helper text color.
$text-error-color	Color	null	The color used for the error message.
$icon-error-color	Color	null	The color used for the error icon.
$input-prefix-color	Color	null	The input prefix color in the idle state.
$input-prefix-background	Color	null	The background color of an input prefix in the idle state.
$input-prefix-color--filled	Color	null	The input prefix color in the filled state.
$input-prefix-background--filled *	Color	-	] - The background color of an input prefix in the filled state.
$input-prefix-color--focused	Color	null	The input prefix color in the focused state.
$input-prefix-background--focused	Color	null	The background color of an input prefix in the focused state.
$input-suffix-color	Color	null	The input suffix color in the idle state.
$input-suffix-background	Color	null	The background color of an input suffix in the idle state.
$input-suffix-color--filled	Color	null	The input suffix color in the filled state.
$input-suffix-background-filled	Color	null	The background color of an input suffix in the filled state.
$input-suffix-color--focused	Color	null	The input suffix color in the focused state.
$input-suffix-background--focused	Color	null	The background color of an input suffix in the focused state.
$idle-secondary-color	Color	null	The label color in the idle state.
$focused-secondary-color	Color	null	The label color in the focused state.
$idle-bottom-line-color	Color	null	The bottom line and border colors in the idle state.
$hover-bottom-line-color	Color	null	The bottom line and border colors in the hover state.
$focused-bottom-line-color	Color	null	The bottom line and border colors in the focused state.
$disabled-bottom-line-color	Color	null	The bottom line and border colors in the disabled state.
$border-color	Color	null	The border color for input groups of type border and fluent.
$hover-border-color	Color	null	The hover input border for input groups of type border and fluent.
$focused-border-color	Color	null	The focused input border color for input groups of type border and fluent.
$disabled-border-color	Color	null	The disabled border color for input groups of type border and fluent.
$box-background	Color	null	The background color of an input group of type box.
$box-background-hover	Color	null	The background color on hover of an input group of type box.
$box-background-focus	Color	null	The background color on focus of an input group of type box.
$box-disabled-background	Color	null	The background color of an input group of type box in the disabled state.
$border-background	Color	null	The background color of an input group of type border.
$border-disabled-background	Color	null	The background color of an input group of type border in the disabled state.
$search-background	Color	null	The background color of an input group of type search.
$search-disabled-background	Color	null	The background color of an input group of type search in the disabled state.
$search-resting-shadow	box-shadow	null	The shadow color of an input group of type search in its resting state.
$search-hover-shadow	box-shadow	null	The shadow color of an input group of type search in its hover state.
$search-disabled-shadow	box-shadow	null	The shadow color of an input group of type search in its disabled state.
$success-secondary-color	Color	null	The success color used in the valid state.
$warning-secondary-color	Color	null	The warning color used in the warning state.
$error-secondary-color	Color	null	The error color used in the error state.
$box-border-radius	List	null	The border radius used for box input.
$border-border-radius	List	null	The border radius used for border input.
$search-border-radius	List	null	The border radius used for search input.
$placeholder-color	Color	null	The placeholder color of an input group.
$hover-placeholder-color	Color	null	The placeholder color of an input group on hover.
$disabled-placeholder-color	Color	null	The disabled placeholder color of an input group.

function label-theme public view code open_in_new

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$color	Map	null	The text color.
$disabled-color	Map	null	The disabled text color.

function list-theme public view code open_in_new

Example

Change the list background color

$my-list-theme: list-theme($background: black);
// Pass the theme to the css-vars() mixin
@include css-vars($my-list-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The list background color.
$header-background	Color	null	The list header background color.
$header-text-color	Color	null	The list header text color.
$item-background	Color	null	The list item background color.
$item-background-hover	Color	null	The list item hover background color.
$item-background-active	Color	null	The active list item background color.
$item-background-selected	Color	null	The selected list item background color.
$item-text-color	Color	null	The list item text color.
$item-text-color-hover	Color	null	The list item hover text color.
$item-text-color-active	Color	null	The active list item text color.
$item-text-color-selected	Color	null	The selected list item text color.
$item-title-color	Color	null	The list item title color.
$item-title-color-hover	Color	null	The list item hover title color.
$item-title-color-active	Color	null	The active list item title color.
$item-title-color-selected	Color	null	The selected list item title color.
$item-subtitle-color	Color	null	The list item subtitle color.
$item-subtitle-color-hover	Color	null	The list item hover subtitle color.
$item-subtitle-color-active	Color	null	The active list item subtitle color.
$item-subtitle-color-selected	Color	null	The selected list item subtitle color.
$item-action-color	Color	null	The list item action color.
$item-action-color-hover	Color	null	The list item hover action color.
$item-action-color-active	Color	null	The active list item action color.
$item-action-color-selected	Color	null	The selected list item action color.
$item-thumbnail-color	Color	null	The list item thumbnail color.
$item-thumbnail-color-hover	Color	null	The list item hover thumbnail color.
$item-thumbnail-color-active	Color	null	The active list item thumbnail color.
$item-thumbnail-color-selected	Color	null	The selected list item thumbnail color.
$border-radius	List	null	The border radius used for list component.
$item-border-radius	List	null	The border radius used for list item.
$border-width	Color	null	The list border width.
$border-color	Number	null	The list border color.

Requires

variables light-material-schema

Example

Change the background color

$my-navbar-theme: navbar-theme($background: green);
// Pass the theme to the css-vars() mixin
@include css-vars($my-navbar-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The navbar background color.
$text-color	Color	null	The navbar text color.
$border-color	Color	null	The navbar border color.
$shadow	box-shadow	null	The shadow of the navbar.
$idle-icon-color	Color	null	The navbar idle icon color.
$hover-icon-color	Color	null	The navbar hover icon color.
$disable-shadow	Bool	true	Sets the navbar shadow visibility.

Requires

variables light-material-schema

function navdrawer-theme public view code open_in_new

Example

Change the background and item colors

$navdrawer-theme: navdrawer-theme(
  $background: #2d313a,
  $item-active-background: #ecc256,
  $item-icon-color: #ecc256
);
// Pass the theme to the css-vars() mixin
@include css-vars($navdrawer-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The navigation drawer background color.
$border-color	Color	null	The navigation drawer right border color.
$item-header-text-color	Color	null	The header's idle text color.
$item-text-color	Color	null	The item's idle text color.
$item-icon-color	Color	null	The item's icon color.
$item-active-text-color	Color	null	The item's active text color.
$item-active-background	Color	null	The item's active background color.
$item-active-icon-color	Color	null	The item's icon active color.
$item-hover-background	Color	null	The item's hover background color.
$item-hover-text-color	Color	null	The item's hover text color.
$item-hover-icon-color	Color	null	The item's hover icon color.
$item-disabled-text-color	Color	null	The item's disabled text color.
$item-disabled-icon-color	Color	null	The item's disabled icon color.
$shadow	Color	null	Sets a custom shadow to be used by the drawer.
$border-radius	List	null	The border radius used for the navdrawer.
$item-border-radius	List	null	The border radius used for the navdrawer item.

Requires

variables light-material-schema

function overlay-theme public view code open_in_new

Example

Change the background color

$my-overlay-theme: overlay-theme($background-color: rgba(yellow, .74));
// Pass the theme to the css-vars() mixin
@include css-vars($my-overlay-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background-color	Color	null	The background color used for modal overlays.

Requires

variables light-material-schema

function paginator-theme public view code open_in_new

Grid Paging Theme

Example

Change the stripes color

$my-paginator-theme: paginator-theme(
  $stripes-color: orange
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-paginator-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$text-color	Color	currentColor	The text color.
$background-color	Color	rgba(0, 0, 0, .04)	The background color of the paging panel.
$border-color	Color	rgba(0, 0, 0, .26)	The border color of the paging panel.

Requires

variables light-material-schema

function progress-circular-theme public view code open_in_new

Example

Change the circle progress color

$my-progress-circular-theme: progress-circular-theme(
  $fill-color-default: purple
);
// Pass the theme to the igx-progress-circular component mixin
@include igx-progress-circular($my-progress-circle-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$base-circle-color	Color	null	The base circle fill color.
$fill-color-default	Color \| List<Color>	null	The progress circle fill color.
$fill-color-danger	Color	null	The track danger fill color.
$fill-color-warning	Color	null	The track warning fill color.
$fill-color-info	Color	null	The track info fill color.
$fill-color-success	Color	null	The track success fill color.
$text-color	Color	null	The value text color.
$diameter	Number	null	The progress circle diameter.

Requires

variables light-material-schema

function progress-linear-theme public view code open_in_new

Example

Change the stripes color

$my-progress-linear-theme: progress-linear-theme(
  $stripes-color: orange
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-progress-linear-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$track-color	Color	null	The main track color.
$fill-color-default	Color	null	The track default fill color.
$fill-color-danger	Color	null	The track danger fill color.
$fill-color-warning	Color	null	The track warning fill color.
$fill-color-info	Color	null	The track info fill color.
$fill-color-success	Color	null	The track success fill color.
$stripes-color	Color	null	The track stripes color.
$text-color	Color	null	The track value text color.
$track-border-radius	List	null	The border radius fraction, between 0 - 8 to be used fot the progress bar track
$track-height	Number	null	The linear progress track height.
$strip-size	Number	null	The linear progress bar strip width.

Requires

variables light-material-schema

function query-builder-theme public view code open_in_new

Example

Set custom query-builder colors

$my-query-builder-theme: query-builder-theme($background: red);
// Pass the theme to the css-vars() mixin
@include css-vars($my-query-builder-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The background color of the filtering row.
$header-background	Color	null	The background color of the query builder header.
$header-foreground	Color	null	The foreground color of the query builder header.
$header-border	Color	null	The border color of the query builder header.
$subquery-header-background	Map	null	The background color of the subquery header.
$subquery-border-color	Map	null	The border color of the query block.
$separator-color	Map	null	The separator color of the query builder tree block.
$subquery-border-radius	Number	null	The border radius of the subquery block.
$label-foreground	Map	null	The color for query builder labels "from" & "select".
$separator-color	Map	null	The separator color of the query builder tree block.
$border-radius	Number	null	The border radius of the query builder.
$color-expression-group-and	Color	null	The color of advanced filtering "AND" condition group.
$color-expression-group-or	Color	null	The color of advanced filtering "OR" condition group.

function radio-theme public view code open_in_new

Example

Change the checked dot and border colors

$my-radio-theme: radio-theme($fill-color: magenta);
// Pass the theme to the css-vars() mixin
@include css-vars($my-radio-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$label-color	Color	null	The text color used for the label text.
$label-color-hover	Color	null	The text color used for the label text on hover.
$empty-color	Color	null	The unchecked border color.
$empty-fill-color	Color	null	The unchecked radio fill color.
$fill-color	Color	null	The checked border and dot colors.
$disabled-color	Color	null	The disabled border and dot colors.
$disabled-label-color	Color	null	The disabled label color.
$disabled-fill-color	Color	null	The disabled checked border and dot colors.
$hover-color	Color	null	The border and dot colors on hover.
$fill-color-hover	Color	null	The checked dot color on hover.
$fill-hover-border-color	Color	null	The checked border color on hover.
$focus-border-color	Color	null	The focus border color.
$focus-outline-color	Color	null	The focus outlined color.
$focus-outline-color-filled	Color	null	The focus outline color when radio is filled.
$error-color	Color	null	The label, border and dot color in invalid state.
$error-color-hover	Color	null	The label, border and dot color in invalid state on hover.
$focus-outline-color-error	Color	null	The focus outline color in invalid state.

Requires

variables light-material-schema

function rating-theme public view code open_in_new

Example

Change the rating filled symbol color

$my-rating-theme: rating-theme($symbol-full-color: red);
// Pass the theme to the css-vars() mixin
@include css-vars($my-rating-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$label-color	Color	null	sets the color for the label.
$symbol-size	Number	null	the size of the symbols.
$symbol-empty-color	Color	null	sets the idle color for the symbol when it is a plane text.
$symbol-full-color	Color	null	sets the color in selected state for the symbol when it is a plane text.
$symbol-empty-filter	Color	null	the filter(s) used for the empty symbol.
$symbol-full-filter	Color	null	the filter(s) used for the filled symbol.
$disabled-label-color	Color	null	sets the color for the label in disabled state.
$disabled-empty-symbol-color	Color	null	sets the idle color for the symbol in disabled state when it is a plane text.
$disabled-full-symbol-color	Color	null	sets the color for the symbol in selected/disabled state when it is a plane text.

Requires

variables light-material-schema

function ripple-theme public view code open_in_new

Example

Change the color

$my-ripple-theme: igx-ripple-theme($color: yellow);
// Pass the theme to the css-vars() mixin
@include css-vars($my-ripple-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$color	Color	null	The color of the ripple.

Requires

variables light-material-schema

function scrollbar-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color.

Example

Change the background and track colors

$my-scrollbar-theme: scrollbar-theme($sb-thumb-bg-color: black, $sb-track-bg-color: gray);
// Pass the theme to the css-vars() mixin
@include css-vars($my-scrollbar-theme);

Parameters

Name	Type	Default	Description
$schema	Color	$light-material-schema	The schema used as basis for styling the component.
$sb-size	String \| Number	null	The size of the scrollbar.
$sb-thumb-min-height	String \| Number	null	The min-height of the thumb.
$sb-thumb-bg-color	Color	null	The background color of the thumb.
$sb-thumb-bg-color-hover	Color	null	The :hover background color of the thumb.
$sb-thumb-border-color	Color	null	The border color of the thumb.
$sb-thumb-border-size	String \| Number	null	The border size of the thumb.
$sb-thumb-border-radius	String \| Number	null	The border radius of the thumb.
$sb-track-bg-color	Color	null	The background color of the track.
$sb-track-bg-color-hover	Color	null	The :hover background color of the track.
$sb-track-border-color	Color	null	The border color of the track.
$sb-track-border-size	String \| Number	null	The border size of the track.
$sb-corner-bg	Color	null	The background color of the corner.
$sb-corner-border-color	Color	null	The border color of the corner.
$sb-corner-border-size	String \| Number	null	The border size of the corner.

Requires

variables light-material-schema

function select-theme public view code open_in_new

Example

Change the select empty list background

$my-select-theme: igx-select-theme($empty-list-background);
// Pass the theme to the css-vars mixin
@include css-vars($my-select-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$toggle-button-background	Color	null	The select toggle button background color.
$toggle-button-background-focus	Color	null	The select toggle button background color when the select is focused.
$toggle-button-background-disabled	Color	null	The select toggle button background color when the select is disabled.
$toggle-button-foreground	Color	null	The select toggle button foreground color.
$toggle-button-foreground-focus	Color	null	The select toggle button foreground color when the select is focused.
$toggle-button-foreground-disabled	Color	null	The select toggle button foreground color when the select is disabled.
$toggle-button-foreground-filled	Color	null	The select toggle button foreground color when the select is filled.
$toggle-button-background-focus--border	Color	null	The select toggle button background color when the select is focused in material border variant.

Requires

variables light-material-schema

function slider-theme public view code open_in_new

Example

Set custom track and thumb on colors

$my-slider-theme: slider-theme($thumb-color: black, $track-color: yellow);
// Pass the theme to the css-vars() mixin
@include css-vars($my-slider-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$track-color	Color	null	The color of the track.
$track-step-color	Color	null	The color of the track steps.
$track-step-size	Number	null	The size of the track steps.
$track-hover-color	Color	null	The color of the track on hover.
$thumb-color	Color	null	The color of the thumb.
$thumb-focus-color	Color	null	The focus color of the thumb.
$thumb-border-color	Color	null	The thumb border color.
$thumb-border-hover-color	Color	null	The thumb border color when hovered.
$thumb-border-focus-color	Color	null	The thumb border color when focused.
$thumb-disabled-border-color	Color	null	The thumb border color when it's disabled.
$disabled-thumb-color	Color	null	The thumb color when its disabled.
$label-background-color	Color	null	The background color of the bubble label.
$label-text-color	Color	null	The text color of the bubble label.
$base-track-color	Color	null	The base background color of the track.
$base-track-hover-color	Color	null	The base background color of the track on hover.
$disabled-base-track-color	Color	null	The base background color of the track when is disabled.
$disabled-fill-track-color	Color	null	The base background color of the fill track when is disabled.
$tick-label-color	Color	null	The color of the tick label.
$tick-color	Color	null	The background-color of the tick.

Requires

variables light-material-schema

function snackbar-theme public view code open_in_new

If you specify a background color, but do not specify colors for either the button or the text, their colors will be set automatically to a contrasting color.

Example

Set a custom background color

$my-snackbar-theme: snackbar-theme($background: white);
// Pass the theme to the css-vars() mixin
@include css-vars($my-snackbar-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The background color used in the snackbar.
$text-color	Color	null	The text color used in the snackbar.
$button-color	Color	null	The button color used in the snackbar.
$shadow	box-shadow	null	Sets a shadow to be used for the snackbar.
$border-radius	List	null	The border radius used for the snackbar component.

Requires

variables light-material-schema

function splitter-theme public view code open_in_new

Example

Set a custom expander color

$my-splitter-theme: splitter-theme($expander-color: red);
// Pass the theme to the css-vars() mixin
@include css-vars($my-splitter-them);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$bar-color	Color	null	The background color of the bar.
$handle-color	Color	null	The color for the bar drag handle.
$expander-color	Color	null	The color for the arrow expander's.
$border-radius	List	null	the border radios of the splitter bar drag handle
$focus-color	Color	null	The color used for focused splitter bar.
$size	Number	null	The size of the splitter, its width for vertical and height for horizontal splitter.

Requires

variables light-material-schema

function stepper-theme public view code open_in_new

Example

Set custom stepper colors

$my-stepper-theme: stepper-theme($step-hover-background: red);
// Pass the theme to the css-vars() mixin
@include css-vars($my-stepper-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$content-foreground	Color	null	The foreground of the step content.
$step-background	Color	null	The background of the step header.
$step-hover-background	Color	null	The background of the step header on hover.
$step-focus-background	Color	null	The background of the step header on focus.
$title-color	Color	null	The color of the step title.
$title-hover-color	Color	null	The color of the step title on hover.
$title-focus-color	Color	null	The color of the step title on focus.
$subtitle-color	Color	null	The color of the step subtitle.
$subtitle-hover-color	Color	null	The color of the step subtitle on hover.
$subtitle-focus-color	Color	null	The color of the step subtitle on focus.
$indicator-color	Color	null	The text color of the step indicator.
$indicator-background	Color	null	The background color of the step indicator.
$indicator-outline	Color	null	The outline color of the step indicator.
$invalid-step-background	Color	null	The background of the invalid step header.
$invalid-step-hover-background	Color	null	The background of the invalid step header on hover.
$invalid-step-focus-background	Color	null	The background of the invalid step header on focus.
$invalid-title-color	Color	null	The color of the invalid step title.
$invalid-title-hover-color	Color	null	The color of the invalid step title on hover.
$invalid-title-focus-color	Color	null	The color of the invalid step title on focus.
$invalid-subtitle-color	Color	null	The color of the invalid step subtitle.
$invalid-subtitle-hover-color	Color	null	The color of the invalid step subtitle on hover.
$invalid-subtitle-focus-color	Color	null	The color of the invalid step subtitle on focus.
$invalid-indicator-color	Color	null	The color of the invalid step indicator.
$invalid-indicator-background	Color	null	The background color of the invalid step indicator.
$invalid-indicator-outline	Color	null	The outline color of the invalid step indicator.
$current-step-background	Color	null	The background of the current step header.
$current-step-hover-background	Color	null	The background of the current step header on hover.
$current-step-focus-background	Color	null	The background of the current step header on focus.
$current-title-color	Color	null	The color of the current step title.
$current-title-hover-color	Color	null	The color of the current step title on hover.
$current-title-focus-color	Color	null	The color of the current step title on focus.
$current-subtitle-color	Color	null	The color of the current step subtitle.
$current-subtitle-hover-color	Color	null	The color of the current step subtitle on hover.
$current-subtitle-focus-color	Color	null	The color of the current step subtitle on focus.
$current-indicator-color	Color	null	The color of the current step indicator.
$current-indicator-background	Color	null	The background color of the current step indicator.
$current-indicator-outline	Color	null	The outline color of the current step indicator.
$complete-step-background	Color	null	The background of the complete step header.
$complete-step-hover-background	Color	null	The background of the complete step header on hover.
$complete-step-focus-background	Color	null	The background of the complete step header on focus.
$complete-title-color	Color	null	The color of the complete step title.
$complete-title-hover-color	Color	null	The color of the complete step title on hover.
$complete-title-focus-color	Color	null	The color of the complete step title on focus.
$complete-subtitle-color	Color	null	The color of the complete step subtitle.
$complete-subtitle-hover-color	Color	null	The color of the complete step subtitle on hover.
$complete-subtitle-focus-color	Color	null	The color of the complete step subtitle on focus.
$complete-indicator-color	Color	null	The color of the completed step indicator.
$complete-indicator-background	Color	null	The background color of the completed step indicator.
$complete-indicator-outline	Color	null	The outline color of the completed step indicator.
$disabled-title-color	Color	null	The title color of the disabled step.
$disabled-subtitle-color	Color	null	The subtitle color of the disabled step.
$disabled-indicator-color	Color	null	The indicator color of the disabled step.
$disabled-indicator-background	Color	null	The indicator background of the disabled step.
$disabled-indicator-outline	Color	null	The indicator outline color of the disabled step.
$step-separator-color	Color	null	The separator border-color of between the steps.
$complete-step-separator-color	Color	null	The separator border-color between the completed steps.
$step-separator-style	Color	null	The separator border-style of between the steps.
$complete-step-separator-style	Color	null	The separator border-style between the completed steps.
$border-radius-indicator	List	null	The border-radius of the step indicator.
$border-radius-step-header	List	null	The border-radius of the step header.

Requires

variables light-material-schema

function switch-theme public view code open_in_new

Example

Set custom track and thumb on colors

$my-switch-theme: switch-theme($thumb-on-color: black, $track-on-color: yellow);
// Pass the theme to the css-vars() mixin
@include css-vars($my-switch-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$thumb-on-color	Color	null	The color of the thumb when the switch is on.
$track-on-color	Color	null	The color of the track when the switch is on.
$track-on-hover-color	Color	null	The color of the track when the switch is on and hovered.
$thumb-off-color	Color	null	The color of the thumb when the switch is off.
$thumb-off-hover-color	Color	null	The color of the thumb when the switch is off and hovered.
$track-off-color	Color	null	The color of the track when the switch is off.
$thumb-disabled-color	Color	null	The color of the thumb when the switch is disabled.
$thumb-on-disabled-color	Color	null	The color of the thumb when the switch is on and disabled.
$track-disabled-color	Color	null	The color of the track when the switch is disabled.
$track-on-disabled-color	Color	null	The color of the track when the switch is on and disabled.
$label-color	Color	null	The color of the switch label
$label-hover-color	Color	null	The color of the switch label on hover.
$label-disabled-color	Color	null	The color of the switch label when the switch is disabled
$resting-shadow	box-shadow	null	The shadow used for the thumb in resting state of the switch.
$hover-shadow	box-shadow	null	The shadow used for the thumb in hover state of the switch.
$disabled-shadow	box-shadow	null	The shadow used for the thumb in disable state of the switch.
$border-radius-track	List	null	The border radius used for switch track.
$border-radius-thumb	List	null	The border radius used for switch thumb.
$border-radius-ripple	List	null	The border radius used for switch ripple.
$border-color	Color	null	The border color of the switch.
$border-hover-color	Color	null	The border color of the switch on hover.
$border-disabled-color	Color	null	The border color of the switch when it is disabled.
$border-on-color	Color	null	The border color when the switch is on.
$border-on-hover-color	Color	null	The border color when the switch is on and hovered.
$focus-outline-color	Color	null	The focus outlined color.
$focus-outline-color-focused	Color	null	The focus outlined color for focused state.
$focus-fill-color	Color	null	The focus fill color.
$focus-fill-hover-color	Color	null	The focus fill color on hover.

Requires

variables light-material-schema

function tabs-theme public view code open_in_new

Example

Set a custom background color

$my-tabs-theme: tabs-theme(
   $item-background: orange
 );
// Pass the theme to the css-vars() mixin
@include css-vars($my-tabs-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$item-text-color	Color	null	The color used for the tab text color.
$item-background	Color	null	The background color used for the tabs header.
$item-hover-background	Color	null	The background used for the tabs on hover.
$item-hover-color	Color	null	The text color used for the tabs on hover.
$item-icon-color	Color	null	The color used for the tab icon.
$item-active-icon-color	Color	null	The color used for the active tab icon.
$item-active-hover-icon-color	Color	null	The color used for the active tab icon on hover and focus.
$item-hover-icon-color	Color	null	The color used for the tab icon on hover.
$item-disabled-icon-color	Color	null	The color used for the disabled tab icon.
$item-active-color	Color	null	The color used for the active tabs text.
$item-active-hover-color	Color	null	The color used for the active tabs text on hover and focus.
$item-active-background	Color	null	The color used for the active tab background.
$item-active-hover-background	Color	null	The color used for the active tab background on hover and focus.
$item-disabled-color	Color	null	The color used for the disabled tabs text.
$indicator-color	Color	null	The color used for the active tab indicator.
$button-color	Color	null	The color used for the button icon/text color.
$button-hover-color	Color	null	The color used for the button icon/text color on hover.
$button-disabled-color	Color	null	The color used for the disabled button icon/text.
$button-background	Color	null	The color used for the button background.
$button-hover-background	Color	null	The color used for the button background on hover.
$border-radius	List	null	The border radius for the tabs.
$border-color	Color	null	The border color of the tabs.
$border-color--hover	Color	null	The border color of the tabs on hover.
$tab-ripple-color	Color	null	The color used for the button background.
$button-ripple-color	Color	null	The color used for the button background on hover.

Requires

variables light-material-schema

function time-picker-theme public view code open_in_new

If only background color is specified, text/icon color will be assigned automatically to a contrasting color. Does ___not___ apply for disabled state colors.

Example

Change the background and text colors in time picker

$my-time-picker-theme: time-picker-theme(
  $text-color: white,
  $background-color: black
);
// Pass the theme to the css-vars() mixin
@include css-vars($my-time-picker-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$text-color	Color	null	The text color of a open time picker.
$hover-text-color	Color	null	The hover text color of a open time picker.
$selected-text-color	Color	null	The text color of a selected item in time picker.
$active-item-background	Color	null	The background color for current item in focused column inside the time picker.
$active-item-foreground	Color	null	The foreground color for current item in focused column inside the time picker.
$disabled-text-color	Color	null	The text color for disabled values.
$disabled-item-background	Color	null	The background color for disabled values .
$header-background	Color	null	The header background color of a time picker.
$header-hour-text-color	Color	null	The header hour text color of a time picker.
$background-color	Color	null	The time-picker panel background color.
$time-item-size	Number	null	The height of the time item.
$divider-color	Color	null	The color for the actions area divider.
$border-color	Color	null	The border color around the time picker.
$modal-shadow	box-shadow	null	The custom shadow to be used for the time picker in modal mode.
$dropdown-shadow	box-shadow	null	The custom shadow to be used for the time picker in dropdown mode.
$border-radius	List	null	The border radius used for the outline of the picker.
$active-item-border-radius	List	null	The border radius used for the outline of the currently active item (hours, minutes, AM/PM).

Requires

variables light-material-schema

function toast-theme public view code open_in_new

Example

Set a custom background color

$my-toast-theme: toast-theme($background: green);
// Pass the theme to the css-vars() mixin
@include css-vars($my-toast-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The background color used for the toast.
$text-color	Color	null	The text-color used for the toast.
$border-color	Color	null	The border-color used for the toast.
$border-radius	List	null	The border radius used for the toast component.
$shadow	box-shadow	null	Sets a shadow to be used for the toast.

Requires

variables light-material-schema

Returns a map containing all style properties related to the theming of the tooltip.

Example

Change the tooltip background

$my-tooltip-theme: tooltip-theme($background: magenta);
// Pass the theme to the css-vars() mixin
@include css-vars($my-tooltip-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The background color of the tooltip.
$text-color	Color	null	The text color of the tooltip.
$border-radius	List	null	The border radius used for the tooltip component.
$shadow	box-shadow	null	Sets a shadow to be used for the tooltip component.

Requires

variables light-material-schema

function tree-theme public view code open_in_new

Returns a map containing all style properties related to the theming of the tree component.

Example

Change the tree background

$my-tree-theme: tree-theme($background: magenta);
// Pass the theme to the css-vars() mixin
@include css-vars($my-tree-theme);

Parameters

Name	Type	Default	Description
$schema	Map	$light-material-schema	The schema used as basis for styling the component.
$background	Color	null	The background color used for the tree node.
$foreground	Color	null	The color used for the tree node content.
$icon-color	Color	null	The color used for the tree node icon.
$background-selected	Color	null	The background color used for the selected tree node.
$foreground-selected	Color	null	The color used for the content of the selected tree node.
$background-active	Color	null	The background color used for the active tree node.
$foreground-active	Color	null	The color used for the content of the active tree node.
$background-active-selected	Color	null	The background color used for the active selected tree node.
$foreground-active-selected	Color	null	The color used for the content of the active selected tree node.
$background-disabled	Color	null	The background color used for the tree node in disabled state.
$foreground-disabled	Color	null	The color used for the content of the disabled tree node.
$drop-area-color	Color	null	The background color used for the tree node drop aria.
$border-color	Color	null	The outline shadow color used for tree node in focus state.
$hover-color	Color	null	The background color used for the tree node on hover.
$hover-selected-color	Color	null	The background color used for the selected tree node on hover.

Requires

variables light-material-schema

mixin css-vars public view code open_in_new

Add theme colors as CSS variables to a given scope.

Example

Convert grid theme colors to css variables

$my-grid-theme grid-theme(
  $header-background: red,
  $content-background: #222
);
.my-grid {
  @include css-vars($my-grid-theme);
}

Parameters

Name	Type	Default	Description
$theme *	map	-	The component theme to be used.
$scope	map	null	The CSS variables scope to be used..

Requires

code_blocks css-vars-from-theme

mixin sizable public view code open_in_new

Adds the required CSS properties so that the scope can react to size changes.

Example

Sample usage

.my-component {
  @include sizable();
}

Ignite UI for Angular

themes

Parameters

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires

Parameters

Requires