Angular Material UI でカスタムカラーを設定する。

Angular Material UIのカラーパレットがどうにもパッとしない。

ということで、カスタムカラーを使用することにした。

カスタムカラーを使用するためにはインストールの段階でカスタムカラーを使用するよ、という宣言が必要だがその方法は前回書いたので、参考にしてほしい。

さて、さっそくカスタムカラーを設定していく。

手順としてさらっていくと、自作のパレットを作成し、それを適用するというそれだけのこと。

なので、まずは自作のパレットを作成する。

src/assets/_palette.scssを作成し、そこにカラーを書いていく。

例えばこんな感じに。

$custom-primary: (
  50: #e8f5ff,
  100: #c5e5ff,
  200: #9fd4ff,
  300: #78c2ff,
  400: #5bb5ff,
  500: #3ea8ff,
  600: #38a0ff,
  700: #3097ff,
  800: #288dff,
  900: #1b7dff,
  A100: #ffffff,
  A200: #ffffff,
  A400: #cce0ff,
  A700: #b3d1ff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000,
  ),
);

次に、このパレットを読み込む必要があるので、src/styles.scssに移動する。

で、まずはカスタムパレットを使用すると宣言する。

@use "./assets/palette" as palette;

あ、ちなみに今回はPrimaryカラーだけをカスタムした、遅ればせながら言っておく。

そのため、Primaryカラーにカスタムパレットを適用させる。

$custom-primary: mat.define-palette(palette.$custom-primary);
$custom-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
$custom-warn: mat.define-palette(mat.$red-palette);

accent、warnはMaterial UIが用意しているカラーを使用している。

最後にテーマ全体を宣言しておしまい。

$custom-theme: mat.define-light-theme(
  (
    color: (
      primary: $custom-primary,
      accent: $custom-accent,
      warn: $custom-warn,
    ),
  )
);

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

たぶん、Material UIで作成されたカラーテーマをそのまま使うのは無理があるので、こんな感じでカスタムテーマを作るとずいぶん楽になる。

参考までにこの作業のGithubをどうぞ。