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>

Have you had a look at the guide for customizing angular material theme? [here](https://material.angular.io/guide/theming) — Jan Somers JanS91, Nov 23 '17 at 12:31
Yes, but I've found nothing about that. Or overlooked it. Just found how to modify existing colors like "primary". I'm a newbie in sass and theming like that. That's different from css styles by html selectors. :D — Dominik, Nov 23 '17 at 12:35
@JanSomersJanS91 where in the document are additional variables (e.g. 'danger') mentioned? I cannot see that anywhere. Answer by mohit below seems to satisfy the question but involves editing angular node_module files which seems like a difficult-to-maintain solution. — bunt, Aug 09 '18 at 08:38
Perhaps [this](https://stackoverflow.com/questions/45144023/angular-material-design-how-to-add-custom-button-color/65489817#65489817) answer will help someone. It will give you type hinting as well — Poul Kruijt, Dec 29 '20 at 09:32

sai anudeep · Answer 1 · 2019-07-15T11:57:28.293

11

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">

edited Jul 15 '19 at 11:57

answered Jan 30 '19 at 18:47

sai anudeep

1,135
13
26

andy · Answer 2 · 2020-01-28T19:05:44.027

10

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.

edited Jan 28 '20 at 19:05

answered Dec 20 '18 at 14:03

andy

2,362
2
18
19

mohit uprim · Answer 3 · 2017-11-23T19:07:35.940

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.

Where is your custom color variablen beside primary, accent or warn? You only modify the colors of existing variables (primary, accent, warn). But is it possible to create a new color variable e.g. named '$success' and use it in html attr color="success"? I think it's not possible without changes to the material project. Because you have to explicitly pass only existing variables to the theme. mat-light-theme(primary, accent, warn). — Dominik, Nov 23 '17 at 15:08
@Dominik yes it is possible but need to modify the material project. updated my answer with the detail — mohit uprim, Nov 23 '17 at 18:54

score -2 · Answer 4 · answered Jul 04 '18 at 19:03

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

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)
In the next section named contrast: choose the font color ( $dark-primary-text or $light-primary-text), respect the material design guidelines pls.
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 :)

Never change anything in node modules as it will simply get overwritten when you attempt to update anything npm related — Cameron Gilbert, Sep 06 '18 at 20:28

Add custom color variables in angular material (2+)

4 Answers4