Angular Material v18でのMatToolbarカラー問題

問題

Angular Materialをv18にアップグレード後、MatToolbarコンポーネントのcolor属性が機能しなくなる現象が発生します。具体的な症状は次の通りです：

<!-- 従来の使用方法 -->
<mat-toolbar color="primary">Toolbar</mat-toolbar>

上記コードを実行してもツールバーカラーが適用されず、以下のような状態になります：

1. ツールバーの背景がデフォルト色（白に近い）のまま変化しない
2. ボタン(mat-button)やアイコン(mat-icon)ではcolor="primary"は正常に機能する
3. 手動でCSSを記述すると色変更は可能

<!-- これは機能する -->
<button mat-button color="primary">Primaryボタン</button>
<mat-icon color="primary">home</mat-icon>

<!-- これは機能しない -->
<mat-toolbar color="primary">ツールバー</mat-toolbar>

この問題はAngular Materialのバージョン移行（M2→M3デザイン）に起因するものです。v18ではMaterial Design 3（M3）が導入されたため、従来の色指定方法が一部コンポーネントでサポートされなくなりました。

解決策

方法1: 後方互換性スタイルの追加（推奨）

根本的な解決方法は、M2スタイルの後方互換性を有効化することです。グローバルスタイルファイル（例：styles.scss）に以下を追加します：

@use '@angular/material' as mat;

$theme: mat.define-theme();

html {
  // デフォルトテーマを適用
  @include mat.all-component-themes($theme);
  
  // M2のcolor属性を有効化
  @include mat.color-variants-backwards-compatibility($theme);
}

重要

$themeの定義にはプロジェクトのテーマ設定を反映させる必要があります。カスタムテーマを使用する場合はパレットを変更します：

$theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: mat.$rose-palette,  // Red/Roseテーマ用
    tertiary: mat.$red-palette,
  ),
));

方法2: M3スタイルに合わせたカスタム設定

M3の新しいテーマシステムに準拠したい場合は、CSS変数を直接設定します：

@use '@angular/material' as mat;

:root {
  mat-toolbar {
    --mat-toolbar-container-background-color: var(--mat-primary);
    --mat-toolbar-container-text-color: var(--mat-primary-on-surface);
  }
}

特定のコンポーネント内でのみ適用したい場合：

@use '@angular/material' as mat;

.custom-toolbar {
  @include mat.toolbar-overrides((
    container-background-color: var(--mat-sys-primary-container),
    container-text-color: var(--mat-sys-primary),
  ));

  .toolbar-icon {
    color: var(--mat-sys-primary);
  }
}

コンポーネントでの使用例：

<mat-toolbar class="custom-toolbar">
  <button mat-icon-button>
    <mat-icon class="toolbar-icon">menu</mat-icon>
  </button>
</mat-toolbar>

問題の詳細と背景

原因の分析

Angular Material v18ではMaterial Design 3（M3）が全面採用されました。主な変更点は：

1. primary/accent/warnの色体系からトークンベースの設計へ移行
2. コンポーネントごとにCSSカスタムプロパティでスタイル管理
3. color属性は一部コンポーネントで非推奨化

なぜツールバーだけ影響を受けるのか

M3移行がコンポーネントごとに進められているためです：

• ボタン/アイコン：後方互換性が維持されている
• ツールバー：完全にM3仕様へ移行済み
• この不一致によりツールバーのみcolor属性が無効化される

注意

公式ドキュメントのスタイリングガイドが更新されています。従来の方法ではなく、システム変数の使用が推奨されています。

補足情報

テーマ切り替え時の対応

ダークモード/ライトモードを実装する場合の設定例：

$light-theme: mat.define-theme((
  color: (theme-type: light, primary: mat.$rose-palette)
));

$dark-theme: mat.define-theme((
  color: (theme-type: dark, primary: mat.$magenta-palette)
));

.light-theme {
  @include mat.all-component-themes($light-theme);
  --mat-toolbar-container-background-color: #{mat.get-theme-color($light-theme, primary, 80)};
}

.dark-theme {
  @include mat.all-component-colors($dark-theme);
  --mat-toolbar-container-background-color: #{mat.get-theme-color($dark-theme, primary, 30)};
}

使用可能なカラートークン

一般的なCSS変数の一例：

変数名	説明
--mat-primary	プライマリカラー
--mat-primary-container	プライマリコンテナ背景
--mat-on-primary	プライマリ上のテキスト色
--mat-secondary	セカンダリカラー
--mat-error	エラーカラー

完全なリストは公式ドキュメントを参照してください。

結論

Angular Material v18のMatToolbarでcolor属性が機能しない問題は、M3デザイン移行に伴う仕様変更が原因です。解決方法は以下のいずれかです：

1. 後方互換モードの有効化
   @include mat.color-variants-backwards-compatibility($theme);を追加

2. M3スタイルでの直接設定
   CSS変数--mat-toolbar-container-background-colorを設定

アップグレード後も安定した表示を維持するには、公式のテーマ移行ガイドに従いながら、プロジェクトに適したアプローチを選択することが重要です。