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.

Add default Material theme

angular.json:

{
  // ...
  "projects": {
    "project-name": {
      // ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // ...
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/assets/styles/styles.scss"
            ],

Angular Material custom theme

assets/styles/project-name-theme.scss:

// https://material.angular.io/guide/theming
@use '~@angular/material' as mat;

@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$project-primary: mat.define-palette(mat.$cyan-palette, 800);

$project-accent: mat.define-palette(mat.$cyan-palette, 600);

// The warn palette is optional (defaults to red).
$project-warn: mat.define-palette(mat.$orange-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$project-app-theme: mat.define-light-theme(
    (
      color: (
        primary: $project-primary,
        accent: $project-accent,
        warn: $project-warn,
      ),
    )
);

$project-typography: mat.define-typography-config(
  $font-family: 'Cabin'
);

@include mat.all-component-typographies($project-typography);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($project-app-theme);

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project Name</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-app-background mat-typography">
<app-main>
  <h3>Loading...</h3>
</app-main>
</body>
</html>

angular.json:

{
  // ...
  "projects": {
    "project-name": {
      // ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // ...
            "styles": [
              "src/assets/styles/project-name-theme.scss",
              "src/assets/styles/styles.scss"
            ],

Material Elevation

https://material.angular.io/guide/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 Comment