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

    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.ng-template.

    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:

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría