¿Cómo cambiar el color de fuente de la paleta primaria en Angular Material2?

Indagamos en diferentes espacios para así mostrarte la solución para tu inquietud, en caso de preguntas déjanos tu inquietud y te contestamos con mucho gusto.

Solución:

Puede cambiar el color del tema predeterminado creando su propio mapa de primer plano y combinándolo con el tema creado antes de inicializarlo. Aquí es cómo:

1. Cree el objeto del tema como de costumbre.

    @import '@angular/material/theming.scss';
    @include mat-core();
   
    // Choose colors
    $my-app-primary: mat-palette($mat-blue-grey);
    $my-app-accent:  mat-palette($mat-light-green);
    $my-app-warn:    mat-palette($mat-red);
   
    // Build theme object (its practically a map object)
    $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
   

2. Cree su primer plano personalizado utilizando una función personalizada que devuelve un mapa de primer plano como se define en @angular/material/_theming.scss -> $mat-light-theme-foreground función.
   Puedes jugar con el mapa y definir solo los campos que quieras y dejar los demás como predeterminados.

    @function my-mat-light-theme-foreground($color) 
        @return (
            base:              $color,
            divider:           $black-12-opacity,
            dividers:          $black-12-opacity,
            disabled:          rgba($color, 0.38),
            disabled-button:   rgba($color, 0.38),
            disabled-text:     rgba($color, 0.38),
            hint-text:         rgba($color, 0.38),
            secondary-text:    rgba($color, 0.54),
            icon:              rgba($color, 0.54),
            icons:             rgba($color, 0.54),
            text:              rgba($color, 0.87),
            slider-min:        rgba($color, 0.87),
            slider-off:        rgba($color, 0.26),
            slider-off-active: rgba($color, 0.38),
        );
    ;
   
    // You can put any color here. I've chosen mat-color($my-app-primary, 700)
    $my-foreground: my-mat-light-theme-foreground(mat-color($my-app-primary, 700));
   

3. Combine el tema creado anteriormente con solo el mapa de primer plano e inicialice su tema personalizado.
   Nota: Dado que todos los mapas en SCSS son inmutables, el map-merge() devuelve una nueva instancia de mapa y NO modifica el mapa en su lugar; por lo tanto, tenemos otra variable $my-app-theme-custom para mantener el tema del resultado.

    $my-app-theme-custom: map-merge($my-app-theme, (foreground: $my-foreground));
   
    // Include your custom theme.
    @include angular-material-theme($my-app-theme-custom);
   

Nota: Estoy usando Material angular v2.0.0-beta.8

EDITAR octubre de 2020: – He añadido la propiedad slider-min al mapa ya que un par de personas en los comentarios informaron que se agregó en el mapa de primer plano en versiones posteriores.

La guía está disponible en el sitio web de documentación que se encuentra aquí.

Primero, define las paletas para su tema, como $primary, $accent, $warn (en la guia que tienen $candy-app- prefix) y luego crea un $theme objeto:

// Create the theme object (a Sass map containing all of the palettes).
$theme: mat-light-theme($primary, $accent, $warn);

Una vez que tenemos un tema que contiene todas las paletas, podemos obtener una paleta de primer plano a partir de él:

$foreground: map-get($theme, foreground);

Desde $foreground paleta podemos obtener cualquier valor basado en un keycomo

secondary-text: rgba(black, 0.54),

o

text: rgba(black, 0.87)

Aquí está el código para recuperar el secondary-text propiedad:

color: mat-color($foreground, secondary-text);

me cambié a 2.0.0-beta.3 desde 2.0.0-beta.2 y la estructura de carpetas se ve diferente, tienes razón. Esto es ahora node_modules@angularmaterial_theming.scss, _palette.scssel archivo se ha ido. Sin embargo, puede realizar una búsqueda global: ‘$mat-dark-theme-background: (‘

_theming.scss tiene todos los colores, mapas y todas las funciones, como mat-color

Si conservas alguna incertidumbre y capacidad de avanzar nuestro reseña puedes realizar una anotación y con gusto lo leeremos.

---

---

Utiliza Nuestro Buscador