web-dev-qa-db-ja.com

Angularでカスタムテーマパレットを使用するにはどうすればよいですか？

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

私はこの問題を発見しました： AngularJS 2-マテリアルデザイン-カラーパレットの設定 ここでカスタムテーマを作成できますが、基本的には、事前に構築されたパレットの異なる部分を使用しているだけです。 Material2の事前定義された色を使いたくありません。ユニークで特別なブランドカラーが欲しい。 _palette.scssでハックするよりも、独自のテーマを作成するより良い方法（正しい？）がありますか？

ブランドパレットのミックスインを作成する必要がありますか？もしそうなら-適切にそれを行う方法に関するガイドはありますか？色のさまざまな色合いの意味は何ですか（50、100、200、A100、A200などの数字でマークされています）？

このエリアに関する情報は大歓迎です！

angularsassmaterial-designangular-material2
60
Narxx

いくつかの研究の後、私はそれを解決したこの結論に至りました。それがあなたにも役立つことを願っています。

ステップ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);

上記のコードに関する説明

左側の数字は、明るさの「レベル」を設定します。デフォルトは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>

166
Narxx