[解決済み] Angularでカスタムテーマパレットを使用するには？

質問

アプリ全体に会社のブランドカラーを使いたいのですが。

このような問題が見つかりました。 AngularJS 2 - マテリアルデザイン - カラーパレットを設定する を構築できるところ。 と言われるカスタム テーマを作成することができますが、基本的には、事前に作成されたパレットのさまざまな部分を使用するだけです。私は、Material2 の定義済みカラーを使いたくありません。私は自分独自の特別なブランドカラーが欲しいのです。自分自身のテーマを作成するために、単に _palette.scss ?

ブランドパレット用のミキシンを作成する必要がありますか？もしそうなら、それを適切に行う方法について何かガイドがありますか？さまざまな色調 (50、100、200、A100、A200...などの数字でマークされている) の意味は何でしょうか?

この分野に関するどんな情報でも、大いに感謝します!

どのように解決するのですか？

いくつかの研究の後、私はそれを解決するために、この結論に行き着いた、それはあなたにも役立つことを願っています。

ステップ1: ブランディングカラーから独自のパレットを作成する。

ブランド カラーを入力すると、そのブランド カラーのさまざまな色合いを含む完全なパレットが作成される、素晴らしいウェブサイトを発見しました。 http://mcg.mbitson.com

このツールは、私の primary の色（これは私のブランドカラーです）と accent の色です。

ステップ2：カスタムテーマ・ファイルにパレットを作成する

このようなパレットを作成する方法は、以下のとおりです。 .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);

上記のコードに関するいくつかの説明

左側の数字は明るさのレベル(quot;level")を設定します。デフォルトは500です（私のブランドカラー/アクセントカラーの本当の色合いです）。したがって、この例では、私のブランドカラーは #5282c1 . 残りはその色の他の色合いです（数字が小さいほど明るく、数字が大きいほど暗い色合いを意味します）。そのため AXXX は別の色合いです。どこで使われているかは（まだ）わからない。繰り返しになりますが、数字が小さいと明るく、大きいと暗くなります。

その contrast はそれらの背景色の上にフォントの色を設定します。色覚異常の人でも読みやすいように、フォントを明るく（白）または暗く（不透明度 0.87 の黒）する場所を CSS で計算するのは非常に困難です（というか不可能です）。そこで、この設定は手動で行い、パレット定義にハードコードしています。これは、私が上でリンクしたパレット ジェネレーターからも得られます (ただし、古い Material1 形式で出力されているので、ここに掲載したように、これを手動で Material2 形式に変換する必要があります)。

ブランドのカラーパレットを使用するように、テーマを primary の色として使用し、アクセントとして使用するものを accent の色として使用します。

ステップ3：できる限りアプリ全体でテーマを使用する

いくつかの要素はテーマカラーを使用することができ、たとえば <md-toolbar> , <md-input> , <md-button> , <md-select> といった具合です。彼らは primary を使うので、ブランドのカラーパレットをプライマリとして設定してください。色を変えたい場合は color ディレクティブ（Angularのディレクティブなのかな？）

例えば

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