Theme Angular Material Components: Step-by-Step Guide

Published on October 4, 2024

Zignuts Technolab

Software Development

Theming 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

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

We may also register multiple themes to use follows -

4. Utilise the chosen theme in component

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.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you for reaching out!

We’ve received your message and will get back to you as soon as possible.

Testimonials

Why they’re fond of us?

A reliable and flexible technical partner, Zignuts Technolab enables a scalable development process. The team offers a comprehensive array of expertise and scalability that yields an optimized ROI. Direct contact with specialists maintains a seamless workflow and clear communication.

Joeri

Technical Architect
Blockchain-based Real Estate Platform Company, Belgium

Zignuts Technolab transformed our platform by simplifying code, redesigning key aspects, and adding new features, all within impressive timelines. Their project management and communication were exceptional.

Ali

Managing Director
Automobile Company, UAE

Zignuts team has been instrumental in our platform’s development including backend, frontend and mobile apps, delivering excellent functionality and improving speed over time. Their project management, pricing and communication are top-notch.

Shoomon

Co-Founder
AI-Based Fintech Startup, UK

Zignuts has delivered excellent quality in developing our website and mobile apps. Their genuine interest in our business and proactive approach have been impressive.

Jacob

Technical Architect
Blockchain-based Real Estate Platform Company, Belgium

Their team's dedication and knowledge in handling our relocation information platform made the collaboration seamless and productive. Highly recommend their services.

Stephen

CEO & Founder
Social Community Platform, Germany

Zignuts Technolab provided highly skilled full-stack developers who efficiently handled complex tasks, from backend development to payment gateway integration. Their responsiveness and quality of work were outstanding.

Houssam

Chief Product Officer
Enterprise Solutions, Jordan

Zignuts Technolab has been highly efficient and responsive in developing our rewards and wellness app. Their ability to integrate feedback quickly and their solid expertise make them a great partner.

Namor

Developer
Wellness Startup, Thailand