python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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 '[email protected]/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 '[email protected]/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 '[email protected]/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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions