Ho to use angular theme for all Markup elements?

Question

Is it possible to use Angular Material theme for text and other HTML elements such text, header, links etc. ?

I would like to use something like following:

<h2 color="'primary'">Text to be colored</h2>

I have been searching and found this posting e.g. Get Material 2 theme color scheme/palette for other elements, but it seems to be too much and I also won't agree to use just scss files instead of css.

Is there an simpler way to achieve this? For instance adding extra definition for the other elements in theme.scss?

score 1 · Accepted Answer · answered Nov 23 '17 at 14:12

1

You can use a class to set the colour in your styles:

<h2 class="app-primary">Primary</h2>

This method assumes that you have a custom theme:

$app-primary: mat-palette($mat-indigo);
// ...

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

Or:

.app-primary {
    /* Insert hard-coded value here */
    color: #3F51B5;
}

answered Nov 23 '17 at 14:12

Edric

Yes, I do have a custom theme: `@import '~@angular/material/theming'; @include mat-core(); $app-primary: mat-palette($mat-pink, 700, 900); $app-accent: mat-palette($mat-light-green, 600, 900, A100); $app-warn: mat-palette($mat-grey); $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn); @include angular-material-theme($app-theme);` – k.vincent Nov 23 '17 at 15:13
1

First Option with theme working like a charm! Fixed. – k.vincent Nov 23 '17 at 15:16

1 Answers1