57 Best Advantages for Angular 5

Theming Your Custom App or Components - Angular 5/6

Theming Your Own Custom App or Components - Angular 5 and 6
Angular Material provide the ways to style your own app or components and the component's styles must be defined with Sass. After using the “@mixin” function to automatically apply a theme.

Why @mixin function?
The “@mixin” function is pre-defined Angular Material function. When you are change your existing theme, every components file that uses it will be automatically updated.

We can allow multiple themes within the app or component. This is the great advantages of Angular “@mixin” function.
Stayed Informed Angular 4 and Angular 5 Documents

How To Use @mixin function in your app or component?

You must have to call the @mixin function to apply the theme –
// Import a pre-built theme
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
// Import your custom input theme file so you can call the custom-input-theme function
@import 'app/candy-carousel/candy-carousel-theme.scss';

// Using the $theme variable from the pre-built theme you can call the theming function
@include candy-carousel-theme($theme);

Also you need is to create a @mixin function in the “custom-component-theme.scss” –
// Import all the tools needed to customize the theme and extract parts of it
@import '~@angular/material/theming';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin candy-carousel-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  // Use mat-color to extract individual colors from a palette as necessary.
  .candy-carousel {
    background-color: mat-color($primary);
    border-color: mat-color($accent, A400);

How To Use Colors in your app or component?
You can use the mat-color function to extract a specific color from a palette.

For example -
// Import theming functions
@import '~@angular/material/theming';

// Import your custom theme
@import 'src/unicorn-app-theme.scss';

// Use mat-color to extract individual colors from a palette as necessary.
.candy-carousel {
  background-color: mat-color($candy-app-primary);
  border-color: mat-color($candy-app-accent, A400);

I hope you are enjoying with this post! Please share with you friends!! Thank you!!!

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.