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!!!