Angular Materialを自分好みのカラーパレットに変更する

はじめに

下記バージョン構成でお送りします。

Angular ： 4.4.4

Angular-cli : 1.4.3

Angular Material：2.0.0-beta.12

Angular Material

Angular Material

まだβなんですが、主たるコントロールはそろっているので

angularでマテリアルデザインのサイトを作りたいときは

非常に重宝するかと思います。

ただ、現在のテンプレートのカラーパレットって↓みたいな感じのものしかないんですね

自分は紫好きなんでいいんですが

ここも自分で自由に変更出来たらモックサイト作るときに便利なので

自分好みの色で、Angular Materialを構成してみましょう。

まずはテンプレートのカラーパレットのCSSをみてみる

まずはGitHubでCSSがどのような構成で作成されているのかみてみます。

github.com

deeppurple-amberのSCSSをみてみます。

$mat-deep-purpleにカラーパレットの設定が記述されてそうです。

では、$mat-deeppurpleを見てみます。

material2/_palette.scss at master · angular/material2 · GitHub

ここにはテーマのすべての設定が記述されているようなので、一部抜粋します。

$mat-deep-purple: (
  50: #ede7f6,
  100: #d1c4e9,
  200: #b39ddb,
  300: #9575cd,
  400: #7e57c2,
  500: #673ab7,
  600: #5e35b1,
  700: #512da8,
  800: #4527a0,
  900: #311b92,
  A100: #b388ff,
  A200: #7c4dff,
  A400: #651fff,
  A700: #6200ea,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: white,
    400: white,
    500: $white-87-opacity,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: $white-87-opacity,
    A700: $white-87-opacity,
  )
);

色はこのように指定されているようです。

この構成は、Googleが提供している

マテリアルデザインのカラーパレットと同じ構成になっています。

（同じGoogle提供なんだから当然といえば当然ですよね）

Color - Style - Material Design

これと同じ構成で好きな色

または、上記のサイトのカラーパレットそのまま使って

SCSSを作ってあげれば

自分好みの色のテーマのマテリアルデザインのサイトが作れそうです。

カラーパレットを作る

しかし、色彩の専門家でもないですし、マテリアルデザインの色の勉強もしてないので

これを好きな色から自分で考えて組むのは骨が折れそうです。

なので、ジェネレータを使用して、カラーパレットを作成しちゃいます。

mcg.mbitson.com

適当にこんな感じの色にしてみました。

Angular MaterialのカラーパレットのSCSSの形でOutputできるので非常に楽です。

Angular Materialを組み込む

deep-purpleのSCSSと同じようにSCSSを作成してみます。

@import '~@angular/material/theming';
@include mat-core();

$mat-custom: (
    50 : #fef9e8,
    100 : #fcf0c6,
    200 : #fae7a1,
    300 : #f7dd7b,
    400 : #f6d55e,
    500 : #f4ce42,
    600 : #f3c93c,
    700 : #f1c233,
    800 : #efbc2b,
    900 : #ecb01d,
    A100 : #ffffff,
    A200 : #fffaee,
    A400 : #ffeabb,
    A700 : #ffe2a1,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #000000,
        800 : #000000,
        900 : #000000,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);


$cust-app-primary: mat-palette($mat-custom);
$cust-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$cust-app-warn:    mat-palette($mat-red);

$cust-app-theme: mat-light-theme($cust-app-primary, $cust-app-accent, $cust-app-warn);

@include angular-material-theme($cust-app-theme);

SCSSはangular-cli.jsonのStylesで読み込ませると、ビルド時にCSSにしてくれるので

angular-cli.jsonで上記のSCSSをStylesに食わせるだけでOKです。

結果

わかりやすそうなComponentだけピックアップして表示してみました。

Primaryボタンが一番わかりやすいですが

問題なくOriginalのカラーパレットが使用されているようです。