Custom Theme for Angular Material Components Series: Apply Theme

Custom Theme for Angular Material Components Series: Apply Theme

This is the third article of Custom Theme for Angular Material Components Series. In the first and second, we understood how Angular Material’s and its components' themes work.

Summary#

This is the third article of Custom Theme for Angular Material Components Series. In the first and second, we understood how Angular Material’s and its components' themes work.

In this article we will proceed to modify default theme of components. Below is what we will be doing:

  1. Understand theme of MatToolbar
  2. Apply MatToolbar's theme to MatSidenav and MatDialog
  3. Create a different theme for MatSnackbar and nice styling for different kind of notifications (default, info, success, warning, error)

1. Understand theme of MatToolbar#

Now as you know, how each components theme is included in our application, let’s move ahead and see MatToolbar's theme: src/material/toolbar/_toolbar-theme.scss:

...

@mixin mat-toolbar-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-toolbar {
    background: mat-color($background, app-bar);
    color: mat-color($foreground, text);

    &.mat-primary {
      @include _mat-toolbar-color($primary);
    }

    &.mat-accent {
      @include _mat-toolbar-color($accent);
    }

    &.mat-warn {
      @include _mat-toolbar-color($warn);
    }

    @include _mat-toolbar-form-field-overrides;
  }
}

@mixin mat-toolbar-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-toolbar,
  .mat-toolbar h1,
  .mat-toolbar h2,
  .mat-toolbar h3,
  .mat-toolbar h4,
  .mat-toolbar h5,
  .mat-toolbar h6 {
    @include mat-typography-level-to-styles($config, title);
    margin: 0;
  }
}

...

@mixin mat-toolbar-theme($theme-or-color-config) {
  ...
      @include mat-toolbar-color($color);
      ...
      @include _mat-toolbar-density($density);
      ...
      @include mat-toolbar-typography($typography);
  ...
}

angular components

Bootstrap 5 Complete Course with Examples

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

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

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.

Angular Components and Their Types

In this article, you will get to know about all the various components present in the angular application by default and how you can add or remove components.

Angular Architecture Components and Features

Learn about Angular Architecture and its components like Module, Template, Component, Metadata, Data Binding, Services, Directives and Dependency Injection

Agnostic components in Angular

When you’re building a reusable components library, API is very important. Learn how to make components that work with everything and look like anything!

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