アプリ全体で自社のブランドカラーを使いたい。
私はこの問題を発見しました：AngularJS 2-マテリアルデザイン- 申し立てによるとカスタムテーマを構築できるカラーパレットを設定します。Material2の定義済みカラーを使用したくありません。ユニークで特別なブランドカラーが欲しいです。自分でテーマを作成するより良い方法（正しい？）はあり_palette.scssませんか？
ブランドパレットのミックスインを作成する必要がありますか？もしそうなら-それを適切に行う方法のガイドはありますか？さまざまな色合いの意味は何ですか（50、100、200、A100、A200などの番号が付いています）？
このエリアに関する情報は大歓迎です！
回答:
いくつかの調査の結果、この結論に至り、解決されました。それがあなたにも役立つことを願っています。
あなたのブランドカラーを入力するこの素晴らしいウェブサイトを見つけてください、そしてそれはそのブランドカラーの異なった色合いで完全なパレットを作成します：http : //mcg.mbitson.com
私はこのツールを自分のprimary色（私のブランドの色）と色の両方に使用しましたaccent。
ここにそのような.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);
左側の数字は、明るさの「レベル」を設定します。デフォルトは500です（これは、私のブランドカラー/アクセントカラーの実際の色合いです）。この例では、私のブランドカラーは#5282c1です。残りはその色の他の色合いです（数字が小さいほど明るい色合い、数字が大きいほど濃い色になります）。AXXXさまざまな色合いです。それらがどこで使用されているか（まだ）わかりません。この場合も、数値が小さいほど明るく、数値が大きいほど暗くなります。
contrastこれらの背景色の上にフォントの色を設定します。フォントが明るい（白）または暗い（0.87の不透明度の黒）であるCSSで計算するのは非常に困難（または不可能）です。したがって、これは手動で設定され、パレット定義にハードコードされます。これは、上記でリンクしたパレットジェネレーターからも取得できます（ただし、古いMaterial1形式で出力されているため、ここに投稿したように、手動でMaterial2形式に変換する必要があります）。
ブランドのカラーパレットをprimary色として使用し、アクセントに何でも使用できるようにテーマを設定しますaccent。
いくつかの要素のような、テーマの色を取ることができ<md-toolbar>、<md-input>、<md-button>、<md-select>とになります。primaryデフォルトで使用するため、ブランドのカラーパレットをプライマリとして設定してください。色を変更したい場合は、colorディレクティブを使用します（Angularディレクティブですか？）。
例えば：
<button mat-raised-button color="accent" type="submit">Login</button>
@import '~@angular/material/theming'; @include mat-core();
以下のウェブサイトを使用してみてください。これは角度のテーマをカスタマイズするのが簡単なようです。 https://materialtheme.arcsine.dev/