[Datetimepicker] Easy way to customize action-buttons / pass color="accent" to OK button

[angelaki]

The title already says it all: I'm looking for a convenient way to pass the default OK-button a color="accent" attribute. Any idea how to achieve this?

[bah99]

Material 19 provides a convenient way to style or override components. Or you can utilize the generated token variables to customize styles (such as the .danger class). Below is an example:

// In your global style file

/* You can add global styles to this file and also import other style files */
@use "@angular/material" as mat;

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

// Define custom themes
.accent {
  @include mat.theme(
    (
      color: mat.$magenta-palette,
    )
  );
}

.warn {
  @include mat.theme(
    (
      color: mat.$orange-palette,
    )
  );
}

.success {
  @include mat.theme(
    (
      color: mat.$green-palette,
    )
  );
}

// Alternatively, use the token variables
.danger {
  --mdc-text-button-label-text-color: red;
  // Add more custom styles here
}

Instead of using color="accent", you can apply the defined classes directly, like class="success", to the button.

Here's how it would look in practice: