How to style datepicker

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-date-selected-state-text-color: orange,
    calendar-date-selected-state-background-color: red,
  ));
}
You can find the full list of supported mixins and tokens below.

Tokens supported by datepicker-overrides

NameTypeBased on system token
calendar-container-shapeBase None
calendar-container-touch-shapeBase None
calendar-container-elevation-shadowBase None
calendar-container-touch-elevation-shadowBase None
calendar-date-selected-state-text-colorColor--mat-sys-on-primary
calendar-date-selected-state-background-colorColor--mat-sys-primary
calendar-date-selected-disabled-state-background-colorColor--mat-sys-on-surface
calendar-date-today-selected-state-outline-colorColor--mat-sys-primary
calendar-date-focus-state-background-colorColor--mat-sys-on-surface
calendar-date-hover-state-background-colorColor--mat-sys-on-surface
toggle-active-state-icon-colorColor--mat-sys-on-surface-variant
calendar-date-in-range-state-background-colorColor--mat-sys-primary-container
calendar-date-in-comparison-range-state-background-colorColor--mat-sys-tertiary-container
calendar-date-in-overlap-range-state-background-colorColor--mat-sys-secondary-container
calendar-date-in-overlap-range-selected-state-background-colorColor--mat-sys-secondary
toggle-icon-colorColor--mat-sys-on-surface-variant
calendar-body-label-text-colorColor--mat-sys-on-surface
calendar-period-button-text-colorColor--mat-sys-on-surface-variant
calendar-period-button-icon-colorColor--mat-sys-on-surface-variant
calendar-navigation-button-icon-colorColor--mat-sys-on-surface-variant
calendar-header-divider-colorBase None
calendar-header-text-colorColor--mat-sys-on-surface-variant
calendar-date-today-outline-colorColor--mat-sys-primary
calendar-date-today-disabled-state-outline-colorColor--mat-sys-on-surface
calendar-date-text-colorColor--mat-sys-on-surface
calendar-date-outline-colorBase None
calendar-date-disabled-state-text-colorColor--mat-sys-on-surface
calendar-date-preview-state-outline-colorColor--mat-sys-primary
range-input-separator-colorColor--mat-sys-on-surface
range-input-disabled-state-separator-colorColor--mat-sys-on-surface
range-input-disabled-state-text-colorColor--mat-sys-on-surface
calendar-container-background-colorColor--mat-sys-surface-container-high
calendar-container-text-colorColor--mat-sys-on-surface
calendar-text-fontTypography--mat-sys-body-medium-font
calendar-text-sizeTypography--mat-sys-body-medium-size
calendar-body-label-text-sizeTypography--mat-sys-title-small-size
calendar-body-label-text-weightTypography--mat-sys-title-small-weight
calendar-period-button-text-sizeTypography--mat-sys-title-small-size
calendar-period-button-text-weightTypography--mat-sys-title-small-weight
calendar-header-text-sizeTypography--mat-sys-title-small-size
calendar-header-text-weightTypography--mat-sys-title-small-weight
Azure & Blue theme selected.