Ask Your Question

How can Angular Material themes be generated using a map that holds the corresponding keys?

asked 2022-03-30 11:00:00 +0000

lalupa gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted

answered 2021-07-19 20:00:00 +0000

david gravatar image

Angular Material themes can be generated using a map that holds the corresponding keys by following these steps:

  1. Create a new map that holds the corresponding keys for the desired theme. For example:
const myTheme = {
  primary: "#e91e63",
  accent: "#9c27b0",
  warn: "#f44336"
  1. Inject the MatThemeService in the component where you want to apply the theme.
import { MatThemeService } from '@angular/material';

constructor(private matThemeService: MatThemeService) {}
  1. Use the defineTheme() method of the MatThemeService to define the desired theme. The first parameter should be the name of the theme, and the second parameter should be the map holding the corresponding keys.
this.matThemeService.defineTheme('my-theme', myTheme);
  1. Use the useTheme() method of the MatThemeService to set the defined theme as the active theme.
  1. The theme can now be applied to components by using the corresponding Material design classes, such as mat-primary or mat-accent.
<button mat-raised-button color="primary">Primary</button>
edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer

Question Tools


Asked: 2022-03-30 11:00:00 +0000

Seen: 2 times

Last updated: Jul 19 '21