Angular 4+ and Angular Material 2.0.0 beta 10, Angular CLI 1.3+
You will have to create a scss file "exampleTheme.scss" , you add it to your angular-cli.json
angular-cli.json:
"styles": [
//if you are using --scss the file is called style.scss
"styles.css",
"customTheme.scss"
],
In your customTheme.scss you can change your colors in use of the following code:
@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-blue,200);
$accent: mat-palette($mat-orange,200);
$theme: mat-light-theme($primary, $accent);
@include angular-material-theme($theme);`
Multiple Themes
If you want to have an additional theme please read the guide linked in the end. But here a small overview you just have to replicate the theming process with new variables and colors
$dark-primary: mat-palette($mat-blue,800);
$dark-accent: mat-palette($mat-orange,800);
$dark-theme: mat-dark-theme($primary, $accent);
and add
.material-dark-theme {
@include angular-material-theme($dark-theme);
}
for more detailed information you should read the angular material theme guide
Best Answer
Indeed, you cannot use
color="primary"
on every HTML element.What I did is a class called
color-primary
Of course, I've set the color here but you can create another class, for example :
background-color-primary
.(here's the link of my sample project : Pizza-Sync).