Ignite UI for Angular
Components Get Started

themes

#

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
#

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.
Requires
#

function banner-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 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
#

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
#

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
#

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
#

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
#

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
#

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.
$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
#

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.
$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
#

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.
$content-foreground
Color
null The foreground of the days, months and years views.
$content-background
Color
null The background of the days, months and years views.
$border-size
Color
null The border size of all calendar views.
$header-foreground
Color
null The header foreground.
$header-background
Color
null The header background.
$picker-foreground
Color
null The foreground of the month and year pickers.
$picker-background
Color
null The background of the month and year pickers.
$picker-hover-foreground
Color
null The :hover color of the month and year pickers.
$weekday-color
Color
null The color for weekday labels.
$inactive-color
Color
null The color for previous and next month dates (visible only if [hideOutsideDays] is set to false(default)).
$weekend-color
Color
null The color for weekend days.
$week-number-foreground
Color
null The foreground of the week number column.
$week-number-background
Color
null The background of the week number column.
$ym-selected-current-hover-foreground
Color
null The :hover foreground color of the current selected month/year.
$ym-selected-current-hover-background
Color
null The :hover background color of the current selected month/year.
$navigation-color
Color
null The color of the icon button responsible for month navigation.
$navigation-hover-color
Color
null The :hover color of the icon button responsible for month navigation.
$navigation-focus-color
Color
null The :focus color of the icon button responsible for month navigation.
$ym-hover-foreground
Color
null The :hover foreground of the month/year.
$ym-hover-background
Color
null The :hover background of the month/year.
$ym-current-foreground
Color
null The foreground of the current month/year.
$ym-current-background
Color
null The background of the current month/year.
$ym-current-hover-foreground
Color
null The :hover foreground of the current month/year.
$ym-current-hover-background
Color
null The :hover background of the current month/year.
$ym-selected-foreground
Color
null The foreground color of the selected month/year.
$ym-selected-background
Color
null The background color of the selected month/year.
$ym-selected-hover-foreground
Color
null The :hover foreground color of the currently selected month/year.
$ym-selected-hover-background
Color
null The :hover background color of the currently selected month/year.
$ym-selected-current-foreground
Color
null The foreground color of the selected current month/year.
$ym-selected-current-background
Color
null The background color of the selected current month/year.
$ym-selected-current-hover-foreground
Color
null The :hover foreground color of the current selected month/year.
$ym-selected-current-hover-background
Color
null The :hover background color of the current selected month/year.
$ym-current-outline-color
Color
null The outline color of the current month/year.
$ym-current-outline-hover-color
Color
null The :hover outline color of the current month/year.
$ym-current-outline-focus-color
Color
null The :focus outline color of the current month/year.
$ym-selected-outline-color
Color
null The outline color of the selected month/year.
$ym-selected-hover-outline-color
Color
null The :hover outline color of the selected month/year.
$ym-selected-focus-outline-color
Color
null The :focus outline color of the selected month/year.
$ym-selected-current-outline-color
Color
null The outline color of the selected current month/year.
$ym-selected-current-outline-hover-color
Color
null The :hover outline color of the selected current month/year.
$ym-selected-current-outline-focus-color
Color
null The :focus outline color of the selected current month/year.
$date-hover-foreground
Color
null The :hover foreground in idle state of a date.
$date-hover-background
Color
null The :hover background in idle state of a date.
$date-focus-foreground
Color
null The :focus foreground in idle state of a date.
$date-focus-background
Color
null The :focus background in idle state of a date.
$date-selected-foreground
Color
null The text color for the selected date.
$date-selected-background
Color
null The background color for the selected date.
$date-selected-hover-background
Color
null The hover background color for the selected date.
$date-selected-focus-background
Color
null The focus background color for the selected date.
$date-selected-hover-foreground
Color
null The hover text color for the selected date.
$date-selected-focus-foreground
Color
null The focus text color for the selected date.
$date-selected-current-background
Color
null The background color for the selected/current date.
$date-selected-current-hover-background
Color
null The hover background color for the selected/current date.
$date-selected-current-focus-background
Color
null The focus background color for the selected/current date.
$date-selected-current-foreground
Color
null The text color for the selected/current date.
$date-selected-current-hover-foreground
Color
null The hover text color for the selected/current date.
$date-selected-current-focus-foreground
Color
null The focus text color for the selected/current date.
$date-selected-range-foreground
Color
null The foreground of the dates in the selected range.
$date-selected-range-background
Color
null The background of the dates in the selected range.
$date-selected-range-hover-foreground
Color
null The :hover foreground of the dates in the selected range.
$date-selected-range-hover-background
Color
null The :hover background of the dates in the selected range.
$date-selected-range-focus-foreground
Color
null The :focus foreground of the dates in the selected range.
$date-selected-range-focus-background
Color
null The :focus background of the dates in the selected range.
$date-selected-current-range-foreground
Color
null The foreground of the current date in the selected range.
$date-selected-current-range-background
Color
null The background of the current date in the selected range.
$date-selected-current-range-hover-foreground
Color
null The :hover foreground of the current date in the selected range.
$date-selected-current-range-hover-background
Color
null The :hover background of the current date in the selected range.
$date-selected-current-range-focus-foreground
Color
null The :focus foreground of the current date in the selected range.
$date-selected-current-range-focus-background
Color
null The :focus background of the current date in the selected range.
$date-selected-special-border-color:
Color
null The border color of the selected special date,
$date-selected-special-hover-border-color:
Color
null The :hover border color of the selected special date,
$date-selected-special-focus-border-color:
Color
null The :focus border color of the selected special date,
$date-current-foreground
Color
null The foreground of the current date.
$date-current-background
Color
null The background color of the current date.
$date-current-hover-foreground
Color
null The :hover text color of the current date.
$date-current-hover-background
Color
null The :hover background color of the current date.
$date-current-focus-foreground
Color
null The :focus text color of the current date.
$date-current-focus-background
Color
null The :focus background color of the current date.
$date-special-background
Color
null The background of the dates marked as special.
$date-special-foreground
Color
null The foreground of the dates marked as special.
$date-special-hover-background
Color
null The background of the dates marked as special.
$date-special-hover-foreground
Color
null The foreground of the dates marked as special.
$date-special-focus-background
Color
null The background of the dates marked as special.
$date-special-focus-foreground
Color
null The foreground of the dates marked as special.
$date-special-border-color
Color
null The outline of the dates marked as special.
$date-special-range-background
Color
null The background of the dates inside a range and marked as special.
$date-special-range-hover-background
Color
null The :hover background of the dates inside a range and marked as special.
$date-special-range-focus-background
Color
null The :focus background of the dates inside a range and marked as special.
$date-special-range-foreground
Color
null The foreground of the dates inside a range and marked as special.
$date-special-range-border-color
Color
null The outline of the dates inside a range and marked as special.
$border-color
Color
null The calendar border color.
$date-border-color
Color
null The border color of the date.
$date-hover-border-color
Color
null The :hover border color of the date.
$date-focus-border-color
Color
null The :focus border color of the date.
$date-selected-border-color
Color
null The border color of the selected date.
$date-selected-hover-border-color
Color
null The :hover border color of the selected date.
$date-selected-focus-border-color
Color
null The :focus border color of the selected date.
$date-current-border-color
Color
null The border color of the current date.
$date-current-hover-border-color
Color
null The :hover border color of the current date.
$date-current-focus-border-color
Color
null The :focus border color of the current date.
$date-selected-current-border-color
Color
null The border color of the selected current date.
$date-selected-current-hover-border-color
Color
null The :hover border color of the selected current date.
$date-selected-current-focus-border-color
Color
null The :focus border color of the selected current date.
$date-range-border-color
Color
null The border color of range selection.
$date-range-preview-border-color
Color
null The border color of the range selection in preview state(visible before selecting the end of the range).
$date-disabled-foreground
Color
color: ('gray', 500, .5) The foreground color of disabled dates.
$date-disabled-range-foreground
Color
color: ('gray', 500) The foreground color of disabled dates.
$size
Number
null The size of the days, months, and years views.
$border-radius
List
null The border radius used for the calendar.
$date-border-radius
List
null The border radius used for the date.
$date-range-border-radius
List
null The border radius used for the date range selection.
$date-current-border-radius
List
null The border radius used for the current date .
$date-special-border-radius
List
null The border radius used for the special date.
$ym-border-radius
List
null The border radius used for the month/year.
$actions-divider-color
Color
null The border color used for the date-picker actions divider.
Requires
#

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
#

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
#

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.
$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
#

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
#

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
#

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
#

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
#

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
#

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
#

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
#

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
#

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
#

