Blog

Angular Materialをカスタマイズ

橋本 侑子
橋本 侑子 デザイナー

Angular Materialは便利だけどカスタマイズ方法ちょっと迷っちゃうな、と思ったのでまとめておきます。

そもそもMaterial Designとは

Angular Material は Material Design に沿ったサイトをAngularで作る時に便利なコンポーネント集! ……なのですが、そもそもMaterial Design とは?
見た目で選ぶ前にちょっとガイドラインを見てみましょう。
https://material.io/

Material Design は Google さんが作ったデザインガイドラインです。
デザインガイドラインなので制約がたくさんあります。

制約を守ることで、細かい部分のことを考えなくても要素を組み合わせるだけでガイドラインに沿ったきちんと感のあるデザインに仕上げる、というものです。つまり統一感のためのものです。

しかし Material Studies の作例を見ると、同じ決まりの中で要素を組み合わせても、それぞれの個性が出せるということがわかります。
https://material.io/design/material-studies/about-our-material-studies.html

装飾をするための骨組みではなく、すでに整えられた要素を組み合わせるためのコンポーネントなので、Angular Material の設定もそんなに自由度が高くないのです。仕方ない。

それでも個性を出すんだよ!!!

ダークモードにしてみる

とりあえず流行りのダークモードにしてみましょう。

// styles.scss

// テーマ操作関数をライブラリからインポート
@import '~@angular/material/theming';

// Angular Material の共通スタイルを読み込み
@include mat-core();

// 色の定義
$dark-primary: mat-palette($mat-purple);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);
 
// 色の定義をテーマにまとめる
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

// クラスに設定
.my-original-theme {
  @include angular-material-theme($dark-theme);
}
<!-- app.component.html -->

<div class="my-original-theme">
  この中にボタンとか好きな要素を入れる
</div>

定義できる色はこの辺を参照してください。
https://material.io/design/color/#color-theme-creation
https://material.io/tools/color/

実際のscssの中にあるパレット↓
https://github.com/angular/components/blob/c1f6ea19cb317d30af79dc431d39ed8b962e146d/src/lib/core/theming/_palette.scss

primary、accent、warnの色が設定できます。
ボタンやタブといった要素の色が一括で変更されます。

自分のテーマを作ってみる

ダークモードにすると背景色とかも一気に変わるけど、もうちょっと好みに変えられないの? という時。SCSSで1つずつのクラスを上書きするのも方法の1つですが、自分用にテーマを作って指定することができます。

テーマ用の関数を参考にします
https://github.com/angular/components/blob/c1f6ea19cb317d30af79dc431d39ed8b962e146d/src/lib/core/theming/_theming.scss
https://github.com/angular/components/blob/c1f6ea19cb317d30af79dc431d39ed8b962e146d/src/lib/core/theming/_palette.scss

// styles.scss

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

// _palette.scssの$mat-dark-theme-backgroundから
// 変更したいものだけ抜き出して書く
$my-theme-background: (
  card: map_get($mat-pink, 400),
  raised-button: map-get($mat-grey, 800),
);

// _palette.scssの$mat-dark-theme-foregroundから
// 変更したいものだけ抜き出して書く
$my-theme-foreground: (
  base: white,
  divider: $white-12-opacity,
  icon: white,
  icons: white,
  text: white,
);

// _theming.scssの@function mat-dark-themeを
// コピーして書き換え
@function my-theme($primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $my-theme-foreground,
    background: $my-theme-background,
  );
}

// 以下はさっきのダークモードと同じ
$dark-primary: mat-palette($mat-purple);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);

$my-theme: my-theme($dark-primary, $dark-accent, $dark-warn);

.my-original-theme {
  @include angular-material-theme($my-theme);
}

↑こうすると、card: map_get($mat-pink, 400)とピンクを指定しているので

Stepperの背景もピンクになりました。

どのkeyがどこの色になるかは1つずつ試してみてください。

グラデーションのボタンを作りたいんだけど!

グラデーション、流行ってますよね。
マテリアルだろうが何だろうが、使ってみたい時ありますよね。
でもパレット外の色は選択できませんよね。

諦めようね!

諦めて、用意されたmat-button要素でなく、自分で作ってしまいましょう。
Ripple エフェクトもコンポーネントとして用意されてるから大丈夫!

<!-- app.component.html -->
<div matRipple
    [matRippleColor]="'#00ffff4d'" <!-- Rippleの透明度はHEX値で設定 -->
    [matRippleCentered]="false"
    [matRippleUnbounded]="false"
    class="hoge-button mat-raised-button"><!-- mat-raised-buttonクラスを借用する -->
    ボタンっぽいもの
</div>
// styles.scss
.mat-raised-button.hoge-button {
  overflow: hidden;  // [matRippleUnbounded]="false"が無視される時
  background: rgb(151,86,184);
  background: linear-gradient(90deg, rgba(151,86,184,1) 0%, rgba(99,107,255,1) 48%, rgba(52,214,247,1) 100%);
}

ボタンっぽいものが出来上がりました!

参考サイト

Theming your Angular Material app
【超簡単】Angular Materialのスタイルをダークモードにする
Angular Materialのカスタムテーマを設定する
Customize Angular Material Design
ARGBのカラーコード透明度まとめ