Table of Content

Theme Angular Material Components: Step-by-Step Guide

4 Easy Steps to Theme Angular Material Components

1. Install Angular Material

2. Setup your own custom theming options

3. Registering the theme for use

4. Utilise the chosen theme in component

Software Development

Theme Angular Material Components: Step-by-Step Guide

October 4, 2024

5Theming is vital for reinforcing brand identity as it ensures that an application’s visual elements align with the company’s established colour schemes, typography, and overall aesthetic. By consistently applying a well-defined theme, businesses can create a unified and recognizable user experience that strengthens their brand presence and enhances user trust and engagement.

Theming in Angular Material leverages the capabilities of SASS to create dynamic and visually appealing user interfaces. By using features such as variables, mixins, and functions, Angular Material allows developers to generate CSS tokens and apply colors based on predefined palettes. This process ensures a cohesive and customizable look across all components of an application.

4 Easy Steps to Theme Angular Material Components

Angular Material offers a detailed guide for configuring custom themes. Below is a streamlined, step-by-step approach to help you implement and manage themes effectively in your Angular project.

1. Install Angular Material

By default, Angular provides three pre-built themes that can be easily applied. However, to implement a custom theme, you must select the custom theme option for configuration.

We should aso enable the global angular material typography and animations module while setting up the angular material

After you follow the above steps, angular material would change your syles.scss file as follows -

In short, it sets up the core mixin of the angular material to handle options like ripple etc which are not directly related to theme. Italso registers a custom theme with some default config.

2. Setup your own custom theming options

To setup your own custom theming options, we need to understand the options that need to be passed to the define-theme function.

This function expects the details of colour, typography and density

1. In colour option we need to pass

theme-type - which can either be dark or light, based on which angular material applies darker tones or lighter tones of the provide palette.
primary - The primary color defines the main color of your app, often used in the most prominent elements like toolbars, buttons, and active elements.

Unlike previous versions, we dont need to specify secondary palettes as they would be chosen based on the primary palette itself.

tertiary - this expects the tertiary palette which is usually the palette used in complementary fills and text (optional). When left blank it uses the primary palate itself.

Angular material provides us prebuilt pallets to use here -

$red-palette
$green-palette
$blue-palette
$yellow-palette
$cyan-palette
$magenta-palette
$orange-palette
$chartreuse-palette
$spring-green-palette
$azure-palette
$violet-palette
$rose-palette

To use custom pallettes the angular material provides a command that generates the a custom theme from the provided palette. All you need to do is to register the generated theme in the styles file as outline in the upcoming section

