We can use custom theme palettes in angular to define our own color palette. And that theme file can be used throughout all components.
Firstly, we have to create our own theme file and in that, we have to include mat-core() Sass mixin and import theming file from angular material. After that, we have to start building our color palette and at last, we have to include our created theme file in “angular-material-theme”. After this, we can use our custom color palette by import it into “styles.Scss” file or directly we can import in any component.
@import '~@angular/material/theming'; @include mat-core(); //Available color palettes: https://material.io/design/color/ $[variable_name]-app-primary: mat-palette([defining color]); $[variable_name]-app-accent: mat-palette([defining colors]); $[variable_name]-app-warn: mat-palette([defining colors]); $[variable_name]-app-theme: mat-light-theme([primary color], [accent color], [warn color]); (or) $[variable_name]-app-theme: mat-dark-theme([primary color], [accent color], [warn color]); @include angular-material-theme($[variable_name]-app-theme);
Inside mat-palette, we have to define values related to brightness. The default is 500 (which is the true shade of my brand color/accent color). The rest are other shades of that color (where lower numbers mean brighter shades and higher numbers mean darker shades). Again, a lower number means brighter and higher numbers mean darker.
Now we can create a palette by 2 ways:
In the above example, we used a light theme, and then we are including particular theme in “angular-material-theme”.
- Adding Angular Material Component to Angular Application
- Angular 7 | Angular Data Services using Observable
- Angular CLI | Angular Project Setup
- Routing in Angular JS using Angular UI Router
- Difference between Angular 4 and Angular 5
- Difference between bootstrap.css and bootstrap-theme.css
- Angular 7 | Observables
- How to use bootstrap 4 in angular 2?
- How to use jQuery in Angular ?
- Angular 7 | Introduction
- Angular 7 | Installation
- Angular 7 | Architecture
- Angular 4 | Introduction
- Angular 7 | Directives
- Angular 7 | Components
- How to use mat-icon in angular?
- Angular 8 | Introduction
- Difference between React.js and Angular.js
- Difference between Angular 4 and ReactJS
- Difference between Angular 2 and ReactJS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.