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....