schematic(theme): inject a palette definition for customization

[Splaktar]

Feature Description

Currently, users need to dig into node_modules/@angular/material/_theming.scss and find a palette like $mat-blue and then manually copy that into their styles.scss and modify it in order to create a custom palette.

This used to be easier in AngularJS Material where you could just extend an existing theme and make minor modifications.

Use Case

1. The most common case that I have seen is that developers want to tweak the contrast colors of a specific theme.
2. However, it is also common to need to change just 1 or 2 colors, in an existing palette, slightly to match company branding.
3. In some cases, there is a need to create a completely custom palette, or set of palettes, for use in an application with highly custom theming.

Proposal

ng g @angular/material:palette --base=mat-blue --path=src/styles.scss my-blue

This would inject the following into src/styles.scss immediately after @include mat-core();:

$my-blue: (
  50: #e3f2fd,
  100: #bbdefb,
  200: #90caf9,
  300: #64b5f6,
  400: #42a5f5,
  500: #2196f3,
  600: #1e88e5,
  700: #1976d2,
  800: #1565c0,
  900: #0d47a1,
  A100: #82b1ff,
  A200: #448aff,
  A400: #2979ff,
  A700: #2962ff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

It would still be up to the developer to actually use the palette in defining a theme (i.e. $app-primary: mat-palette($my-blue);).

Relates to #16416.
Related Custom theming Docs.

[devversion]

I think this might be also related to #13265