Theme Angular Material Components: Step-by-Step Guide

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. In the modern web landscape, a theme is no longer just a static coat of paint; it is a dynamic system that adapts to user preferences, such as high-contrast modes or system-level dark settings, providing accessibility alongside style.

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 architecture is built upon the Material 3 (M3) specification, which introduces a more flexible color system and refined component behaviors. This process ensures a cohesive and customizable look across all components of an application, allowing for a seamless transition between different visual states while maintaining technical performance.

With the latest updates, the framework has moved toward a token-based system that simplifies the way styles are injected into components. This means developers can now enjoy finer control over specific component overrides without breaking the global design language. By mastering these tools, you can transform a standard library into a bespoke design system that feels unique to your product's mission and audience.

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. This structured workflow ensures that your design system remains scalable, maintainable, and aligned with the latest Material 3 standards.

1. Install Theme Angular Material

To begin, you need to integrate the library into your existing Angular workspace. This is handled effortlessly via the Angular CLI, which automates the addition of necessary dependencies and configurations.

Code

	ng add @angular/material
      

During the installation process, the CLI will prompt you to choose a typography style and decide whether to include BrowserAnimationsModule. For a fully custom experience, select the "Custom" theme option. This prevents the library from hardcoding a pre-built CSS file and instead gives you full control over the SASS architecture. 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 also enable the global typography and animations module while setting up the library to ensure components behave with the expected fluidity and motion. After you follow the above steps, the framework will update your styles.scss file as follows:

Code

  @use '@angular/material' as mat;

  @include mat.core();

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

  :root {
    @include mat.all-component-themes($angular-material-theming-theme);
  }

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

In short, it sets up the core mixin to handle global options like ripples while registering a custom configuration with modern default settings. This setup acts as the foundation of your styling logic. By utilizing the root selector, the theme properties are injected as CSS variables throughout the entire application, making it easier to reference these values even in non-material components. This approach significantly reduces CSS redundancy and ensures that any future brand color updates only need to be made in one central location.

2. Set up your own custom Theme Angular Material options

To set up your own custom options, we need to understand the parameters passed to the define-theme function. This function expects details regarding color, typography, and density, allowing you to fine-tune the interface to match your specific project requirements. By moving beyond default settings, you can create a sophisticated design system that handles complex states like disabled buttons, hover effects, and focused inputs automatically.

1. Color Options

The color system is the heartbeat of your visual identity. In the latest M3 iterations, the engine uses a sophisticated tonal palette system to ensure high legibility and contrast.

• theme-type: This can be dark or light. The engine applies specific tones based on this choice, automatically adjusting surface colors and text contrast to meet accessibility standards.
• primary: This defines the main color of your app, used for toolbars, prominent buttons, and active states. It represents the core of your brand.
• tertiary: This is used for complementary fills and accents, providing a way to highlight secondary actions without distracting from the primary flow. If left blank, it defaults to the primary palette for a more monochromatic look.

The framework provides several prebuilt palettes such as $red-palette, $green-palette, and $azure-palette. To use a fully unique brand color, use the generation command:

Code

	ng generate @angular/material:m3-theme  
      

Code

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

Code

  @use '@angular/material' as mat;
  @use '../m3-theme.scss' as m3-theme;

  @include mat.core();

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

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

This generates a comprehensive SASS file containing palettes for primary, secondary, tertiary, neutral, and error states. You then register these generated themes in your main style file. This generated file includes a full spectrum of tones (from 0 to 100), ensuring that every UI element has a perfectly balanced shade available for any interaction state.

2. Typography Options

Typography is about more than just picking a font; it is about establishing a clear information hierarchy. You can specify custom fonts for plain text and headlines using plain-family and brand-family. You also have the power to define specific weights for a consistent look across different device resolutions.

Code

typography:(
    brand-family: 'Roboto, "Helvetica Neue", sans-serif',
    plain-family: 'Roboto, "Helvetica Neue", sans-serif',
    bold-weight: 700,
    medium-weight: 300,
    regular-weight: 100
  ),
      

3. Density

Density defines the padding and spacing throughout the library's components. You can choose a scale from 0 (most spacious) to -5 (most compact) to suit your application's data requirements.

For example, a creative portfolio might use a density of 0 to feel airy and premium, whereas a complex financial dashboard would benefit from a density of -3 or -4 to display a larger volume of information on a single screen without requiring excessive scrolling. This setting globally adjusts the height and internal padding of elements like buttons, list items, and form fields.

3. Registering the Theme Angular Material for use

Once you have defined your design parameters, the next crucial phase is injecting these styles into your application's DOM. In the modern Angular ecosystem, this is achieved using SASS mixins that translate your configuration into a comprehensive set of CSS custom properties. By applying the theme mixin to the html or body tag, you ensure that every material component, from simple buttons to complex data tables, inherits the correct brand colors and spacing automatically.

Code

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

