Is there a way to add more color variables as opposed to just having "primary", "accent", and "warn"?
1
-
Actually, you can read more about theaming here material.angular.io/guide/themingreflexdemon– reflexdemon2017-06-02 01:28:29 +00:00Commented Jun 2, 2017 at 1:28
Add a comment
|
1 Answer
It's quite simple, you have to add in this way, :
@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent: mat-palette($mat-pink, 500, 900, A100);
$my-app-warn: mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
.alternate-theme {
$alternate-primary: mat-palette($mat-light-blue);
$alternate-accent: mat-palette($mat-yellow, 400);
$alternate-theme: mat-light-theme($alternate-primary, $alternate-accent);
@include angular-material-theme($alternate-theme);
}
And then:
<md-card>
Main Theme:
<button md-raised-button color="primary">
Primary
</button>
<button md-raised-button color="accent">
Accent
</button>
<button md-raised-button color="warn">
Warning
</button>
</md-card>
<md-card class="alternate-theme">
Alternate Theme:
<button md-raised-button color="primary">
Primary
</button>
<button md-raised-button color="accent">
Accent
</button>
<button md-raised-button color="warn">
Warning
</button>
</md-card>
1 Comment
netlander
That's actually not the answer to the OP 's questing. This is merely using two different themes, not adding more colours to a theme.