function grid-toolbar-theme public view code open_in_new

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
#

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-background-and
Color
null The background color of advanced filtering "AND" condition.
$filtering-background-and--focus
Color
null The background color on focus/selected of advanced filtering "AND" condition.
$filtering-background-or
Color
null The background color of advanced filtering "OR" condition.
$filtering-background-or--focus
Color
null The background color on focus/selected of advanced filtering "OR" condition.
$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
#

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
#

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
#

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.
$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
#

function navbar-theme public view code open_in_new

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
#

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
#

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
#

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
#

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
#

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
#

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
#

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
#

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
#

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
#

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
#

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
#

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
#

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.
$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
#

function tabs-theme public view code open_in_new

If only background color is specified, the idle item color will be assigned automatically to a contrasting color.

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-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-background
Color
null The color used for the active/focused tab background.
$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
#

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
#

function toast-theme public view code open_in_new

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

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
#

function tooltip-theme public view code open_in_new

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

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
#

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
#

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 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 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 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 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 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 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 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 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
#

mixin button public view code open_in_new

warning Deprecated

Use the `css-vars` mixin instead.

Parameters
Name Type Default Description
$flat
Map
null The flat theme used to style the component.
$contained
Map
null The contained theme used to style the component.
$outlined
Map
null The outlined theme used to style the component.
$fab
Map
null The fab theme used to style the component.
See
#

mixin card public view code open_in_new

Card Component

warning Deprecated

Use the `css-vars` mixin instead.

Parameters
Name Type Default Description
$theme *
Map
- The theme used to style the component.
See
#

mixin date-picker public view code open_in_new

warning Deprecated

Use the `css-vars` mixin instead.

Parameters
Name Type Default Description
$theme *
Map
- The calendar theme used to style the component.
See
#

mixin pivot-data-selector public view code open_in_new

warning Deprecated

Use the `css-vars` mixin instead.

Parameters
Name Type Default Description
$theme *
Map
- The theme used to style the component.
See
#

mixin splitter public view code open_in_new

warning Deprecated

Use the `css-vars` mixin instead.

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
$theme *
Map
- The theme used to style the component.
Requires
See
#

mixin toast public view code open_in_new

Toast Component

warning Deprecated

Use the `css-vars` mixin instead.

Parameters
Name Type Default Description
$theme *
Map
- The theme used to style the component.
See
#

mixin core public view code open_in_new

Parameters
Name Type Default Description
$print-layout
boolean
true Activates the printing styles of the components.
$enhanced-accesibility
boolean
false Switches component colors and other properties to more accessible values.
#

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
#

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();
}
#

mixin theme public view code open_in_new

Generates an Ignite UI for Angular global theme.

Parameters
Name Type Default Description
$palette *
Map
- An palette to be used by the global theme.
$schema
Map
$light-material-schema The schema used as basis for styling the components.
$exclude
List
( ) A list of igx components to be excluded from the global theme styles.
$roundness
Number
null Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components.
$elevation
Boolean
true Turns on/off elevations for all components in the theme.
$elevations
Map
$elevations The elevation map to be used by all component themes.
Requires
#

mixin light-theme public view code open_in_new

A wrapper around the theme mixin. Creates a global material theme that can be used with light backgrounds.

warning Deprecated

- Use the theme mixin instead.

Parameters
Name Type Default Description
$palette *
Map
- An palette to be used by the global theme.
$exclude
List
( ) A list of ig components to be excluded from the global theme styles.
See
#

mixin dark-theme public view code open_in_new

A wrapper around the theme mixin. Creates a global material theme that can be used with dark backgrounds.

warning Deprecated

- Use the theme mixin instead.

Parameters
Name Type Default Description
$palette *
Map
- An palette to be used by the global theme.
$exclude
List
( ) A list of igx components to be excluded from the global theme styles.
See
#

mixin bootstrap-light-theme public view code open_in_new

A wrapper around the theme mixin. Creates a global bootstrap-like theme that can be used with light backgrounds.

warning Deprecated

- Use the theme mixin instead.

Parameters
Name Type Default Description
$palette *
Map
- An palette to be used by the global theme.
$exclude
List
( ) A list of ig components to be excluded from the global theme styles.
See
#

mixin bootstrap-dark-theme public view code open_in_new

A wrapper around the theme mixin. Creates a global bootstrap-like theme that can be used with dark backgrounds.

warning Deprecated

- Use the theme mixin instead.

Parameters
Name Type Default Description
$palette *
Map
- An palette to be used by the global theme.
$exclude
List
( ) A list of ig components to be excluded from the global theme styles.
See
#

mixin fluent-light-theme public view code open_in_new

A wrapper around the theme mixin. Creates a global fluent theme that can be used with light backgrounds.

warning Deprecated

- Use the theme mixin instead.

Parameters
Name Type Default Description
$palette *
Map
- An palette to be used by the global theme.
$exclude
List
( ) A list of ig components to be excluded from the global theme styles.
See
#

mixin fluent-dark-theme public view code open_in_new

A wrapper around the theme mixin. Creates a global fluent theme that can be used with dark backgrounds.

warning Deprecated

- Use the theme mixin instead.

Parameters
Name Type Default Description
$palette *
Map
- An palette to be used by the global theme.
$exclude
List
( ) A list of ig components to be excluded from the global theme styles.
See
#

mixin indigo-light-theme public view code open_in_new

A wrapper around the theme mixin. Creates a global indigo theme that can be used with light backgrounds.

warning Deprecated

- Use the theme mixin instead.

Parameters
Name Type Default Description
$palette *
Map
- An palette to be used by the global theme.
$exclude
List
( ) A list of ig components to be excluded from the global theme styles.
See
#

mixin indigo-dark-theme public view code open_in_new

A wrapper around the theme mixin. Creates a global indigo theme that can be used with dark backgrounds.

warning Deprecated

- Use the theme mixin instead.

Parameters
Name Type Default Description
$palette *
Map
- An palette to be used by the global theme.
$exclude
List
( ) A list of ig components to be excluded from the global theme styles.
See

Search Documentation