Cómo crear un tema de color personalizado con materiales angulares5 y angulares

Solución:

Para usar una paleta hexadecimal personalizada para un material angular, deberá definir los diferentes tonos, así como los colores de contraste para la paleta, incluso si solo desea un color. Sugeriría usar al menos 3 colores (claro, normal, oscuro) para que funcione impecablemente con las animaciones integradas de Material:

// below defines your custom color to build a theme palette from
$my-blue: (
  50: #7fdddd,
  100: #7faedd,
  200: #7f7fdd,
  300: #7faedd,
  400: #7faedd,
  500: #7faedd,
  600: #7faedd,
  700: #7faedd,
  800: #7faedd,
  900: #7faedd,
  A100: #7faedd,
  A200: #7faedd,
  A400: #7faedd,
  A700: #7faedd,
  contrast: (
    50: white,
    100: white,
    200: white,
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: white,
    A200: white,
    A400: white,
    A700: white,
  )
);
// below creates a primary palette with three shades of blue
$my-primary: mat-palette($my-blue, 100, 50, 200);

como sugirió Z. Bagley, haga su propia paleta, pero creo que no es necesario convertir todos esos colores en una paleta. Por ejemplo, esto funciona bien.

$custom-collection: (
    warning :  #FFC116,
    success :  #0a630f,
    danger:    #c00000,
    contrast: (
        warning :  #000000,
        success :  #FFFFFF,
        danger:    #FFFFFF,
    )
);

Luego haces la paleta como se sugiere.

$my-app-custom: mat-palette($custom-collection, custom);

Luego combínelo con el tema después de la fila mat-light-theme de esta manera

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
$my-app-theme: map_merge($my-app-theme, (custom: $my-app-custom));

Después de esto, tiene un objeto donde se encuentran todos los colores.

Y puedo sugerirle que cree un objeto personalizado general para esto como este

$custom: map-get($my-app-theme, custom);

Entonces puedes usarlo en tu componente de esta manera

background-color: mat-color($custom, validation-invalid);
color: mat-color($custom, validation-invalid-contrast);

Y una sugerencia más. Puede agregar mat-success a su archivo de estilo global

.mat-success {
  background-color: mat-color($custom, success);
  color: mat-color($custom, success-contrast);
}

Ahora puede usar el atributo de color como con los colores primarios y de acento.

<button mat-flat-button color="success" >Success</button>

Esto funciona porque la directiva de color agrega mat – * – class al elemento donde * es el valor del color. Entonces color = “foo” genera el elemento correspondiente.

---

---

Utiliza Nuestro Buscador