How to theme Angular Material components
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Creating branded Angular applications requires customizing Material Design components to match your company’s color palette and design system. With over 12 years of Angular experience since 2014 and as the creator of CoreUI, I’ve implemented custom themes for numerous enterprise applications. Angular Material provides a comprehensive theming system based on SCSS that allows you to define primary, accent, and warn color palettes. The approach involves creating a custom theme file and importing it into your application’s main stylesheet.
Create a custom theme file and define color palettes using Angular Material’s theming API.
Create src/custom-theme.scss:
@use '@angular/material' as mat;
@include mat.core();
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$red-palette);
$my-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
warn: $my-warn,
)
));
@include mat.all-component-themes($my-theme);
Import in src/styles.scss:
@import './custom-theme.scss';
Best Practice Note
The define-palette function accepts Material Design color palettes and optional hue values for default, lighter, and darker shades. For dark themes, use define-dark-theme instead of define-light-theme. You can create multiple themes and switch between them dynamically by applying CSS classes. To reduce bundle size, import only the component themes you use instead of all-component-themes. This is how we approach theming in CoreUI for Angular—providing pre-built themes while allowing full customization through SCSS variables.
