How to change the Angular material theme in just 5 minutes
it’s very easy to create a custom angular material theme. This will allow you to specify primary, accent and warning colors that will be used on Angular Material components.
angular material url : https://material.angular.io/
Material ui color : https://material-ui.com/customization/color/
Your custom theme will be a Sass file and in our case, we’ll call it theme.scss and place it in our app’s /src folder.
Don’t worry if you don’t use Sass for your the rest of your app. If you’re using the Angular CLI, you can simply add your Sass file to the list of styles in the angular.json configuration file and the Angular CLI will take care of compiling the CSS file
```
"styles": [
"styles.css",
"theme.scss"
],
```
In the theme file, you’ll want to first import the main theming Sass file from Angular Material and include the base styles
theme.scss
```
@import "../node_modules/@angular/material/theming";
@include mat-core();
```
Next, you’ll declare variables for your primary, accent and warning colors using the mat-palette function.
mat-palette takes a color name as its first argument, and the remaining optional second, third and fourth arguments define a default value, a lighter value and a darker value. The color names and values themselves are taken from the official Material Design color guidelines
theme.scss
```
$my-primary: mat-palette($mat-teal);
$my-accent: mat-palette($mat-pink);
$my-warn: mat-palette($mat-deep-orange);
$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);
@include angular-material-theme($my-theme);
```
We finalize by creating a $my-app-theme variable that combines our color definitions with the mat-light-theme or mat-light-theme function, and finally, include the result of calling the angular-material-theme function with our $my-theme.
The warning color is optional and will default to red if none is provided.
theme.scss
```
@import "../node_modules/@angular/material/theming";
@include mat-core();
$my-primary: mat-palette($mat-teal, 800);
$my-accent: mat-palette($mat-light-green, 800);
$my-theme: mat-light-theme($my-primary, $my-accent);
@include angular-material-theme($my-theme);
.alternative {
$my-primary: mat-palette($mat-amber, 800);
$my-accent: mat-palette($mat-light-green, 800);
$my-theme: mat-light-theme($my-primary, $my-accent);
@include angular-material-theme($my-theme);
}
```
@DesignCourse
Видео How to change the Angular material theme in just 5 minutes канала Technical Babaji
angular material url : https://material.angular.io/
Material ui color : https://material-ui.com/customization/color/
Your custom theme will be a Sass file and in our case, we’ll call it theme.scss and place it in our app’s /src folder.
Don’t worry if you don’t use Sass for your the rest of your app. If you’re using the Angular CLI, you can simply add your Sass file to the list of styles in the angular.json configuration file and the Angular CLI will take care of compiling the CSS file
```
"styles": [
"styles.css",
"theme.scss"
],
```
In the theme file, you’ll want to first import the main theming Sass file from Angular Material and include the base styles
theme.scss
```
@import "../node_modules/@angular/material/theming";
@include mat-core();
```
Next, you’ll declare variables for your primary, accent and warning colors using the mat-palette function.
mat-palette takes a color name as its first argument, and the remaining optional second, third and fourth arguments define a default value, a lighter value and a darker value. The color names and values themselves are taken from the official Material Design color guidelines
theme.scss
```
$my-primary: mat-palette($mat-teal);
$my-accent: mat-palette($mat-pink);
$my-warn: mat-palette($mat-deep-orange);
$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);
@include angular-material-theme($my-theme);
```
We finalize by creating a $my-app-theme variable that combines our color definitions with the mat-light-theme or mat-light-theme function, and finally, include the result of calling the angular-material-theme function with our $my-theme.
The warning color is optional and will default to red if none is provided.
theme.scss
```
@import "../node_modules/@angular/material/theming";
@include mat-core();
$my-primary: mat-palette($mat-teal, 800);
$my-accent: mat-palette($mat-light-green, 800);
$my-theme: mat-light-theme($my-primary, $my-accent);
@include angular-material-theme($my-theme);
.alternative {
$my-primary: mat-palette($mat-amber, 800);
$my-accent: mat-palette($mat-light-green, 800);
$my-theme: mat-light-theme($my-primary, $my-accent);
@include angular-material-theme($my-theme);
}
```
@DesignCourse
Видео How to change the Angular material theme in just 5 minutes канала Technical Babaji
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Angular Material Custom Theme Tutorial](https://i.ytimg.com/vi/EBnTZwr0RSs/default.jpg)
![Angular Login App with JWT token authentication | Angular crud application #2](https://i.ytimg.com/vi/BZ_91HKzNDM/default.jpg)
![](https://i.ytimg.com/vi/ZWbpgFkoINc/default.jpg)
![Angular 9 Flex Layout Getting started with FxLayout and Angular Material](https://i.ytimg.com/vi/iWYP3NtKQjs/default.jpg)
![Theming Angular UI | Light & Dark Mode Switching | Angular Material Theme](https://i.ytimg.com/vi/r6Ygw9L55zg/default.jpg)
![How Much Money Does My Small 9,000 Subscriber YouTube Channel Make?](https://i.ytimg.com/vi/VmI1vSAoFNw/default.jpg)
![Angular Material Theming, with Fx-Layout, Sass, and color service](https://i.ytimg.com/vi/V3WiBs-igaY/default.jpg)
![Dark theme switching with Angular Material (2020)](https://i.ytimg.com/vi/sM3ATKt8568/default.jpg)
![Angular 12 2021 | Routing | LazyLoading | AuthGuard | multiple router-outlet | all in one video](https://i.ytimg.com/vi/ibn2yAomxp8/default.jpg)
![Learn Angular Material - Full Tutorial](https://i.ytimg.com/vi/jUfEn032IL8/default.jpg)
![Switching out Themes in your Angular Material App](https://i.ytimg.com/vi/f-kUmbmBVLo/default.jpg)
![How to make your own VS Code theme!](https://i.ytimg.com/vi/pGzssFNtWXw/default.jpg)
![Angular login page | Material Design with Flex-Layout | Angular crud application #1](https://i.ytimg.com/vi/f3shwARuhEM/default.jpg)
![🔴 Complete SASS & SCSS Tutorial for Beginners in Hindi in 2020](https://i.ytimg.com/vi/tEQOdFgUXI4/default.jpg)
![SSR (Server Side Rendering) angular. Angular universal. Основы настройки SSR](https://i.ytimg.com/vi/9CnlDfoufOc/default.jpg)
![How to reuse /share subforms or controls across multiple Reactive Forms in Angular](https://i.ytimg.com/vi/grZRA0cIDcg/default.jpg)
![Add to Cart in Angular | Angular 12 Tutorial | Flipkart UI | Shopping Cart in Angular | E-commerce](https://i.ytimg.com/vi/855KrFfF9-w/default.jpg)
![Theming in Angular Material in Hindi | #ngMaterial | Uxtrendz (2021) [#8]](https://i.ytimg.com/vi/4q7FL8ACEKE/default.jpg)
![Personalizar Themes en Angular Material](https://i.ytimg.com/vi/lQOgGVZtDHw/default.jpg)
![Reactive Forms in Angular 10 : Angular 10 Full Tutorial in Hindi](https://i.ytimg.com/vi/OONXFoVyfcU/default.jpg)