Tips: Angular Material M3 を使う場合のコンポーネントの色指定

要約

M2 から M3 になって、カラーの指定方法が変更されています。

例えば、以下のように style.scss に設定し、btn-error を利用することでエラー色のボタンを表示することができます。

@use '@angular/material' as mat;

// テーマ設定
$my-theme-config: (
  color: (
    primary: mat.$azure-palette,
    tertiary: mat.$blue-palette,
  )
);

// テーマ適用
html {
  @include mat.theme($my-theme-config);
}
$my-theme: mat.define-theme($my-theme-config);

// エラー色のボタン
.btn-error {
  @include mat.button-theme($my-theme, error);
}

はじめに

先日、久しぶりに Angular Material を触ったところ、ボタンのエラー色指定に苦戦したので記事にしたいと思います。

合わせて、Material 3 (M3) や Sass などの背景技術についても少し言及します。

なお、この記事は、Angular Material v20.2.8 を使って検証されています。

M3 向けの Angular Material の利用に必要な前提知識

Angular Material v17 で M3 に対応されてから、色々と変更されていたようです。

柔軟にスタイル変更ができるようになったようなのですが、しかし利用には知識が必要になりました。

今回苦戦した中で理解したのは、大前提として Sass の知識の他に次の３つを押さえるべきだなと思いました。

• 設定
• テーマ
• トークン

前提1. Sass の型

基礎的は話題ですが、Sass は変数に以下の型をサポートしています。

// 数値型
$value-number: 10;
// 色型
$value-color: #FF0000;
// 文字列型
$value-string: "hello";
// 配列
$value-list: [1px, 2px, 3px];
// 連想配列
$value-map: ("reg": 400, "mid": 500);
// 真理値
$value-bool: true;

公式: https://sass-lang.com/documentation/values/

前提2. 設定

Angular Material をインストールすると、style.scss に以下のようなコードが挿入されます。

この mat.theme() の引数になっているのが設定です。

@use '@angular/material' as mat;

html {
  @include mat.theme((
    color: (
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: Roboto,
    density: 0,
  ));
}

mat.theme() がテーマ全体のスタイルを決めているようなので、その実体を確認します。

node_modules/@angular/material/core/tokens/_system.scss

@mixin theme($config, $overrides: ()) {
  $color: map.get($config, color);
  $color-config: null;
  // 以下省略...
}

つまり、第一引数である $config がテーマを決める設定になります。

ただ、この設定について、明確な定義が無いので困りました。

例えば、color キーは何を設定するのかです。

これには、２種類ある様です。

1. color: mat.$azure-palette のような M3 がそもそも用意しているパレットをそのまま設定する。
2. デフォルトのような形で、以下のキーを保持する連配列を設定する。

color: (
  primary: (),
  tertiary: (),
  theme-type: ()
)

と、そのような形で、テーマに対する全体的な設定を行うのが、config の様です。

前提3. テーマ

設定から作成されるのが、テーマになります。

これは、Angular Material v19 から導入された Sass API を使って設定から作成できるようです。

// 上記で作った設定（実物は省略)
$my-config = (
  color: (
    primary: mat.$azure-palette,
    tertiary: mat.$blue-palette,
  ),
  typography: Roboto,
  density: 0,
);

// テーマオブジェクトを作成する
$my-theme = mat.define-theme($my-config)

テーマとは、テーマオブジェクトのことで、それは Sass でいうところの連想配列であり、フレームワーク上で利用される具体的なスタイルの値の集合になります。

前提4. トークン

どうやら M3 から生まれた概念で、簡単にいうと具体的なスタイル値を示すアドレスの様です。

トークン例: 用途ごとに命名規則があり、これらが示すスタイル値は同じ

• md.comp.fab.secondory.container.color (fab ボタンの背景色)
• md.sys.color.secondary-container (システムのセカンダリ色)
• md.ref.palette.secondary90 (パレットのセカンダリ90の色)

公式: https://m3.material.io/foundations/design-tokens/overview

Angular Material の公式ページで、各コンポーネントの STYLING タブで説明されているのは、該当コンポーネントが利用しているアドレス (トークン) の一覧です。

例 (Button): https://material.angular.dev/components/button/styling

ボタンの色を変えたいと考えた場合、ただ単に文字の色だけを変えたいだけであれば、このトークンからアクセスできる色を変更すれば済みます。

しかし、例えばボタンをタップした時に表示されるリップルの色も連動して変更したい、といった場合には、トークンを一つ一つ設定しなければならず、非常に手間であり、そもそも設計者の意図した実装とは言えません。

実装すべきこと

長くなりましたが、つまりボタンに対して、テーマを適用できれば解決します。

// テーマ設定
$my-theme-config: (
  color: (
    primary: mat.$azure-palette,
    tertiary: mat.$blue-palette,
  )
);

$my-theme: mat.define-theme($my-theme-config);

// ボタンテーマ設定
.btn-error {
  @include mat.button-theme($my-theme, error);
}

各コンポーネントごとにテーマを設定する mixin が用意されています。

button でいえば、button-theme です。

他にどんな mixin が用意されているかは、下記node_modules のファイルを参照すると良いです。

node_modules\@angular\material\_index.scss

まとめ

結局、どのような Sass API が用意されているかなどの説明が公式から見つからなかったので、実装を見ることになりました。

Material デザインそのもの説明は厚くされているので、具体的なパッケージの説明も同じように用意されていたら良いなと思います。