Custom Theme for Angular Material Components Series:

Understand Theme of Angular Material and its different Components by taking a deep look into Angular Material Components’ github repo.

Understand Theme of Angular Material and its different Components.

This is the second part of the series. First, we created an Angular Project with a custom theme, a dark theme, custom typography for headings and couple of helper modules (MaterialModule and SharedModule).

In this part, we will understand Material Theming by taking a deep look into Angular Material Components’ github repo.

THIS AD MAKES CONTENT FREE. HIDE

Understand Material Theming: A deep look into Angular Material Components’ repo#

Let’s take a look at related stylesheets on their GitHub repo. I would request you to open up repo in new tab or window, because we are going to check some files from it.

I would also recommend you to clone and open the code base from my GitHub, for better understanding when referred.

Theme Generation Process#

I will guide you through some important folders and files from Angular Material’s repo, which are directly related to our application’s Material Theme. But before that, I would like to remind you that in our application’s 📄 styles.scss and 📄 theme.scss files, we have these very important lines. I have combined lines from both the files and have also referenced through a step number:

Step 0️⃣ src/style.scss - LINE 7

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

Step 1️⃣ src/style.scss - LINE 13

@include mat-core();
<>

Step 2️⃣ src/theme.scss - LINE 7

$theming-material-components-primary: mat-palette($mat-indigo);
$theming-material-components-accent: mat-palette($mat-pink, A200, A100, A400);
$theming-material-components-warn: mat-palette($mat-red);
<>

Step 3️⃣ src/theme.scss - LINE 12

$theming-material-components-theme: mat-light-theme(
  $theming-material-components-primary,
  $theming-material-components-accent,
  $theming-material-components-warn
);
<>

Step 4️⃣ src/style.scss - LINE 25

@include angular-material-theme($theming-material-components-theme);
<>

Step 5️⃣ src/theme.scss - LINE 30

$dark-primary: mat-palette($mat-blue-grey);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);
$dark-theme: mat-dark-theme(
  (
    color: (
      primary: $dark-primary,
      accent: $dark-accent,
      warn: $dark-warn,
    ),
  )
);
<>

Step 6️⃣ src/style.scss - LINE 34

.dark-theme {
  @include angular-material-color($dark-theme);
}
<>

Step 7️⃣ src/theme.scss - LINE 19

$heading-font-family: "'Work Sans', sans-serif";
$typography: mat-typography-config(
  $display-4: mat-typography-level(112px, $font-family: $heading-font-family),
  $display-3: mat-typography-level(56px, $font-family: $heading-font-family),
  $display-2: mat-typography-level(45px, $font-family: $heading-font-family),
  $display-1: mat-typography-level(34px, $font-family: $heading-font-family),
  $headline: mat-typography-level(24px, $font-family: $heading-font-family),
  $title: mat-typography-level(20px, $font-family: $heading-font-family),
);
<>

Step 8️⃣ src/style.scss - LINE 39

@include angular-material-typography($typography);
<>

Just keep in mind these lines, we are going to relate them with some of the files from Angular Material repo’s 📂src/material folder.

Tip:_ Look for the 💡, ⛳, ☝️, 👈, 👉, ✅ or numeric symbols in the rest of article, that will help you relate._

#angular #scss #typography