Add custom color variables in angular material (2+)

Question

How to create "custom" own colors for angular material?

For example the bootstrap like colors like success (green), warn (yellow), danger (red), beside primary (blue), accent (pink).

In other words: Extend the color variablen of Angular Material (2+) for using it in html attributes:

<button mat-raised-button color="success">Success</button>

or create a white checkbox like:

<mat-checkbox color="white">Check me!</mat-checkbox>

Answer 1

To add a new color named success, make the following changes

Add the following styles in your main styles.css file

.mat-success {
  color: #fff !important;
  background-color: #28a745 !important;
}
.mat-success[disabled] {
  background-color: rgba(0, 0, 0, 0.12) !important;
}

Specify the color name in your component

 <button mat-raised-button color="success">

Answer 2

You can`t do it. But if you like you can add "color="whatever" attribute to some element of material and this adds custom class for you.

Example:

.whatever {
  background-color: light-blue;
}

<button mat-button color="whatever"></button> // this button will have '.mat-whatever' class.

Answer 3

Variables are defined in "_theming.scss" which is under "node_modules/@angular/material/".To define the custom variable we need to modify the following functions.

// Creates a container object for a light theme to be given to individual component theme mixins.
@function mat-light-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    success:$success,
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $mat-light-theme-foreground,
    background: $mat-light-theme-background,
  );
}

// Creates a container object for a dark theme to be given to individual component theme mixins.
@function mat-dark-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    success:$success,
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: true,
    foreground: $mat-dark-theme-foreground,
    background: $mat-dark-theme-background,
  );
}

Inside the same file, we can also apply the newly introduced variable to the component as i applied it for buttons.

// Applies a focus style to an md-button element for each of the supported palettes.
@mixin _mat-button-focus-color($theme) {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  &.mat-success .mat-button-focus-overlay {
    background-color: mat-color($success, 0.12);
  }
  &.mat-primary .mat-button-focus-overlay {
    background-color: mat-color($primary, 0.12);
  }
  &.mat-accent .mat-button-focus-overlay {
    background-color: mat-color($accent, 0.12);
  }

  &.mat-warn .mat-button-focus-overlay {
    background-color: mat-color($warn, 0.12);
  }

  &[disabled] .mat-button-focus-overlay {
    background-color: transparent;
  }
}

@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.2) {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  &.mat-success .mat-ripple-element {
    background-color: mat-color($success, $hue, $opacity);
  }
  &.mat-primary .mat-ripple-element {
    background-color: mat-color($primary, $hue, $opacity);
  }
  &.mat-accent .mat-ripple-element {
    background-color: mat-color($accent, $hue, $opacity);
  }

  &.mat-warn .mat-ripple-element {
    background-color: mat-color($warn, $hue, $opacity);
  }
}

// Applies a property to an md-button element for each of the supported palettes.
@mixin _mat-button-theme-color($theme, $property, $color: 'default') {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  &.mat-success {
    #{$property}: mat-color($success, $color);
  }
    &.mat-primary {
    #{$property}: mat-color($primary, $color);
  }
  &.mat-accent {
    #{$property}: mat-color($accent, $color);
  }
  &.mat-warn {
    #{$property}: mat-color($warn, $color);
  }

  &.mat-success ,&.mat-primary, &.mat-accent, &.mat-warn, &[disabled] {
    &[disabled] {
      $palette: if($property == 'color', $foreground, $background);
      #{$property}: mat-color($palette, disabled-button);
    }
  }
}

@mixin mat-button-theme($theme) {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .mat-button, .mat-icon-button {
    background: transparent;

    @include _mat-button-focus-color($theme);
    @include _mat-button-theme-color($theme, 'color');
  }

And new custom variable can be added inside the "theme.scss" file

@import '~@angular/material/_theming';

@include mat-core();

$primary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-blue);
$success: mat-palette($mat-blue);
$theme: mat-light-theme($success,$primary, $accent,$warn);

@include angular-material-theme($theme);

.dark-theme {
  $dark-success: mat-palette($mat-light-blue);
  $dark-primary: mat-palette($mat-light-blue);
  $dark-accent: mat-palette($mat-green);

  $dark-theme: mat-dark-theme($dark-success, $dark-primary, $dark-accent);

  @include angular-material-theme($dark-theme);
}

Now We can use new variable inside the html:

<button  md-button color="success">Primary</button>

Following is the link for modified _theming.scss https://plnkr.co/edit/gMAEyVjb0F7MCC1x6OKe?p=templates

Note: We need to take care of "_theming.scss" file while upgrading the angular-material package.