CODEWITHSUNDEEP
angularangular-material
M. Akar
M. Akar

Reputation: 1865

How to use custom material color palettes in Angular?

I am using material buttons in my page as such:

<button mat-stroked-button color="primary">Learn</button>

This "primary" color is useful, however, I want to be able to use different color palettes with my material components. I have created another color palette in my .scss file as such:

$teal: (
  50 : #e5f4f3,
  100 : #bee4e1,
  200 : #93d3cd,
  300 : #67c1b8,
  400 : #47b3a9,
  500 : #26a69a,
  600 : #229e92,
  700 : #1c9588,
  800 : #178b7e,
  900 : #0d7b6c,
  A100 : #adfff3,
  A200 : #7affec,
  A400 : #47ffe4,
  A700 : #2dffe0,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #000000,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);

and I am trying to use it as such:

<button mat-stroked-button color="teal">Learn</button>

However, my IDE warns me that

teal is not a valid value for color. Expected: primary, accent, or warn

What am I supposed to do?

Upvotes: 1

Views: 7578

Answers (2)

NFRiaCowboy
NFRiaCowboy

Reputation: 303

well... the docs hide the "not fun part"!

As mentioned in the docs, if you want use your own colors then you need to create a palette link

You can create your own palette by defining a Sass map that matches the structure described in the Palettes section above. The map must define hues for 50 and each hundred between 100 and 900. The map must also define a contrast map with contrast colors for each hue.

So I used your map (Thanks for save me that work) and this tool, that is also referenced on the docs. To use the tool is not that obvious (at least wasn't for me) so you define a "primary" color and the tool will generate the other colors for you. To copy them to your map, you neet to click on the color, it will be copied to your clipboard )without any message to the users , hurray!!), them just past it on the code, after that you use the new map on the color definition. Let me add some code ( the code never lies! )

...
$m2m-palette-primary: (
  50 : #e8f5ec,
  100 : #c8e6d1,
  200 : #a5d7b5,
  300 : #81c898,
  400 : #67bc82,
  500 : #4db06d,
  600 : #45a163,
  700 : #3c8f57,
  800 : #357e4c,
  900 : #295e39,
  A100 : #adfff3,
  A200 : #7affec,
  A400 : #47ffe4,
  A700 : #2dffe0,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #000000,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);

$m2m-app-primary: mat.define-palette($m2m-palette-primary, 900);
...

Hope it helps. Have phun :D

Upvotes: 5

laudebugs
laudebugs

Reputation: 176

Angular Material themes are based on defining your primary, warn and accent colors. The Documentation on Angular Material Theming are very helpful here

You can define these colors in your main scss file. (below is copied straight from the docs)

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 )
));

@include mat.core-theme($my-theme);

@include mat.button-theme($my-theme);

Once you define your theme, you can then use the primary|accent|warn based on your theme.

If you don't want to do this, then you need to change the button's style directly, i.e. the background-color

Upvotes: 1

Related Questions