Some time back, I was going through questions on stack-overflow. A question regarding applying same theme to mat-sidenav as mat-toolbar appeared at my feed. You can check the question here.

Although I answered the question with sample code, I thought of expanding the same context to more components and make a nice formatted code-base. Which can be useful to my upcoming projects and yours, too.

By end of this series, you would have an idea about creating and applying your own Custom Theme to Angular Material Components.

Table of Contents#

1. Create an Angular Project using Angular CLI and add Angular Material
2. Understand Angular Material Custom Theme
3. Create Base Theme Files
4. Update Project Structure with few new modules
5. Create basic UI skeleton

---

1. Create an Angular Project using Angular CLI and add Angular Material#

npm i -g @angular/cli
ng new theming-material-components --style=scss --skipTests --routing=false
<>

👉 _--style__ will set our styling partner, i.e. _scss_, _--skipTests_ will skip generating ‘spec.ts’ files for our project and _--routing=false_ will not generate ( and ask about) routing module. You can learn more about CLI options here._

Once it’s done…

cd theming-material-components
ng serve -o
<>

Now, to add Angular Material, we will follow official guideline from Angular Material Getting Started:

ng add @angular/material
<>

The ng add command will install Angular Material, the Component Dev Kit (CDK), Angular Animations and ask you the following questions to determine which features to include:

1. Choose a prebuilt theme name, or “custom” for a custom theme: Select Custom
2. Set up global Angular Material typography styles?: Yes
3. Set up browser animations for Angular Material?: Yes

The ng add command will additionally perform the following configurations:

• Add project dependencies to package.json
• Add the Roboto font to your index.html
• Add the Material Design icon font to your index.html
• Add a few global CSS styles to:
• Remove margins from body
• Set height: 100% on html and body
• Set Roboto as the default application font

You’re done! Angular Material is now configured to be used in your application.

2. Understand Angular Material Custom Theme#

Let’s look at 📄 style.scss file:

// src/styles.scss

// Custom Theming for Angular Material

// For more information: https://material.angular.io/guide/theming

@import "~@angular/material/theming";
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!

@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/

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

// The warn palette is optional (defaults to red).

$theming-material-components-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).

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

// 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 angular-material-theme($theming-material-components-theme);

/* You can add global styles to this file, and also import other style files */

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

#angular #theme #scss