Angular Material Theme

1
ng add @angular/material

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

Using Material styles for styling components:

1
2
3
4
5
6
7
8
9
@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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
 
  // ...
 
  "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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
 
  // ...
 
  "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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@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