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>