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

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 2

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 3

I add a new color in the corresponding palette inside the file _theming.scss in PROJECT_NAME\node_modules\@angular\material_theming.scss this work's for me and pass succefully the ng build --prod

You have to respect the contrast ratio between the color and font, in my case the color is #590F46 and have good contrast with white fonts.

do this

1. Add the new color inside the corresppnding palette in my case $mat-pink (color palettes start arround the row 500 so better use find ctrl+f in your text editor and search the palette name)
2. In the next section named contrast: choose the font color ( $dark-primary-text or $light-primary-text), respect the material design guidelines pls.
3. Remember! the node_modules folder are not backup by github/bitbucket etc so you have to backup this file and replace it for the default file if you clone this project and use npm install or other reasons, less dangerouse my recomendiation is just add your custom palette seccion and dont mess with the other code

Examples Code example just palette mat-pink in _theming.scss and My file with custom themes for angular material2 Sorry for my english i just want to help :)

Answer 4

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.