As we previously discussed, Material ships with some default themes like deeppurple-amber, indigo-pink, pink-bluegrey, and purple-green. However, your company or product may have its own color scheme. For this, you can create a custom theme that change the look of your application.
In order to create a new theme, you must implement a new scss file:
- Create a new file under src called localcast-theme.scss
- Material theme guide, located at https://material.angular.io/guide/theming, includes an up-to-date starting file. I'll break down the contents of the file further
- Start by including the base theming library:
src/localcast-theme.scss
@import '~@angular/material/theming';
- Import the mat-core() mixin, which includes all common styles used by various Material components:
src/localcast-theme.scss
@include mat-core();
mat-core() should only be included...