navigationend - title angular 6

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

Question

Quiero usar los colores de la marca de mi empresa en toda la aplicación.

Encontré este problema: AngularJS 2 - Diseño de materiales: establezca una paleta de colores donde pueda construir un tema supuestamente personalizado , pero básicamente solo usa diferentes partes de paletas preconstruidas. No quiero usar los colores predefinidos de Material2. Quiero mis colores de marca únicos y especiales. ¿Hay una mejor manera (¿más correcta?) De crear mi propio tema, que simplemente hackear con _palette.scss ?

¿Necesito hacer un mixin para la paleta de mi marca? Si es así, ¿alguna guía sobre cómo hacerlo correctamente? ¿Cuáles son los significados de los diferentes tonos de colores (marcados con números como: 50, 100, 200, A100, A200 ...)?

¡Cualquier información sobre esta área será muy apreciada!

Answer 1

Después de algunas investigaciones, terminé con esta conclusión que me resolvió, espero que también te ayude.

Paso 1: Crea tus propias paletas a partir de colores de marca.

Encontré este increíble sitio web donde ingresa el color de su marca, y crea una paleta completa con los diferentes tonos de ese color de marca: http://mcg.mbitson.com

Utilicé esta herramienta tanto para mi color primary (que es el color de mi marca) como para el color de accent .

Paso 2: crea paletas en tu archivo de tema personalizado

Aquí hay una guía sobre cómo crear dicho archivo .scss : https://github.com/angular/material2/blob/master/guides/theming.md

@import ''~@angular/material/theming'';

// Be sure that you only ever include ''mat-core'' mixin once!
// it should not be included for each theme.
@include mat-core(); 

// define a real custom palette (using http://mcg.mbitson.com)
$bv-brand: (
    50: #ffffff,
    100: #dde6f3,
    200: #b4c9e4,
    300: #7fa3d1,
    400: #6992c9,
    500: #5282c1,
    600: #4072b4,
    700: #38649d,
    800: #305687,
    900: #284770,
    A100: #ffffff,
    A200: #dde6f3,
    A400: #6992c9,
    A700: #38649d,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);

$bv-orange: (
    50: #ffffff,
    100: #fff7f4,
    200: #fecdbd,
    300: #fc9977,
    400: #fc8259,
    500: #fb6c3b,
    600: #fa551d,
    700: #f44205,
    800: #d63a04,
    900: #b83204,
    A100: #ffffff,
    A200: #fff7f4,
    A400: #fc8259,
    A700: #f44205,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);

// mandatory stuff for theming
$bv-palette-primary: mat-palette($bv-brand);
$bv-palette-accent:  mat-palette($bv-orange);

// include the custom theme components into a theme object
$bv-theme: mat-light-theme($bv-palette-primary, $bv-palette-accent);

// include the custom theme object into the angular material theme
@include angular-material-theme($bv-theme);

Alguna explicación sobre el código anterior

Los números en el lado izquierdo establecen el "nivel" de brillo. El valor predeterminado es 500 (que es el tono verdadero del color de mi marca / color de acento). Entonces, en este ejemplo, el color de mi marca es #5282c1 . 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). Los AXXX son diferentes tonos. No estoy seguro (todavía) de dónde están en uso. Una vez más, un número más bajo significa más brillante y un número más alto significa más oscuro.

El contrast establece el color de la fuente sobre esos colores de fondo. Es muy difícil (o incluso imposible) calcular mediante CSS donde la fuente debe ser brillante (blanca) u oscura (negra con 0,87 de opacidad), por lo que es fácil de leer incluso para personas daltónicas. Por lo tanto, esto se configura manualmente y está codificado en la definición de la paleta. Obtendrá esto también del generador de paleta que vinculé anteriormente (aunque se emite en el antiguo formato Material1, y tendrá que convertirlo manualmente al formato Material2 como publiqué aquí).

Establezca el tema para usar la paleta de colores de la marca como color primary , y lo que tenga para el acento como color de accent .

Paso 3: usa el tema en toda la aplicación siempre que puedas

Algunos elementos pueden tomar los colores del tema, como <md-toolbar> , <md-input> , <md-button> , <md-select> y así sucesivamente. Utilizarán el primary por defecto, así que asegúrese de establecer la paleta de colores de la marca como primaria. Si desea cambiar el color, use la directiva de color (¿es una directiva angular?).

Por ejemplo:

<button mat-raised-button color="accent" type="submit">Login</button>