Podemos usar paletas de temas personalizados en angular para definir nuestra propia paleta de colores. Y ese archivo de tema se puede usar en todos los componentes.
Acercarse:
En primer lugar, tenemos que crear nuestro propio archivo de tema y en eso, tenemos que incluir mat-core() Sass mixin e importar el archivo de tema desde material angular. Después de eso, debemos comenzar a construir nuestra paleta de colores y, por último, debemos incluir nuestro archivo de tema creado en «angular-material-theme». Después de esto, podemos usar nuestra paleta de colores personalizada importándola al archivo «styles.Scss» o directamente podemos importarla en cualquier componente.
Sintaxis:
@import '~@angular/material/theming'; @include mat-core(); //Available color palettes: https://material.io/design/color/ $[variable_name]-app-primary: mat-palette([defining color]); $[variable_name]-app-accent: mat-palette([defining colors]); $[variable_name]-app-warn: mat-palette([defining colors]); $[variable_name]-app-theme: mat-light-theme([primary color], [accent color], [warn color]); (or) $[variable_name]-app-theme: mat-dark-theme([primary color], [accent color], [warn color]); @include angular-material-theme($[variable_name]-app-theme);
Ejemplo:
@import '~@angular/material/theming'; @include mat-core(); /* ======== Angular material custom themes ======== */ $my-custom-primary: mat-palette($mat-deep-purple); $my-custom-accent: mat-palette($mat-pink, 100, 500, A100); $my-custom-warn: mat-palette($mat-lime); //Optional $my-custom-theme: mat-light-theme( $my-custom-primary, $my-custom-accent, $my-custom-warn); @include angular-material-theme($my-custom-theme);
Dentro de mat-palette, tenemos que definir valores relacionados con el brillo. El valor predeterminado es 500 (que es el verdadero tono del color de mi marca/color de acento). El resto son otros tonos de ese color (donde los números más bajos significan tonos más brillantes y los números más altos significan tonos más oscuros). Una vez más, un número más bajo significa más brillante y los números más altos significan más oscuro.
Ahora podemos crear una paleta de 2 maneras:
- luz
- oscuro
En el ejemplo anterior, usamos un tema ligero y luego incluimos un tema particular en «tema de material angular» .
<html> <mat-card class="my-alternate-theme"> My Themes: <button mat-raised-button color="primary">Primary</button> <button mat-raised-button color="accent">Accent</button> <button mat-raised-button color="warn">Warning</button> </mat-card> </html>
Salida: 
Referencia: https://material.angular.io/guide/theming
Publicación traducida automáticamente
Artículo escrito por dadimadhav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA