Angular Angular Material 3: How to Generate and Apply a Custom Color Palette

For a new project at work, I recently decided to explore different front-end frameworks. I settled on Angular, using a starter kit that included Tailwind CSS. To speed up development, I also added Angular Material 3 to benefit from its pre-built components, things like toggle buttons and side menus are just easier when you don't have to build them from scratch.

Since I am quite comfortable with Tailwind CSS, I assumed customization would be a breeze. However, I am new to the Angular ecosystem and Material 3, and I face issues almost immediately regarding theming.

The Problem: Pre-built Palettes Are Limited

At setup time, I selected the standard Azure color palette. It looked decent enough for the toggle buttons initially, but as the UI evolved, I needed to change the color to match the specific primary color we were using for the rest of the project.

This turned out to be less straightforward than I expected.

I learned that Angular Material comes with several pre-built palettes, such as:

• red-palette
• blue-palette
• azure-palette
• violet-palette
• ...and about eight others.

While these cover the basics, none of them matched my specific branding needs. I needed a custom palette, not a generic preset.

The Solution: The Theme Generator

Digging deeper into the official documentation, I discovered that Angular provides a CLI tool to generate a custom palette based on your specific hex codes.

You can run the following command:

ng generate @angular/material:theme-color

This interactive tool asks you to define your primary, secondary, and neutral colors. Once finished, it produces a CSS (or SCSS) file with your generated theme variables.

The Missing Piece: How to Use It?

Here is where I got stuck. The tool generates the file—let's call it custom.css—but the documentation wasn't immediately clear on how to actually apply this new file to the project, specifically regarding where it fits into the existing material-theme.scss.

After some trial and error, I found the solution. You need to explicitly import your new custom styles into your main theme file.

1. Import the custom file Open your material-theme.scss file and add the use rule pointing to your generated file:

@use './app/styles/custom.css';

2. Disable the pre-built theme This is the crucial step. If you simply import your custom CSS, it might conflict with or be overridden by the default configuration you set up during installation.

You must comment out or remove the existing @include mat.theme block that references the old palette (like $azure-palette).

It should look something like this:

// html {
//   height: 100%;
//   @include mat.theme((
//     color: (
//       primary: mat.$azure-palette,
//       tertiary: mat.$azure-palette,
//     ),
//     typography: Roboto,
//     density: 0,
//   ));
// }

By removing the default theme inclusion and importing your generated custom.css, Angular Material will now respect the specific color definitions you generated via the CLI.

Note

You might notice that the hex color provided and the one set as primary color in the generated theme file are different. The tone changes slightly. If that's something which bothers you and you need the exact hex color as your primary color in the theme, then you can update the "primary palette" from the generated CSS file accordingly.

  /* Primary palette variables */
  --mat-sys-primary: light-dark(#5D688A, #bac3ff);
  --mat-sys-on-primary: light-dark(#ffffff, #1e2b68);
  --mat-sys-primary-container: light-dark(#dee1ff, #364280);
  --mat-sys-on-primary-container: light-dark(#051352, #dee1ff);
  --mat-sys-inverse-primary: light-dark(#bac3ff, #4e5a99);
  --mat-sys-primary-fixed: light-dark(#dee1ff, #dee1ff);
  --mat-sys-primary-fixed-dim: light-dark(#bac3ff, #bac3ff);
  --mat-sys-on-primary-fixed: light-dark(#051352, #051352);
  --mat-sys-on-primary-fixed-variant: light-dark(#364280, #364280);