This global application is perfect for applications with a single, unified look. However, many modern enterprise applications require more flexibility. You can also register multiple options to allow users to toggle between looks, such as a "Midnight" dark mode or a "High Contrast" version for better accessibility.

By wrapping the theme mixins within specific CSS classes, you gain the ability to switch the entire visual context of the application by simply toggling a class on a parent container. This method is highly efficient because it leverages the browser's native CSS inheritance, ensuring that theme changes are applied instantly without requiring a page reload or expensive re-renders.

Code

  @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; }
      

Beyond just global themes, this registration strategy allows for "scoped theming." For instance, you could apply a dark theme exclusively to a sidebar while keeping the main content area in a light theme. This level of granular control is a hallmark of professional design systems, enabling developers to create depth and visual hierarchy within a single interface. When registering these themes, it is best practice to keep your theme definitions in a dedicated SASS partial file to maintain a clean and organized project structure as your application grows.

4. Utilise the chosen Theme Angular Material in the component

To make the interface interactive, you can switch classes dynamically using a simple component method. This final step bridges the gap between your SASS configurations and the live user experience. By manipulating the DOM classes at the highest level, usually the document.body or a main container, you trigger a cascading style update that affects every child component simultaneously.

In a real-world production environment, you might want to extend this logic by saving the user's preference in localStorage or a database. This ensures that when the user returns to your application, their chosen visual setting is preserved. Furthermore, you can listen to system-level media queries to automatically default to the user's preferred OS color scheme, providing a high-end, native feel to your web application.

Code

  // Template - switch.component.html
  <div>
  <button (click)="switchTheme('light')">Light Theme</button>
  <button (click)="switchTheme('dark')">Dark Theme</button>
  </div>

  // Component class - switch component
  import { Component } from '@angular/core';

  @Component({
    selector: 'switch',
    standalone: true,
    templateUrl: './switch.component.html',
    styleUrl: './switch.component.scss',
  })

  export class SwitchComponent {
    switchTheme(theme: 'light' | 'dark') {
     document.body.classList.remove('theme-light', 'theme-dark');
     document.body.classList.add(`theme-${theme}`);
    }
  }
      

This implementation is highly performant because it avoids heavy JavaScript calculations for styling. Instead, it relies on the browser's optimized CSS engine to repaint the UI based on the new class context. As your application evolves, you can easily add more sophisticated themes such as a "High Contrast" mode for accessibility or seasonal brand variations by simply defining the new class in your SASS and updating the string passed to this method.

Hire Now!

Hire Angular Developers Today!

Ready to bring your web application vision to life? Start your journey with Zignuts expert Angular developers.

**Hire now**Hire Now**Hire Now**Hire now**Hire now

Hire now

Advanced Overrides and Component Tokens in Theme Angular Material

One of the most powerful features of the 2026 iteration is the ability to apply granular overrides using component-specific tokens. If you want your buttons to have a specific rounded corner or a unique elevation that differs from the global theme, you no longer need to write complex CSS selectors or resort to !important flags.

By using the mat.buttons-theme mixin or similar component-level mixins, you can inject localized styles that only target specific elements. This ensures that your customizations remain encapsulated and do not cause unintended side effects across the rest of your application's UI. This token-based approach aligns perfectly with the Material 3 design philosophy, offering a bridge between high-level design systems and low-level CSS implementation.

To master advanced overrides, consider the following strategies:

• Granular Token Mapping: 
  
  Modern versions of the library expose specific tokens for almost every visual property, including state-based changes. You can define specific colors for "hover," "focused," and "pressed" states at the component level without writing manual event listeners in your CSS.

• Encapsulated Component Themes: 
  
  Instead of applying a theme to the entire application, you can wrap specific components in a theme mixin. This is particularly useful for dashboards where a "Sidebar" might require a dark variant while the "Main Content" remains light.

• Customizing Shape and Elevation: 
  
  Beyond color, tokens allow you to redefine the "system shape" of components. For instance, you can transition all dialogs to a sharper edge while keeping buttons pill-shaped, ensuring a bespoke look that departs from the standard Material aesthetic.

• Performance-First Overrides: 
  
  Because these tokens translate directly into CSS custom properties (variables), the browser handles the style updates natively. This eliminates the "flash of unstyled content" and reduces the SASS compilation time for large-scale projects.

Testing and Debugging Your Theme Angular Material

Ensuring that your theme looks perfect across all devices requires a systematic testing approach. Modern browser developer tools now provide specialized panes to inspect CSS custom properties generated by Angular Material. When debugging, look for variables starting with --mat-sys- (like --mat-sys-primary or --mat-sys-surface) to see exactly which hex codes are being applied to your components. These variables are the source of truth for your UI, and checking them in the Computed Styles tab can help you identify if a theme class is being overridden by legacy CSS.

Beyond basic inspection, a professional workflow involves several high-level validation steps:

Visual Regression Testing:

