How to style dialog

Styles from the material/dialog package can be customized using the dialog-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.dialog-overrides((
    container-color: orange,
    subhead-color: red,
  ));
}
You can find the full list of supported mixins and tokens below.

Tokens supported by dialog-overrides

NameTypeBased on system token
container-shapeBase None
container-colorColor--mat-sys-surface
subhead-colorColor--mat-sys-on-surface
supporting-text-colorColor--mat-sys-on-surface-variant
subhead-fontTypography--mat-sys-headline-small-font
subhead-line-heightTypography--mat-sys-headline-small-line-height
subhead-sizeTypography--mat-sys-headline-small-size
subhead-weightTypography--mat-sys-headline-small-weight
subhead-trackingTypography--mat-sys-headline-small-tracking
supporting-text-fontTypography--mat-sys-body-medium-font
supporting-text-line-heightTypography--mat-sys-body-medium-line-height
supporting-text-sizeTypography--mat-sys-body-medium-size
supporting-text-weightTypography--mat-sys-body-medium-weight
supporting-text-trackingTypography--mat-sys-body-medium-tracking
container-elevation-shadowBase None
container-max-widthBase None
container-small-max-widthBase None
container-min-widthBase None
actions-alignmentBase None
actions-paddingBase None
content-paddingBase None
with-actions-content-paddingBase None
headline-paddingBase None
Azure & Blue theme selected.