Extending Angular Material Themes with Success and Danger Colors

Scenario

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.

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.

Demo

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation