Como posso usar paletas de tema personalizado no Angular?

Quero usar as cores da marca da minha empresa em todo o aplicativo.

Eu encontrei este problema: AngularJS 2 - Design de material - definir paleta de cores onde posso construir um tema supostamente personalizado , mas basicamente usa diferentes partes de paletas pré-construídas. Não quero usar as cores predefinidas do Material2. Quero minhas cores únicas e especiais de marca. Existe uma maneira melhor (mais certa?) De criar meu próprio tema, do que apenas hackear _palette.scss?

Preciso fazer um mixin para a paleta da minha marca? Se sim - algum guia sobre como fazê-lo corretamente? Quais são os significados dos diferentes tons de cores (marcados com números como: 50, 100, 200, A100, A200 ...)?

Qualquer informação sobre esta área será muito apreciada!

Depois de algumas pesquisas acabei com essa conclusão que resolveu para mim, espero que ajude você também.

Passo 1: Crie suas próprias paletas de cores de marca.

Encontrou este site incrível onde você insere a cor da sua marca, e ele cria uma paleta completa com os diferentes tons dessa cor da marca: http://mcg.mbitson.com

Usei essa ferramenta tanto para a minha primarycor (que é a cor da minha marca) quanto para a accentcor.

Passo 2: Crie paletas em seu arquivo de tema personalizado

aqui está um guia de como criar esse .scssarquivo: 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);

Alguma explicação sobre o código acima

Os números do lado esquerdo definem o "nível" de brilho. O padrão é 500 (que é o tom real da cor da minha marca / cor de destaque). Portanto, neste exemplo, a cor da minha marca é #5282c1. O resto são outras tonalidades dessa cor (onde números mais baixos significam tonalidades mais brilhantes e números mais altos significam tonalidades mais escuras). O AXXXsão diferentes tons. Não tenho certeza (ainda) de onde eles estão sendo usados. Novamente, um número menor significa mais claro e números mais altos significa mais escuro.

O contrastdefine a cor da fonte sobre as cores de fundo. É muito difícil (ou mesmo impossível) calcular via CSS onde a fonte deve ser clara (branca) ou escura (preta com opacidade 0,87), por isso é facilmente legível mesmo para pessoas daltônicas. Portanto, isso é definido manualmente e codificado na definição da paleta. Você também obtém isso do gerador de paleta que vinculei acima (embora esteja sendo gerado no antigo formato Material1, e você terá que convertê-lo manualmente para o formato Material2 como eu postei aqui).

Defina o tema para usar a paleta de cores da marca como a primarycor e tudo o que você tiver para o destaque como sua accentcor.

Etapa 3: use o tema em todo o aplicativo sempre que puder

Alguns elementos podem levar as cores do tema, como <md-toolbar>, <md-input>, <md-button>, <md-select>e assim por diante. Eles serão usados primarypor padrão, portanto, certifique-se de definir a paleta de cores da marca como primária. Se você quiser mudar a cor, use a colordiretiva (é uma diretiva Angular?).

Por exemplo:

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

Tente usar o site abaixo, parece fácil personalizar os temas angulares. https://materialtheme.arcsine.dev/