In this post, we’ll move from creating all our own styles in Sass to using Angular Material. It’s definitely a step toward quicker, more scalable Angular development.
As developers love to code and do everything by ourselves, we can sometimes forget the realities of a need for productivity, our overwhelming workload or to consider time to market. In our previous article, we built a pony theme from scratch using Sass—defining colors, creating mixins and integrating them all in a single theme and customizing our nice pony-button.
This approach makes us feel like craftspeople, building every part of the theme and styling. Maybe we relish having full control, but such control also comes with hidden costs like the maintenance of custom styles, verifying accessibility, creating every single functionality and, of course, handling theme scalability. This can be challenging because we must do everything ourselves!
Now, it’s time to save time and speed up productivity. Instead of creating every aspect of our components, like buttons or cards, we want to integrate our custom theme into powerful and ready components in a framework like Angular Material and align those components with our pony theme colors.
Well, Angular Material is a great mature and well-tested component framework. It’s free and comes with a list of powerful components (and it’s also accessibility-ready). So we don’t need to build components from scratch, when Angular Material comes with a theming API that allows us to customize styles using Sass-based theming, all while providing great Material Design Guidelines to keep UI consistent in our apps.
Spoiler: I found some challenges during the process, but it’s something I will let you discover for yourself.
The best way to learn and understand why to use Angular Material over theming with Sass is to learn by doing, so let’s implement our theme using Angular Material in our project and see how it works.
First, clone our existing project, ponies-world but instead of starting with the master branch, we start from the previous project state theme-with-sass branch. Run the command git clone --branch theme-with-sass --single-branch https://github.com/danywalls/ponies-world.git. It clones the project in the specific branch.
git clone --branch theme-with-sass --single-branch https://github.com/danywalls/ponies-world.git
Cloning into 'ponies-world'...
remote: Enumerating objects: 53, done.
remote: Counting objects: 100% (53/53), done.
remote: Compressing objects: 100% (47/47), done.
remote: Total 53 (delta 8), reused 0 (delta 0), pack-reused 0 (from 0)
Receiving objects: 100% (53/53), 132.88 KiB | 3.24 MiB/s, done.
Resolving deltas: 100% (8/8), done.
Next, move into the ponies-world directory. To be sure we are working in the same state, run git branch command—it must show the *theme-with-sass branch.
git branch
* theme-with-sass
Because we want to keep our theme-with-sass branch clean, create a new branch using git checkout -b move-to-material.
Perfect. In the next step, we’re going to install Angular Material! 🎨🖌️
Now it’s time to improve our UI using Angular Material. It has schematics to make it easy to configure our project. First, run the ng add @angular/material command in the terminal, which will prompt you with configuration options. In our case, we pick SCSS, set the default theme (we will override it later) and enable global typography and animations.
ng add @angular/material
The CLI will prompt you with configuration options. Select yes and pick your favorite theme (we’re going to change it to our pony theme anyway).
Once installed, we can start customizing the theme.
OK, but what did the schematic do? The schematic updated angular.json to register the prebuilt theme and add the Roboto font into index.html. All the changes are automatic for us, but when we start to use Material in our app, we’ll need to make small changes.
The power of Angular Material offers components and directives. To customize our existing pony-button, we need to use Material directives with it. So, open pony-button-component.ts and import the MatButtonModule, which gives us access to MatButton directive, making our buttons fancy with Material style.
import { Component, computed, input } from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
@Component({
selector: 'app-pony-button',
imports: [
MatButtonModule
],
templateUrl: './pony-button.component.html',
styleUrl: './pony-button.component.scss',
})
export class PonyButtonComponent {
label = input<string>('Accept');
Finally, open the pony-button.component.html, add mat-button directive to the button and save the changes. After that, run the app with ng serve, go to http://localhost:4200 and tada!! We have our buttons with the Material style!!!
Do you want to do powerful things with directives?
Mmmm … looks fine, but this is not the pony colors. So, how do we adapt Angular Material to match a bit closer to my pony colors ? It’s time to understand how Angular Material theming works!
Angular Material uses a Sass-based theming API that allows developers to define color palettes and override styles. The default theming system follows Material Design principles, with a primary color for the main branding color, accent color in highlights, a warning color for error states and a surface/background color for overall UI.
To apply our pony theme in Material, we need to use Sass in combination with the mat.theme mixin to help to customize the color, typography and density using design tokens and a color palette.
Let’s customize it. Open the _theme.scss file and import Angular Material theming with @use '@angular/material' as mat;. Set the color-scheme to light to see the colors for light. Using the mat alias, call the mat.theme() mixin and set the color with mat.$violet-palette and typography.
The final code looks like:
@use "colors";
@use "mixins";
@use '@angular/material' as mat;
html {
color-scheme: light;
@include mat.theme((
color: mat.$violet-palette,
typography: Roboto,
density: 0
));
}
Perfect! 🚀 Now, our buttons and (inputs, cards, etc.) will inherit our violet colors! But don’t we want to use _colors variables, like $primary-color: #ff69b4;?
Let’s try to change from mat.$violet-palette to colors.$primary-color.
@use "colors";
@use "mixins";
@use '@angular/material' as mat;
html {
color-scheme: light;
@include mat.theme((
color: colors.$primary-color,
typography: Roboto,
density: 0
));
}
Save changes and … oops! 🙃
We got an error because the theme expects a palette of colors. So that means I need to create a palette of colors? We are lucky, because the Material team created a schematic for us to make it easy to generate a palette based on our colors, so let’s create it!
We want to generate a new palette based on Angular Material using the schematics, if we go to the source code in the readme, it contains examples of how it works. Let’s start to play with it!
Open the terminal in the project folder and run the command ng generate @angular/material:theme-color. It will ask you about your colors to create primary, secondary, tertiary and more (we don’t need to set all of them), and it also enables high contrast.
In our case, we take the same colors from the scss/_colors.scss file—for example, primary and secondary colors. Not all of them are required in our case, so we’ll only set the primary and secondary. After that, it will store the new palette of colors with the name _theme-colors.scss.
The final step is to use our custom palette _theme-colors.scss in our theme. Open _theme.scss file and import custom-theme with an alias like pony-theme and set the color with our ponytheme.primary-palette.
The final code looks like:
@use '@angular/material' as mat;
@use 'theme-colors' as ponytheme;
html {
color-scheme: light;
@include mat.theme((
color: ponytheme.$primary-palette,
typography: Roboto,
density: 0
));
}
🛠️ Tip: If your Sass compiler can’t find
theme-colors, try adjusting the path to'.@use '../../_theme-colors' as ponytheme;'. This can happen depending on your folder structure and how your global styles are configured inangular.json.
Save changes and tada!!! We got our components with a pink pony palette!🥳💃
We learned how to create a custom theme using Angular Material, speeding up our development using Angular Material components and our colors. But, to be honest, while Material theming works, I ran into several challenges along the way. I don’t like that we must recompile the app to see any theme change, and with too much boilerplate it looks like we’ll have to write several Sass functions and configurations just to define a basic theme.
I was disappointed in the theming documentation because it lacks practical examples, making it hard to follow for real-world applications and it’s not beginner-friendly. In my opinion, the Material Theming API is complex, requiring knowledge of Sass and Material’s theming utilities, which isn’t reasonable for new developers.
As I said, we need provide solutions to help both developers and the company, so let’s try to find a more efficient way to theme an Angular app. Let’s try Kendo UI for Angular and Progress ThemeBuilder. This should bring some key features that can save work and time for my team—like the theme changing instantly in a UI editor, skipping the complex theming API and excellent documentation and support, making easier for teams to implement.
So, in the next post, we’ll explore Kendo UI and ThemeBuilder to simplify theming, eliminate boilerplate code and speed up UI development.
Source Code: https://github.com/danywalls/ponies-world/tree/move-to-material
Happy coding!
Do you want to go deep into the Material 3 Theme? I highly recommend an amazing video https://www.youtube.com/watch?v=kQUR2P4rGgM by https://x.com/GuacamoleAnkita and Alyssa Nicoll! 😊
Dany Paredes is a Google Developer Expert on Angular and Progress Champion. He loves sharing content and writing articles about Angular, TypeScript and testing on his blog and on Twitter (@danywalls).