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

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

Encontré este problema: AngularJS 2 - Diseño de materiales - establecer la paleta de colores donde puedo crear un tema supuestamente personalizado , pero básicamente solo usa diferentes partes de paletas preconstruidas. No quiero usar los colores predefinidos de Material2. Quiero los colores de mi marca únicos y especiales. ¿Hay una manera mejor (¿más correcta?) De crear mi propio tema, que simplemente hackear _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!

Después de investigar un poco, terminé con esta conclusión que me resolvió, espero que también te ayude.

Paso 1: cree sus 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

Usé esta herramienta tanto para mi primarycolor (que es el color de mi marca) como para el accentcolor.

Paso 2: cree paletas en su archivo de tema personalizado

aquí hay una guía sobre cómo crear dicho .scssarchivo: 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 del lado izquierdo establecen el "nivel" de brillo. El valor predeterminado es 500 (que es el verdadero tono 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). El AXXXson diferentes tonos. No estoy seguro (todavía) de dónde están en uso. Nuevamente, un número más bajo significa más brillante y números más altos significa más oscuro.

El contrastestablece el color de la fuente sobre los colores de fondo. Es muy difícil (o incluso imposible) calcular a través de CSS dónde la fuente debe ser brillante (blanca) u oscura (negra con opacidad de 0.87) para que sea fácilmente legible incluso para personas daltónicas. Por lo tanto, esto se establece manualmente y se codifica en la definición de paleta. También obtiene esto del generador de paleta que vinculé anteriormente (aunque se está generando en el antiguo formato Material1, y tendrá que convertirlo manualmente al formato Material2 como publiqué aquí).

Configure el tema para usar la paleta de colores de la marca como primarycolor, y lo que tenga para acentuar como su accentcolor.

Paso 3: use el tema en toda la aplicación siempre que pueda

Algunos elementos pueden tomar los colores del tema, como <md-toolbar>, <md-input>, <md-button>, <md-select>y así sucesivamente. Se utilizarán primaryde forma predeterminada, así que asegúrese de establecer la paleta de colores de la marca como principal. Si desea cambiar el color, use la colordirectiva (¿es una directiva Angular?).

Por ejemplo:

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

Intente usar el siguiente sitio web, esto parece fácil de personalizar los temas angulares. https://materialtheme.arcsine.dev/