DEV Community

loading...
Cover image for Custom Theme for Angular Material Components Series: Part 2 โ€” Understand Theme
ITNEXT

Custom Theme for Angular Material Components Series: Part 2 โ€” Understand Theme

Dharmen Shah
I work on Angular, React, Electron, JavaScript, CSS, SCSS, Bootstrap, NodeJS. Love to contribute to Open-Source Projects.
ใƒปUpdated on ใƒป6 min read

Understand Theme of Angular Material and its different Components. ๐Ÿ˜Ž

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).

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


Let's start...

Alt Text

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. If you open the github repo, you would see below structure:

Alt Text

Folders of https://github.com/angular/components

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:

// 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 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. ๐Ÿ‘‰ 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

Alt Text

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, 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:

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

src/material/core/style

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

src/material/core/theming/prebuilt

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 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 and see, first thing what it does is ๐Ÿ’ก @import 'palette'.

And it uses those palette colors in below ๐Ÿ’ก five functions:

@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

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), 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

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

If you are not able to view it properly, see it [here](https://projects.invisionapp.com/freehand/document/EnvJvPshc)

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:

And yes, always believe in your self.

Alt Text

Photo by alex bracken on Unsplash

Credits

Cover image: Photo by Moose

Discussion (0)

Forem Open with the Forem app