{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/set-custom-colors-angular-material-ui",
  "path": "/posts/set-custom-colors-angular-material-ui",
  "publishedAt": "2022-05-11T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "angular",
    "javascript"
  ],
  "textContent": "Angular Material UIのカラーパレットがどうにもパッとしない。\n\nということで、カスタムカラーを使用することにした。\n\nカスタムカラーを使用するためにはインストールの段階でカスタムカラーを使用するよ、という宣言が必要だがその方法は前回書いたので、参考にしてほしい。\n\nさて、さっそくカスタムカラーを設定していく。\n\n手順としてさらっていくと、自作のパレットを作成し、それを適用するというそれだけのこと。\n\nなので、まずは自作のパレットを作成する。\n\nsrc/assets/\\_palette.scssを作成し、そこにカラーを書いていく。\n\n例えばこんな感じに。\n\n次に、このパレットを読み込む必要があるので、src/styles.scssに移動する。\n\nで、まずはカスタムパレットを使用すると宣言する。\n\nあ、ちなみに今回はPrimaryカラーだけをカスタムした、遅ればせながら言っておく。\n\nそのため、Primaryカラーにカスタムパレットを適用させる。\n\naccent、warnはMaterial UIが用意しているカラーを使用している。\n\n最後にテーマ全体を宣言しておしまい。\n\nたぶん、Material\nUIで作成されたカラーテーマをそのまま使うのは無理があるので、こんな感じでカスタムテーマを作るとずいぶん楽になる。\n\n参考までにこの作業のGithubをどうぞ。",
  "title": "Angular Material UI でカスタムカラーを設定する。"
}