Custom Theme for Angular Material Components Series: Part 2 — Understand Theme
Tags: angular, material, theme, scss
Published: 2020-04-03 14:52:23

---
title: Custom Theme for Angular Material Components Series: Part 2 — Understand Theme
published: true
description: Understand Theme of Angular Material and its different Components. 😎
tags: angular, material, theme, scss
series: Custom Theme for Angular Material Components
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1a1ywkq3ch34czrz4r5v.jpg
---

> _Updated version of this article is present at: [angular-material.dev](https://angular-material.dev/articles/angular-material-theming-system-complete-guide)_

<i>Understand Theme of Angular Material and its different Components. 😎<i>

## Summary

This is the second part of the series. In part one, we created an Angular Project with Material Modules. We also created a Custom Theme and couple of helper modules (`CustomMaterialModule` and `SharedModule`).

{% post https://dev.to/shhdharmen/custom-theme-for-angular-material-components-series-part-1-create-a-theme-1ba5 %}

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

---
Let's start...

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aggqehsxup6g0ugg5x43.jpg)

## Understand Material Theming (a deep look into Angular Material’s repo)

Let’s take a look at related stylesheets (css/scss) on [Angular Material’s Github repo](https://github.com/angular/components). If you open the github repo, you would see below structure:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bktgddftvghpq9cfo4t3.png)
<figcaption>Folders of <a href="https://github.com/angular/components" target="_blank">https://github.com/angular/components</a></figcaption>

I will guide you through some important folders, which are directly related to 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:

```scss
// src/style.scss
// LINE 3
@import '~@angular/material/theming';
// LINE 9
@include mat-core();

// src/theme.scss
// LINE 11
$theming-material-components-theme: mat-light-theme($theming-material-components-primary, $theming-material-components-accent, $theming-material-components-warn);

// src/style.scss
// LINE 20
@include angular-material-theme($theming-material-components-theme);
```

Just keep in mind above lines, we are going to relate them with some of files from Angular Material repo's *[src/material](https://github.com/angular/components/tree/master/src/material)* folder, you can keep that folder opened up in new tab or window, so that it would be easy for you to understand.

> *ℹ️ Tip: Look for the 💡, ⛳, ☝️, 👈, 👉 in the article, that will help you relate.*

### 📁 src/material

In this folder, you can see they have made folders for each Material Component and few other (core, testing, schematics, etc.).

### 📁 src/material/*\<component-name\>*

For each component, there is a separate folder. And in each component they have a theme file. Theme file’s naming pattern is : *_\<component-name\>-theme.scss*. So, for `MatToolbar` , it’s *_toolbar-theme.scss* and full path of the same is: *[src/material/toolbar/_toolbar-theme.scss](https://github.com/angular/components/blob/master/src/material/toolbar/_toolbar-theme.scss)*. 👉 Now you know, how to find a theme file for any component 👈.

The other way to find components’ themes is through 💡 *File Finder*. Once you have opened the repo, click on `Find File` button, which is on the right side of breadcrumbs.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/97vnnkdw2dzzfohzlf2x.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ku5kx7dnc195q4f48iw8.png)

You can simply enter filename in the pattern of: *_\<component-name\>-theme.scss* and you will directly see the related file.

> *ℹ️ Note that, each component has a theme file. We will see later on, how that is included in our application.*

### 📁 src/material/core

This has core library code for other `@angular/material` components. Other Material Components means, simply the components which you can’t see directly at [https://material.angular.io/components/categories](https://material.angular.io/components/categories), but they are crucial.

Let’s dive in *core* folder.

#### 📁 src/material/core/_core.scss

Let's (spend couple of minutes to) take a look at file:

{% gist https://gist.github.com/shhdharmen/ee678e49a8d264025c08e86450afcf6b %}

To summarize, below is what's happening in this file:

1. All of the CDK related styles are 🔁 imported (Lines 1–3)
2. Other helper styles are imported (check-boxes, elevation, ripples, typography, etc.) (Lines 6–11)
3. A mixin called 💡 `mat-core` is created (Lines 14–20). As the comment says, *this renders all of the core styles that are not theme-dependent*, like ripple effects, CDK behaviors, etc. 👉 Now you know from where are you including mat-core in application’s *styles.scss* 👈.
4. A mixin called 💡 `mat-core-theme` is created (Lines 23–55). As per comments, *this renders all of the core styles that depend on the theme*, like color combination of ripples, color combination of elevations, etc. But wait 🤔, we didn’t call this in our *styles.scss*, so where it’s called? Let me reveal the ⛳ suspense later on.

#### 📁 src/material/core/style

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yrcribjcriftj9hng1nd.png)
<figcaption>src/material/core/style</figcaption>

The *style* folder contains some common styling files. File names should give you a basic idea what it does. Going into detail of each file is beyond scope of this article.

#### 📁 src/material/core/theming

This folder contains all the styles related to theming. Let’s go into it.

#### 📁 src/material/core/theming/prebuilt

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r78iy4aieayh0hzgycmj.png)
<figcaption>src/material/core/theming/prebuilt</figcaption>

As you can see, it contains all 💡 prebuilt themes. 👉 Now you know, if you use any of prebuilt theme, from where it’s coming 👈.

#### 📁 src/material/core/theming/_all-theme.scss

If you [open the file](https://github.com/angular/components/blob/master/src/material/core/theming/_all-theme.scss) and see, it has imported 💡 all the Material Component Themes in it, plus 💡 `mat-core-theme` from *src/material/core/_core.scss*. And all the mixins are included in a new 💡 mixin called `angular-material-theme`.

Does `angular-material-theme` sound familiar 🤔? Yes, you’re right, 👉 we have included it in our styles.scss file👈 . Now everything is becoming more clear, right? (Don't say no...😜)

#### 📁 src/material/core/theming/_palette.scss

As the name suggests, it has all the Material System Colors. But where these colors are used? Next file is the answer to that.

#### 📁 src/material/core/theming/_theming.scss

If you [open the file](https://github.com/angular/components/blob/master/src/material/core/theming/_theming.scss) and see, first thing what it does is  💡 `@import 'palette'`.

And it uses those palette colors in below 💡 five functions:

```scss
@function mat-contrast($palette, $hue);

@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700);

@function mat-color($palette, $hue: default, $opacity: null);

@function mat-light-theme($primary, $accent, $warn: mat-palette($mat-red));

@function mat-dark-theme($primary, $accent, $warn: mat-palette($mat-red));
```

If you are thinking 🤔, are those the same ☝️ functions which we used in our *theme.scss* file? Then I must say you have a 🧠 strong memory power and you’re ✔️ right! 👉 So now we know, from where our theme functions are coming 👈.

#### 📁 src/material/core/typography

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/brht07snud5g6x2cqyar.png)

The content and structure is all most similar to *src/material/core/theming*. It would be now clear to you how it works.

One thing I would like to mention, 💡 a mixin `angular-material-typography` of *src/material/core/typography/_all-typography.scss* is the main mixin responsible for typography related stuffs in Material Theme. 👉 And this same mixin is imported in *src/material/core/_core.scss* 👈.

Great! We are done with inspecting and finding related stylesheets. If you've read upto this, I have 3 claps for you: 👏👏👏

But, you would still have one ❓ question in mind. In our *styles.scss* file we are only importing one single file `@import '~@angular/material/theming';` So, 🤔 how other files are getting loaded?

> *💡 When Angular Material Team 📦 packages and ⏫ publishes the Angular Material Package ([@angular/material](https://www.npmjs.com/package/@angular/material)), they combine all the theming, typography, styles and core styles into one single file called **_theming.scss**, so that we don’t have to import multiple files.*
>
> *💡 You can check the same by opening the file. In your project folder open this : **node_modules\@angular\material\_theming.scss** . The first comment/line in the file says 👉 : "Import all the theming functionality".*
>
> *💡 Pre-built theme files are not included in main **_theming.scss**. The reason behind that is but obvious, if you want to create your custom theme, you wouldn’t want pre-built theme files load into your application. And if you want to include any of pre-built themes, we 🔁 import the respective theme file.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vxa3ak79yfn0vdvjlpm4.gif)

I know 😄 you must be feeling sleepy as it’s still difficult to remember how theming works, as there are lot of things included. I will try to explain again by an info-graphic:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y88dq80yp5iu00xlrurg.png)
<figcaption>If you are not able to view it properly, see it [here](https://projects.invisionapp.com/freehand/document/EnvJvPshc)</figcaption>

## Thank you,

for reading this article. In the next part, we will learn `MatToolbar`'s theme and apply the same to `MatSidenav` and `MatDialog`. We will also create a separate theme for `MatSnackbar` and will use them as notifications.

Next part is also published:

{% post https://dev.to/shhdharmen/custom-theme-for-angular-material-components-series-part-3-apply-theme-e34 %}

And yes, always believe in your self.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u17o2enndvk1l7ghzc8o.jpg)
<figcaption>Photo by <a href="https://unsplash.com/@alexbracken?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">alex bracken</a> on <a href="/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>

#### Credits
<small>Cover image: <a target="_blank" rel="noopener" href="https://photos.icons8.com/photos/colorful-wall--5b7ec7b08b658800015f7300">Photo</a> by <a target="_blank" rel="noopener" href="https://photos.icons8.com">Moose</a>
</small>