Personaliza el estilo de Angular Material

1. Crea un nuevo fichero scss con el nombre de custom-theme.scss o el nombre que prefieras

2. Copia dentro del fichero que has creado el contenido de https://material.angular.io/guide/theming

   El siguiente ejemplo de código es para la versión 9.2.4 de Material

     1 @import '@angular/material/theming';
     2 // Be sure that you only ever include this mixin once!
     3 @include mat-core();
     4 $candy-app-primary: mat-palette($mat-indigo);
     5 $candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
     6 $candy-app-warn: mat-palette($mat-red);
     7 $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
     8 @include angular-material-theme($candy-app-theme);
     

   Precaución: revisar la versión de Material que estás usando y seleccionar la misma versión en la web de Material al buscar la plantilla. A mí me hizo perder en una ocasión varias horas ❗❗❗❗❗

   
   
3. Añade la ruta de este nuevo fichero scss a los styles del fichero angular.json
4. Comenta el tema que tengas definido (si tienes alguno) del styles.css (si no, dará avisos y errores de budget)

5. Ahora vamos a editar los colores del tema, cambia el indigo de la línea 4 por el color que quieras, seguido del número de color elegido.

   Te recomiendo que uses las paletas de colores que hay en https://material.io/design/color/, ya que esta paleta ha sida diseñada para que exista un buen contraste entre las fuentes y los fondos y sea más legible

   Por ejemplo, si quisieras el color primario rojo oscuro pues la línea 4 sería $candy-app-primary: mat-palette($mat-red, 900); Proceder con el resto de colores (accent y warn) de forma análoga

Un ejemplo terminado con el color primary en verde oscuro, el accent en naranja oscuro y el warn en rojo oscuro sería:

  1 @import '~@angular/material/theming';        
  2 // Be sure that you only ever include this mixin once!
  3 @include mat-core();
  4 $candy-app-primary: mat-palette($mat-green, 900);        
  5 $candy-app-accent: mat-palette($mat-orange, 900);
  6 $candy-app-warn: mat-palette($mat-red, 900);
  7 $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
  8 @include angular-material-theme($candy-app-theme);
  

Hasta luego 🖖