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();

mat-core() contains the necessary scss functions to be able to inject your custom colors into Material, such as mat-palette, mat-light-theme, and mat-dark-theme.

At a minimum, we must define a new primary and an accent color. Defining new colors, however, is not a straightforward process. Material requires a palette to be defined, mat-palette, which needs to be seeded by a complicated color object that can't just be overridden by a simple hex value such as #BFB900.

To pick your colors, you may use the Material Design Color Tool, located at https://material.io/color. Here's a screenshot of the tool:

5. Using Material Palette, select a Primary and a Secondary color:
   • My primary selection is red with a hue value of 500
   • My secondary selection is indigo with a hue value of A400
6. Observe how your selections would apply to a material design app by going through the 6 prebuilt screen on the left
7. Evaluate the accessibility implications of your selections, as shown:

The interface for mat-palette looks like this:

mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700)

8. Define the primary and secondary mat-palette objects using the default hue from the tool:

src/localcast-theme.scss
$localcast-primary: mat-palette($mat-red, 500);
$localcast-accent: mat-palette($mat-indigo, A400);

9. Create a new theme and apply it:

src/localcast-theme.scss
$localcast-app-theme: mat-light-theme($localcast-primary, $localcast-accent);

@include angular-material-theme($localcast-app-theme);

10. In angular.json, locate the apps.styles attribute
11. Prepend the list with localcast-theme.scss while removing the styles.input attribute

angular.json
...      
"styles": [
  "src/localcast-theme.scss",
  "src/styles.css"
],
...

You may also choose to eliminate styles.css and merge its contents with localcast-theme.scss or convert styles.css to a sass file by simply renaming it to styles.scss. If you do this, don't forget to update angular.json.

Your application should now look like this:

We can now move the UX task to the done column: