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';
  1. Import the mat-core() mixin, which includes all common ...

Get Angular 6 for Enterprise-Ready Web Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.