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

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

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

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

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

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

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

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

例えばこんな感じに。

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

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

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

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

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

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

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

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