DEV Community

Cover image for Modify colors of Angular Material Button
Dharmen Shah for Angular Material Dev

Posted on

9

Modify colors of Angular Material Button

Struggling with changing colors of angular material buttons?

Not anymore! Read on...

Let’s assume that you have added Angular Material in your project and selected a pre-built theme to use.

We will create a custom-theme, which should get applied only when it’s inside .custom-theme class.

@use "@angular/material" as mat;

$custom-primary: mat.define-palette(mat.$pink-palette, 700, 500, 900);
$custom-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);

$custom-theme: mat.define-dark-theme(
  (
    color: (
      primary: $custom-primary,
      accent: $custom-accent,
    ),
  )
);

.custom-theme {
  @include mat.button-theme($custom-theme);
}
Enter fullscreen mode Exit fullscreen mode

Note that we have only included button-theme, because in our demo we only use that component. You can also use all-component-theme mixin to add all components’ themes, but it will increase the size of the final output style.

So, now with the above code, if in the HTML code, we simply wrap the buttons in custom-theme class, it will apply custom-theme to components inside it. Let’s look at the output:

output

That's a wrap!

For more details, read full article at:

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay