We wish to include success and danger color palettes in the theming of our Angular Material themes.

Approach

Wrap the Angular Material Light and Dark theming function merging in the additional color values.

@use '@angular/material' as mat;

/// Defines a dark color theme with success and danger colors.
/// @param {Map} $primary The primary color map.
/// @param {Map} $accent The accent color map.
/// @param {Map} $warn The warn color map.
/// @param {Map} $success The success color map.
/// @param {Map} $danger The danger color map.

@function fs-dark-theme(
  $primary,
  $accent,
  $warn: mat.define-palette($mat-orange),
  $success: mat.define-palette(mat.$mat-green),
  $danger: mat.define-palette(mat.$mat-red)
) {
  $dark-theme: mat.define-dark-theme(
    (
      color: (
        primary: $primary,
        accent: $accent,
        warn: $warn,
      ),
    )
  );

  $danger-success: (
    success: $success,
    danger: $danger,
  );
  @return map-merge($dark-theme, $danger-success);
}

/// Defines a light color theme with success and danger colors.
/// @param {Map} $primary The primary color map.
/// @param {Map} $accent The accent color map.
/// @param {Map} $warn The warn color map.
/// @param {Map} $success The success color map.
/// @param {Map} $danger The danger color map.
@function fs-light-theme(
  $primary,
  $accent,
  $warn: mat.define-palette($mat-orange),
  $success: mat.define-palette(mat.$mat-green),
  $danger: mat.define-palette(mat.$mat-red)
) {
  $light-theme: mat.define-light-theme(
    (
      color: (
        primary: $primary,
        accent: $accent,
        warn: $warn,
      ),
    )
  );
  $danger-success: (
    success: $success,
    danger: $danger,
  );
  @return map-merge($light-theme, $danger-success);

We create the theme and the $danger-success map and merge the two.

@return map-merge($light-theme, $danger-success);

We can now create the dark theme with the merged values like this:

// ============================================
// Palettes: https://material.io/design/color/
// ============================================
$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$cyan-palette);
$theme-warn: mat.define-palette(mat.$orange-palette);
$theme-success: mat.define-palette(mat.$green-palette);
$theme-danger: mat.define-palette(mat.$red-palette);
$dark-theme: theme.fs-dark-theme(
   $theme-primary,
   $theme-accent,
   $theme-warn,
   $theme-success,
   $theme-danger
);

Retrieve success and danger colors as follows.

$dangerpalette: map.get($dark-theme, danger);
$successpalette: map.get($dark-theme, success);
$dangerdefault: mat.get-color-from-palette($dangerpalette, default);
$successdefault: mat.get-color-from-palette($successpalette, default);
@debug $dangerdefault;
@debug $successdefault;

To see the entire theme log the trace like this.

$tracetheme: logger.pretty-map($dark-theme);
@debug $tracetheme;

The logger comes from the package @fireflysemantics/sass-logger.

Extending Angular Material Themes with Success and Danger Colors | Task

Scenario

Approach

Demo