Angular Material：カスタムテーマの作成

Angular Material 2 の紹介では、事前に作成されたテーマの1つを使用する方法を示しましたが、カスタムテーマを作成するのも同じくらい簡単です。 これにより、Angular Materialコンポーネントで使用されるプライマリ、アクセント、および警告の色を指定できます。

カスタムテーマはSassファイルになります。この場合、 theme.scss と呼び、アプリの /srcフォルダーに配置します。

アプリの残りの部分にSassを使用しなくても、心配する必要はありません。 Angular CLI を使用している場合は、Sassファイルを .angular-cli.json 構成ファイルのスタイルのリストに追加するだけで、AngularCLIが処理します。 cssファイルのコンパイル方法：

"styles": [
  "styles.css",
  "theme.scss"
],

テーマファイルでは、最初にメインテーマのSassファイルをAngular Materialからインポートし、基本スタイルを含める必要があります。

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

次に、 mat-palette 関数を使用して、プライマリ、アクセント、および警告の色の変数を宣言します。

mat-palette は、最初の引数として色の名前を取り、残りのオプションの2番目、3番目、および4番目の引数は、デフォルト値、明るい値、および暗い値を定義します。 色の名前と値自体は、公式のマテリアルデザインの色のガイドラインから取得されています。

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-deep-orange);

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

最後に、色の定義とmat-light-theme関数を組み合わせた$my-app-theme 変数を作成し、最後にangularを呼び出した結果を含めます。 -material-theme関数と$my-app-theme。

追加および代替テーマ

クラス内にテーマ定義をネストすることで、気になる場合は、別のテーマを作成することもできます。 次に、代替テーマを有効にするために、テンプレートの親要素にクラス名を追加するだけです。

これが私たちの完全なファイルで、別のテーマがあります：

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

$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
.alternate-theme {
  $alternate-primary: mat-palette($mat-light-blue);
  $alternate-accent:  mat-palette($mat-yellow, 400);
  $alternate-theme: mat-light-theme($alternate-primary, $alternate-accent);

---

2つのテーマは次のようになります。

<mat-card>
  Main Theme:
  <button mat-raised-button color="primary">
    Primary
  </button>
  <button mat-raised-button color="accent">
    Accent
  </button>
  <button mat-raised-button color="warn">
    Warning
  </button>
</mat-card>

<mat-card class="alternate-theme">
  Alternate Theme:
  <button mat-raised-button color="primary">
    Primary
  </button>
  <button mat-raised-button color="accent">
    Accent
  </button>
  <button mat-raised-button color="warn">
    Warning
  </button>
</mat-card>