♦️

Angular Material Designをカスタマイズする

2021/12/26に公開

Angular

tech

2021年12月24日時点のWindows10での情報です。
@angular/cli: v13.1.2
@angular/material: v13.1.1

前回、Angularプロジェクトに Material Designを導入するで、「Indigo/Pink」のテーマを導入しました。
今回は、テーマをカスタマイズしていきます。

適用済みのテーマを削除

すでに適用しているテーマがあれば削除します。
angular.jsonファイルのstyles要素に記述されているテーマを削除します。

src\app\angular.json

Customテーマの導入

「ng add @angular/material」コマンドを実行し、テーマ「Custom」を選択します。
既に「ng add @angular/material」実行し、別のテーマを適用したことがあっても、もう一度「ng add @angular/material」を行い、テーマ「Custom」を選択します。

npx ng add @angular/material

テーマは「Custom」を選択し、タイポグラフィ、アニメーションもyesを選択しておきます。

テーマファイルを作成

styles.scssファイルを確認すると、カスタムテーマに関する記述が追加されています。

src\app\styles.scss
このままstyles.scssを変更してもいいですが、今後のことを考えてテーマファイルを作成しておきます。
フォルダやファイル名はお好きなものでいいですが、ここでは例として「src\app\styles」フォルダを作成し、「_my-theme.scss」ファイルを作成しました。

「styles.scss」の下記の赤枠部分を、作成したテーマファイル「_my-theme.scss」に移動します。

src\app\styles.scss

「styles.scss」は、テーマファイル「_my-theme.scss」を読み込むようにしておきます。

src\app\styles.scss

定義済のカラーパレットからテーマを作成

まずは定義済みのカラーパレットからテーマを作成してみます。
マテリアルデザインには20の定義済みパレットがあります。
Material Design Color Palette

このカラーパレットから以下の3つの用途のパレットを選びます。

プライマリーカラー
アクセントカラー
警告カラー

この画像では、プライマリーカラーにはindigoパレット、アクセントカラーにはpinkパレット、警告カラーにはredパレットが指定されています。

src\app\styles\_my-theme.scss

パレットの定義は「node_module\@angular\material\core\theming\_palette.scss」ファイルに記述されています。
この画像は「_palette.scss」ファイルの、pinkパレットの定義です。
50～A700までのカラー定義と、contrastには50～A700で定義された色を背景色にしたときの文字の色が$dark-primary-text か $light-primary-textで指定されています。

node_modules\@angular\material\core\theming\_palette.scss

次にmat.define-palette() の定義を見てみます。

src\app\styles\_my-theme.scss
mat.define-palette() は「node_module\@angular\material\core\theming\_theming.scss」ファイルに定義されています。
mat.define-palette() の引数は以下のようになっています。

第一引数：パレットを指定します。
第二引数：デフォルトの色を指定します。省略時は500が使用されます。
第三引数：デフォルトの色より明るい色を指定します。省略時は100が使用されます。
第四引数：デフォルトの色より暗い指定します。省略時は700が使用されます。

node_module\@angular\material\core\theming\_theming.scss

以上のことを踏まえ、「_my-theme.scss」のプライマリーカラーをbrownパレット、アクセントカラーをtealパレットにしてみました。

src\app\styles\_my-theme.scss

前回作成した「my-address-from」で確認してみます。

カスタムカラーパレットからテーマを作成

次はカスタムカラーパレットを作成する方法です。

まず、プライマリカラーの標準色、明るい色、暗い色を決め、それぞれの色を背景色にしたときの文字色を決めます。
同様に、アクセントカラーも標準色、明るい色、暗い色を決め、それぞれの色を背景色にしたときの文字色を決めます。

以下のカラーツールを使用すると、アクセントカラーの標準色、プライマリーカラーの標準色を決めると、自動で明るい色、暗い色、それぞれの文字色を表示してくれます。

「_my_theme.scss」ファイルに、プライマリーカラーパレットとアクセントカラーパレットを定義します。
パレットに定義するのは標準色、明るい色、暗い色と、それぞれの色を背景色にしたときの文字色です。

src\app\styles\_my-theme.scss

@use '@angular/material' as mat;
@use '@angular/material/theming' as theme;
@include mat.core();

// プライマリーカラーパレット
$primary-palette: (
    default: #37cabb,
    lighter: #75feed,
    darker: #00988b,
    contrast: (
      default: theme.$dark-primary-text,
      lighter: theme.$dark-primary-text,
      darker: theme.$dark-primary-text    
    )
  );
// アクセントカラーパレット
$accent-palette: (
    default: #e0897b,
    lighter: #ffbaaa,
    darker: #ab5b4f,
    contrast: (
      default: theme.$dark-primary-text,
      lighter: theme.$dark-primary-text,
      darker: theme.$light-primary-text,
    )
  );

// プライマリーカラーのマップを作成
$myapp-primary: mat.define-palette($primary-palette, default, lighter, darker);
// アクセントカラーパレットのマップを作成
$myapp-accent: mat.define-palette($accent-palette, default, lighter, darker);
// 警告カラーパレット（※デフォルトのままredパレットを使用）
$myapp-warn: mat.define-palette(mat.$red-palette);

// lightモード 又は darkモードのテーマに設定する
// ここではlightモードを使用する
$myapp-theme: mat.define-light-theme((
  color: (
    primary: $myapp-primary,
    accent: $myapp-accent,
    warn: $myapp-warn,
  )
));

@include mat.all-component-themes($myapp-theme);

前回作成した「my-address-from」で確認してみます。

カラーパレットから指定の色を取り出す

カラーパレットから色を取り出すにはmat.get-color-from-palette()を使用します。
カラーパレットから文字色を取り出すにはmat.get-contrast-color-from-paletteを使用します。

src\app\styles\_my-theme.scss

@use '@angular/material' as mat;
@use '@angular/material/theming' as theme;
@include mat.core();

// プライマリーカラーパレット
$primary-palette: (
    default: #37cabb,
    lighter: #75feed,
    darker: #00988b,
    contrast: (
      default: theme.$dark-primary-text,
      lighter: theme.$dark-primary-text,
      darker: theme.$dark-primary-text    
    )
  );

// プライマリーカラーパレットの「lighter」の色を取得する
$color: mat.get-color-from-palette($primary-palette, lighter);
// プライマリーカラーパレットの「lighter」のもじ色を取得する
$contrast: mat.get-contrast-color-from-palette($primary-palette, lighter);

以上、Angular Material Designをカスタマイズする方法でした。