¿Cómo usar paletas de temas personalizados en Angular?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *