Styling

The ready-made fields inherit the project's Material system tokens and any global design tokens. This package adds no style input and does not override those tokens.

What this package styles

The field fills its container. The pressed calendar-toggle button uses --mat-sys-primary and --mat-sys-secondary-container. Those are the only colors this package sets.

Global tokens

The calendar popup is an overlay, so its tokens belong on html. That includes the toggle icon, which uses the datepicker color rather than the form-field icon color. This page sets them while it is open. Datepicker token names are on the datepicker styling page.

@use '@angular/material' as mat;

html {
  @include mat.datepicker-overrides((
    toggle-icon-color: var(--mat-sys-tertiary),
    toggle-active-state-icon-color: var(--mat-sys-tertiary),
    calendar-container-shape: 24px,
    calendar-container-background-color: light-dark(
      color-mix(in srgb, var(--mat-sys-tertiary-container) 42%, white),
      var(--mat-sys-tertiary-container)
    ),
    calendar-date-selected-state-background-color: var(--mat-sys-tertiary),
    calendar-date-selected-state-text-color: var(--mat-sys-on-tertiary),
  ));
}

Tokens on a parent

The sample uses both mixins. mat.form-field-overrides() on the form changes the input. mat.datepicker-overrides() on html changes the toggle icon and the calendar popup, because the popup is an overlay. Form-field token names are on the form-field styling page.