how to modify the angular material theme main color

Question

I have created a new angular5 project on which I'm using angular material for frontend components (https://material.angular.io/). All good till now but the main problem is how to add a custom theme. I am not using a scss compiler on this project so what I am doing is to import all css components into style.css like

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~app/components/test/test.component.css";

The thing is I don't know how to modify the base color of prebuilt theme or to generate another css with other base color for my theme. If anyone can help me with that I'll really appreciate !

Solution

Here's a very descriptive guide on how to define your own theme (but you should definitely check out the link that @br.julien posted above.):

NOTE: If you're in a rush, just scroll down to the bottom of this answer to get the whole source code.

Prerequsites

• If you're using a CSS file, please change the filename extension to .scss.

• If you're using the Angular CLI, in your styles array, change styles.css to styles.scss:

  "styles": [
      "styles.scss" // <- Change to this
  ]
  

---

Get started

1. Import ~@angular/material/theming at the top of your styles.scss:

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

2. After that, add @include mat-core() in styles.scss, ideally after the import line:

   @include mat-core();
   

3. Afterwards, define some variables for your app (primary, accent and optionally warn), then assign them to a function called mat-palette:

   // I suggest that you should use another prefix, but `my-app` is fine as well
   // Primary colour
   $my-app-primary: mat-palette($mat-indigo);
   // Accent colour
   $my-app-accent: mat-palette($mat-pink, A200, A100, A400);
   

   For all palettes, visit the source code (_palette.scss).

   Also, see what the colour palettes look like on Material.io guidelines.

4. Next, define another variable for your app's theme and include the theme as a parameter of angular-material-theme (place this after the variables you defined above):

   (Note: Choose any one of these options below:)

   Light theme:

   $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);
   @include angular-material-theme($my-app-theme);
   

   Dark theme:

   $my-app-theme: mat-dark-theme($my-app-primary, $my-app-accent);
   @include angular-material-theme($my-app-theme);
   

5. You're done!

Full source code

Here's some full source code for you to copy :)

styles.scss

@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-indigo);
$my-app-accent: mat-palette($mat-pink, A200, A100, A400);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);

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

(Wow. All this work for just 8 lines of code.)

Anyways, if you want to learn more about Sass, check out the official documentation!