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”.
- Difference between bootstrap.css and bootstrap-theme.css
- Routing in Angular JS using Angular UI Router
- Angular CLI | Angular Project Setup
- Angular 7 | Angular Data Services using Observable
- Adding Angular Material Component to Angular Application
- Difference between Angular 4 and Angular 5
- How to use jQuery in Angular ?
- How to use bootstrap 4 in angular 2?
- What is the use of Angular 2 hashtags in template ?
- How to use mat-icon in angular?
- How to use SCSS mixins with angular 7?
- How to change the font of HTML5 Canvas using a button in Angular.js?
- Angular-JS ng-repeat Directive
- How ajax works? Difference between angular js and jquery
- AngularJS | angular.isObject() Function
- AngularJS | angular.isUndefined() Function
- AngularJS | angular.isNumber() Function
- AngularJS | angular.isString() Function
- AngularJS | angular.isDefined() Function
- AngularJS | angular.isDate() Function
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.