How to change Angular material theme in just 5 minutes!

it’s very easy to create a custom angular material theme. This will allow you to specify primary, accent and warning colors that will be used on Angular Material components.

Your custom theme will be a Sass file and in our case, we’ll call it theme.scss and place it in our app’s /src folder.

Don’t worry if you don’t use Sass for your the rest of your app. If you’re using the Angular CLI, you can simply add your Sass file to the list of styles in the .angular-cli.json configuration file and the Angular CLI will take care of compiling the CSS file:

.angular-cli.json

"styles": [
  "styles.css",
  "theme.scss"
],

In the theme file, you’ll want to first import the main theming Sass file from Angular Material and include the base styles:

theme.scss

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

Next, you’ll declare variables for your primary, accent and warning colors using the mat-palette function.

mat-palette takes a color name as its first argument, and the remaining optional second, third and fourth arguments define a default value, a lighter value and a darker value. The color names and values themselves are taken from the official Material Design color guidelines:

theme.scss

$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);

We finalize by creating a $my-app-theme variable that combines our color definitions with the mat-light-theme function, and finally, include the result of calling the angular-material-theme function with our $my-app-theme.

The warning color is optional and will default to red if none is provided.

Additional and Alternate Themes

You can also create alternate themes if you’re feeling so inclined by nesting a theme definition inside a class. You’ll then simply add the class name to a parent element in your templates for the alternate theme to take effect.

Here’s our full file, with an alternate theme:

theme.scss

@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);
}

Here’s how our two themes look:

app.component.html

<mat-card>
  Main Theme:
  <button mat-raised-button color="primary">
    Primary
  </button>
  <button mat-raised-button color="accent">
    Accent
  </button>
  <button mat-raised-button color="warn">
    Warning
  </button>
</mat-card>
<mat-card class="alternate-theme">
  Alternate Theme:
  <button mat-raised-button color="primary">
    Primary
  </button>
  <button mat-raised-button color="accent">
    Accent
  </button>
  <button mat-raised-button color="warn">
    Warning
  </button>
</mat-card>

For more information,
Angular Material Theming

You can use http://mcg.mbitson.com website to create your own color palette. Thanks

Sushant Pushkarna

for sharing it.

Conclusion

And that’s it! Did this work for you? Please leave any questions and comments below!

Thank you for reading!

If you found this article helpful, 👏👏👏.