Code Title

  // This file was generated by running 'ng generate @angular/material:m3-theme'.
  // Proceed with caution if making changes to this file.

  @use 'sass:map';
  @use '@angular/material' as mat;

  // Note: Color palettes are generated from primary: #a1da20
  $_palettes: (
    primary: (
      0: #000000,
      10: #141f00,
      20: #243600,
      25: #2d4200,
      30: #364e00,
      35: #405b00,
      40: #496800,
      50: #5d8200,
      60: #729e00,
      70: #87bb00,
      80: #9fd81d,
      90: #baf53f,
      95: #d6ff88,
      98: #f2ffd1,
      99: #faffe5,
      100: #ffffff,
    ),
    secondary: (
      0: #000000,
      10: #141f00,
      20: #243600,
      25: #2d4200,
      30: #364e00,
      35: #415a09,
      40: #4d6717,
      50: #65802e,
      60: #7e9b45,
      70: #97b65d,
      80: #b2d276,
      90: #ceee8f,
      95: #dcfd9b,
      98: #f2ffd1,
      99: #faffe5,
      100: #ffffff,
    ),
    tertiary: (
      0: #000000,
      10: #002108,
      20: #003913,
      25: #004619,
      30: #00531f,
      35: #006025,
      40: #006e2c,
      50: #008a39,
      60: #00a746,
      70: #00c555,
      80: #3de26d,
      90: #68ff89,
      95: #c6ffc7,
      98: #ebffe7,
      99: #f6fff1,
      100: #ffffff,
    ),
    neutral: (
      0: #000000,
      10: #191d11,
      20: #2e3225,
      25: #393d30,
      30: #44483b,
      35: #505446,
      40: #5c6051,
      50: #757969,
      60: #8f9282,
      70: #a9ad9c,
      80: #c5c8b6,
      90: #e1e4d2,
      95: #eff3df,
      98: #f8fbe8,
      99: #fbfeeb,
      100: #ffffff,
      4: #0c0f06,
      6: #11150a,
      12: #1d2115,
      17: #282b1f,
      22: #323629,
      24: #373b2e,
      87: #d9dcc9,
      92: #e7ead7,
      94: #edf0dd,
      96: #f2f5e2,
    ),
    neutral-variant: (
      0: #000000,
      10: #181e0d,
      20: #2d3320,
      25: #383e2a,
      30: #434935,
      35: #4f5540,
      40: #5a614c,
      50: #737a63,
      60: #8d947c,
      70: #a7ae95,
      80: #c3c9af,
      90: #dfe6ca,
      95: #edf4d8,
      98: #f6fce0,
      99: #faffe5,
      100: #ffffff,
    ),
    error: (
      0: #000000,
      10: #410002,
      20: #690005,
      25: #7e0007,
      30: #93000a,
      35: #a80710,
      40: #ba1a1a,
      50: #de3730,
      60: #ff5449,
      70: #ff897d,
      80: #ffb4ab,
      90: #ffdad6,
      95: #ffedea,
      98: #fff8f7,
      99: #fffbff,
      100: #ffffff,
    ),
  );

  $_rest: (
    secondary: map.get($_palettes, secondary),
    neutral: map.get($_palettes, neutral),
    neutral-variant: map.get($_palettes,  neutral-variant),
    error: map.get($_palettes, error),
  );
  $_primary: map.merge(map.get($_palettes, primary), $_rest);
  $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

  $light-theme: mat.define-theme((
    color: (
      theme-type: light,
      primary: $_primary,
      tertiary: $_tertiary,
      use-system-variables: true,
    ),
    typography: (
      use-system-variables: true,
    ),
    density: (
      scale: -1,
    ),
  ));

  $dark-theme: mat.define-theme((
    color: (
      theme-type: dark,
      primary: $_primary,
      tertiary: $_tertiary,
      use-system-variables: true,
    ),
    typography: (
      use-system-variables: true,
    ),
    density: (
      scale: -4,
    ),
  ));

2. Typography option can be used to specify the custom types to be used in the material library.

We can provide font-family for plain text and headlines with plain-family and brand-family options here. Also, we have the option to setup the regular, medium and bold font weights.

3. Density defines the padding and spacing options that need to be added. We can choose from 0 (most space) to -5 (least space) to define the compactness of the elements spacing

3. Registering the theme for use

html {
@include mat.all-component-themes($my-theme);
}

Copy

We may also register multiple themes to use follows -

html {
@include mat.all-component-themes($my-theme);
}

Copy

Code Title

  @use '@angular/material' as mat;

  @include mat.core();

  // Define the theme object.
  $light-theme: mat.define-theme((
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: 0,
    )
  ));

  $dark-theme: mat.define-theme((
    color: (
      theme-type: dark,
      primary: mat.$blue-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: 0,
    )
  ));

  .theme-dark {
    @include mat.all-component-themes($dark-theme);
  }

  .theme-light {
    @include mat.all-component-themes($light-theme);
  }

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

4. Utilise the chosen theme in component

html {
@include mat.all-component-themes($my-theme);
}

Copy

So in all, Angular Material offers robust configurations and controls, allowing you to easily customise the appearance and user experience of your application.

Elevate your digital presence with our web application development services. At Zignuts, we create tailored solutions that enhance functionality and user experience, ensuring your business stands out in a competitive market.

In conclusion, the blog demonstrates how Angular Material provides a powerful and flexible way to customise the appearance of an application through theming, giving developers control over colours, typography, and layout density, while also supporting theme switching for better user experiences.