# Angular Material UI でカスタムカラーを設定する。
3 min read
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をどうぞ。
