Angular Material Theme

ng add @angular/material

Also add these classes to the body: class="mat-app-background mat-typography"

Using Material styles for styling components:

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

.custom-elem {
 color: mat-color($mat-green, 700);

A material palette consist of a range of colors with different contrast. They use a number system as a key for which color to use. The 500 is the default color.

Material Elevation

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

// from node_modules/@angular/material/_theming.scss
// <div class="mat-elevation-z2">Some elevated content</div>
.card {
  @include mat-elevation(2);
  &:hover {
    @include mat-elevation(8);

You can add classes to add bg drop shadow: mat-elevation-z1 to mat-elevation-z24

Leave a Reply

Your email address will not be published. Required fields are marked *