1

I found plenty of guides talking about how to define your own theme of Angular Material. But all I want is to use the `primary color' of the current theme on a normal HTML element.

Something like:

<div style="color: primary-color">OK</div>

I do not want to go through the hell to define a palette and color variable. I just want to get the value which Angular uses.

David S.
  • 10,578
  • 12
  • 62
  • 104
  • `````` – Fateme Fazli Oct 07 '18 at 07:15
  • @fatemefazli...my bad. The `button` is a special element. I meant a general element, like a **div** tag. – David S. Oct 07 '18 at 07:52
  • Possible duplicate of [How to set the color of an icon in Angular Material?](https://stackoverflow.com/questions/46812064/how-to-set-the-color-of-an-icon-in-angular-material) – Tom Oct 07 '18 at 08:12
  • @tom, all those posts are talking about how to define a custom `primary` color. But I want to **get** the current primary color...I think it is very different. – David S. Oct 07 '18 at 08:48
  • @davidshen84 Because you say 'set', I didn't think you wan't to *get* but *set*. To do so you would simply do this: `menu` – Tom Oct 07 '18 at 08:50
  • I am not using `mat-icon`. I am using a normal HTML element. – David S. Oct 07 '18 at 09:14

2 Answers2

0

According to these two bugs, the document was not accurate. The latest version of the document works for me.

David S.
  • 10,578
  • 12
  • 62
  • 104
-2

You don't need a custom palette but you will need a custom theme and variables to do this. Angular Material provides a sass function to extract colour from a theme but for that to happen the theme has to be a sass theme, you can't do it with the pre-compiled themes as they are in static css:

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

@include mat-core();
$app-primary: mat-palette($mat-indigo);
$app-accent : mat-palette($mat-pink, A200, A100, A400);
$app-warn : mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

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

.custom-class {
  color: mat-color($app-primary);
}

and in the HTML view:

<div class="custom-class">OK</div>

Edit: You can do it with a pre-built theme but you will have to go through a similar amount of steps as above. But the above leaves you with the flexibility of changing colours as you see fit.

https://material.angular.io/guide/theming-your-components

Avin Kavish
  • 8,317
  • 1
  • 21
  • 36