Custom themes

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:

1. Create a new file under src called localcast-theme.scss
2. 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
3. Start by including the base theming library:

src/localcast-theme.scss
@import '~@angular/material/theming';

4. Import the mat-core() mixin, which includes all common styles used by various Material components:

src/localcast-theme.scss
@include mat-core();