Use tools like Playwright or Cypress to capture snapshots of your components. This ensures that a minor SASS change in your primary palette doesn't unintentionally break the readability of a snackbar or a nested menu. By integrating these tests into your CI/CD pipeline, you can automatically compare "before" and "after" screenshots to detect pixel-level shifts in color or spacing that might go unnoticed by the human eye during a quick manual review.

Angular DevTools Extension:

Utilize the official Angular DevTools browser extension. In the "Component Explorer," you can inspect the current theme state injected into your components and verify that the correct theme class is being applied to the host element at runtime. This tool is invaluable for debugging "Theme Angular Material" issues where a component might not be receiving the expected styles due to View Encapsulation or incorrect selector nesting in your SASS files.

Material 3 Contrast Validation:

It is essential to verify color contrast ratios. While the Material 3 palette generator handles this during design, manual verification using Lighthouse or AXE ensures your application remains compliant with WCAG 2.1 standards. Pay close attention to "On-Color" tokens (e.g., on-primary), which are specifically designed to provide accessible contrast against their container counterparts. Running these audits frequently helps catch accessibility regressions as new components are added to the library.

Harness-Based Unit Testing:

Angular Material provides Component Harnesses for unit testing. You can write tests that "ask" a button for its background color or a text element for its computed font-family, allowing you to catch theming regressions in your CI/CD pipeline before they ever reach a browser. Harnesses provide a stable API to interact with components, making your tests less brittle when the internal DOM structure of a Material component changes during a version upgrade.

Device & High-Contrast Mode Simulation:

Use your browser’s "Emulate CSS media feature" to test forced-colors or prefers-color-scheme. This allows you to see how your configuration responds to users who have high-contrast settings enabled at the OS level, ensuring your brand remains legible for everyone. Additionally, testing on actual mobile hardware is critical to ensure that "Theme Angular Material" colors remain vibrant and distinct under varying screen brightness levels and outdoor lighting conditions.

Hire Now!

Hire Angular Developers Today!

Ready to bring your web application vision to life? Start your journey with Zignuts expert Angular developers.

**Hire now**Hire Now**Hire Now**Hire now**Hire now

Hire now

Best Practices for Scaling a Theme Angular Material

As your project grows from a single dashboard to a multi-module enterprise suite, keeping your SASS organized is vital. We recommend creating a dedicated _theme-registry.scss file where all your palettes and theme objects reside. This allows you to import your theme into individual component styles whenever you need to reference a specific brand color using map.get(). By maintaining a single source of truth for your styles, you reduce the risk of "style drift" and make global rebranding efforts as simple as updating a few hex values in your configuration file.

To ensure your design system remains manageable as you scale, consider these industry-standard practices:

Modularize with SASS Partials:

Break your theming logic into smaller, functional partials such as _palettes.scss, _typography.scss, and _variables.scss. This prevents your main stylesheet from becoming a "wall of code" and allows developers to find and edit specific design tokens without sifting through hundreds of lines of configuration.

Leverage CSS Custom Properties (Variables):

While SASS variables are powerful at build time, using the Material 3 use-system-variables: true flag ensures that your theme is exported as native CSS variables. This is crucial for scaling because it allows non-Angular elements or third-party libraries to tap into your Theme Angular Material colors without needing to re-import SASS files, improving overall style consistency across different tech stacks.

Implement a Design Token Layer:

Instead of hardcoding theme values directly into your component styles, create a "semantic" layer. For example, instead of using $primary-500, use a token like $app-header-background. This abstraction means that if you decide the header should move from primary to secondary, you only update the token mapping rather than searching and replacing color values throughout your entire component library.

Utilize Theme Mixins for Shared Components:

For components used across multiple modules, create a custom mixin that accepts a theme object. This allows the component to be "theme-agnostic," meaning it can automatically adapt its colors and typography based on whichever Theme Angular Material configuration is currently active in its parent container.

Centralize Typography with Type Scales:

In a large-scale application, inconsistent font sizes can lead to a cluttered UI. Define a central type scale within your theme registry. By using the Material typography tokens, you ensure that every developer uses the same headline-large or body-medium definitions, maintaining a professional and unified information hierarchy across dozens of different modules.

Conclusion

In conclusion, the evolution of Material 3 has made the process of Theme Angular Material more robust and flexible than ever before. By moving toward a token-based architecture, developers can now achieve a perfect balance between global brand consistency and granular component customization. Implementing a scalable theme is no longer just about picking colors; it involves a strategic approach to SASS modularization, accessibility validation, and dynamic state management.

As applications grow in complexity, the technical nuances of managing deeply nested themes and design tokens can become challenging. If you are looking to build a high-performance, visually stunning enterprise application, you may want to Hire Angular Developers who specialize in creating sophisticated design systems. Expert developers ensure that your theming logic remains maintainable, accessible, and optimized for the latest framework updates. By following the best practices outlined in this guide, you can ensure your digital presence is both professional and user-centric.

Ready to elevate your project with a bespoke design system? Contact Zignuts today to see how our expert team can help you implement a cutting-edge Angular Material strategy tailored to your business needs.