angularangular-materialangular-material2material3angular-theming

Custom colors for angular material components

I use angular material 18. In our app we use buttons with a log of different colors. How can I use colors which are not defined in our palettes? Let's say we have a green button for approving a document. My palettes don't include this green color. Should I define an extra palette for each custom color variant? If so, how I can apply them to the button? Or do I have to override css properties in the end? If I understand the docs correctly this is not suggested.

Solution

  • You can add different colours to your buttons without resorting to new themes. Add the following to your styles.scss.

    .approve {
    --mdc-filled-button-container-color: green;
}

    Now add a green button like so:

    <button mat-flat-button class="approve">Approve</button>

    Good luck with your project.