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

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

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

Encontré este increíble sitio web donde ingresas el color de tu 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 accent.

Paso 2: Crear paletas en su archivo de tema personalizado

Aquí hay una guía de 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 verdadero tono de mi color de marca/color de acento). Así que en este ejemplo, mi color de marca es #5282c1. El resto son otros tonos de ese color (donde los números más bajos significan más brillante tonos y números más altos significan tonos más oscuros). Los AXXX son diferentes tonos. No estoy seguro (todavía) dónde están en uso. Una vez más, un número más bajo significa más brillante y números más altos significa más oscuro.

El contrast establece el color de la fuente sobre los colores de fondo. Es muy difícil (o incluso imposible) calcular a través de CSS donde la fuente debe ser brillante (blanco) u oscuro (negro con opacidad 0.87) por lo que es fácilmente legible incluso para las personas daltónicas. Así que esto se establece manualmente y codificado en el definición de paleta. Obtienes esto también del generador de paletas que vinculé anteriormente (aunque se está emitiendo en el antiguo formato Material1, y tendrás que convertirlo manualmente al formato Material2 como publiqué aquí).

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

Paso3: Use el tema en toda la aplicación donde pueda

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

Por ejemplo:

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