How to create angular material theme with multiple colors

Question

I am creating angular material theme. I was following this article to generate 3 colors theme which contains primary, accent and warn color, however my business scenario is expecting total 5 colors.

One way of which I have tried is to add color palettes in themes.scss and apply those colors to individual components but is there any better way or provision in angular material to configure such color palettes?

Below is a sample of my implementation.

@import 'src/theme.scss';
$color1: map-get($my-theme, color1);
button.level1 {
  background-color: mat-color($color1);
}
$color2: map-get($my-theme, color2);
button.level2 {
  background-color: mat-color($color2);
}

but with this approach I need to create a button like <button mat-button class="level1"></button> What I want is <button mat-button color="level4"></button> Can someone please help?

This medium article is one of the best references I've ever read. It covers all you need. — Felix Lemke
– Felix Lemke, Commented Apr 8, 2019 at 12:22

G. Tranter · Accepted Answer · 2019-04-08 14:25:32Z

2

On MatButton and other "CanColor" components, color is a directive and the only supported values are primary, accent, and warn. See https://github.com/angular/material2/blob/master/src/lib/core/common-behaviors/color.ts. Using class overrides is the only way around that. However, if you create your own custom button components, you can apply different themes and achieve more than three colors via the custom component's theming.

Here's an example of how to use multiple themes: Angular theme with more than 3 colors. In your case, you could have my-primary-button that wraps mat-button, plus my-alternate-button, my-special-button and so on. When you theme each of them, you would use a different custom theme, so that the primary and accent colors for each of the buttons is different. You may even be able to have only one palette that defines your colors using different indexes (50, 100, 200, ...) since you only need three when you create your themes.

Thinking further, you might be able to simplify your interface by creating your custom buttons with a common base tag selector modified by an attribute e.g. my-custom-button[main], my-custom-button[alternate], my-custom-button[special] etc.

answered Apr 8, 2019 at 14:25

G. Tranter

18k3 gold badges52 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahesh Over a year ago

Thanks for response. Probably this approach will be better than my current approach. Thank you.

Collectives™ on Stack Overflow

How to create angular material theme with multiple colors

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related