Custom Theme for Angular Material Components Series:

Custom Theme for Angular Material Components Series:

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

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 '[email protected]/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

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

Angular Material Autocomplete - Multiple Use Cases covered

Angular Material Autocomplete - Multiple Use Cases covered0:00 Intro0:23 - Use Case: Autocomplete with native input8:15 - Implement Filtering feature15:...

How to Structure SCSS in an Angular App

Let’s first walk through the file changes that the Angular CLI handles for us and how you can modify existing projects to switch over to SCSS for styling. I’ll then go over how I like to set up my SCSS files and folder structure when working on Angular projects.