Personaliza el estilo de Angular Material

En este artículo te explicaré cómo cambiar los colores predeterminados de un tema de Angular Material e incluso definir un tema personalizado

07.11.2020 a las 12:03

Personaliza el estilo de Angular Material

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 🖖

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.1.2