Datepicker • Angular Material

Styles from the material/datepicker package can be customized using the datepicker-overrides mixin. This mixin accepts a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example:

@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.datepicker-overrides((
    calendar-body-label-text-color: orange,
    calendar-container-background-color: red,
  ));
}

You can find the full list of supported mixins and tokens below.

Tokens supported by `datepicker-overrides`

Filter by name

Filter by type

Filter by default value

Name	Type	Default value
`calendar-container-elevation-shadow`	Base	0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)
`calendar-container-shape`	Base	--mat-sys-corner-large
`calendar-container-touch-elevation-shadow`	Base	0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)
`calendar-container-touch-shape`	Base	--mat-sys-corner-extra-large
`calendar-body-label-text-color`	Color	--mat-sys-on-surface
`calendar-container-background-color`	Color	--mat-sys-surface-container-high
`calendar-container-text-color`	Color	--mat-sys-on-surface
`calendar-date-disabled-state-text-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`calendar-date-focus-state-background-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent)
`calendar-date-hover-state-background-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent)
`calendar-date-in-comparison-range-state-background-color`	Color	--mat-sys-tertiary-container
`calendar-date-in-overlap-range-selected-state-background-color`	Color	--mat-sys-secondary
`calendar-date-in-overlap-range-state-background-color`	Color	--mat-sys-secondary-container
`calendar-date-in-range-state-background-color`	Color	--mat-sys-primary-container
`calendar-date-outline-color`	Color	transparent
`calendar-date-preview-state-outline-color`	Color	--mat-sys-primary
`calendar-date-selected-disabled-state-background-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`calendar-date-selected-state-background-color`	Color	--mat-sys-primary
`calendar-date-selected-state-text-color`	Color	--mat-sys-on-primary
`calendar-date-text-color`	Color	--mat-sys-on-surface
`calendar-date-today-disabled-state-outline-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`calendar-date-today-outline-color`	Color	--mat-sys-primary
`calendar-date-today-selected-state-outline-color`	Color	--mat-sys-primary
`calendar-header-divider-color`	Color	transparent
`calendar-header-text-color`	Color	--mat-sys-on-surface-variant
`calendar-navigation-button-icon-color`	Color	--mat-sys-on-surface-variant
`calendar-period-button-icon-color`	Color	--mat-sys-on-surface-variant
`calendar-period-button-text-color`	Color	--mat-sys-on-surface-variant
`range-input-disabled-state-separator-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`range-input-disabled-state-text-color`	Color	color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent)
`range-input-separator-color`	Color	--mat-sys-on-surface
`toggle-active-state-icon-color`	Color	--mat-sys-primary
`toggle-icon-color`	Color	--mat-sys-on-surface-variant
`calendar-body-label-text-size`	Typography	--mat-sys-title-small-size
`calendar-body-label-text-weight`	Typography	--mat-sys-title-small-weight
`calendar-header-text-size`	Typography	--mat-sys-title-small-size
`calendar-header-text-weight`	Typography	--mat-sys-title-small-weight
`calendar-period-button-text-size`	Typography	--mat-sys-title-small-size
`calendar-period-button-text-weight`	Typography	--mat-sys-title-small-weight
`calendar-text-font`	Typography	--mat-sys-body-medium-font
`calendar-text-size`	Typography	--mat-sys-body-medium-size

How to style datepicker

Tokens supported by datepicker-overrides

Tokens supported by `datepicker-overrides`