やっほー
【Angular】テーマを超簡単にカスタマイズする方法!

【Angular】テーマを超簡単にカスタマイズする方法!

  • 2019年3月22日
  • 2021年3月19日
  • Angular
  • 133view

Angularにはデフォルトのテーマがあります

このテーマを変えることで、例えばマテリアルデザインのカラー色を変更することもできます。

ということで今回は、テーマを超簡単にカスタマイズする方法を解説します!

Angularのデフォルトテーマ

まず、Angularのデフォルトテーマについて整理しましょう。

Angularアプリを新規作成する際にも選択しますが、種類は以下の4種類になります。

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

デフォルトテーマの変更方法

このデフォルトテーマは、「styles.css」に指定することで簡単に変更できます。

 

このような形で指定しますが、「deeppurple-amber.css」の部分を先ほどの4種類のいずれかに変更するだけです。

カスタムテーマの作成方法

では、カスタムテーマの作成方法ですが、若干型破りな方法でいきます。

というのも、今「styles.css」で読み込まれているCSSを適当なCSSにし、そのCSSにデフォルトテーマのソースコードをコピペしてしまえば、あとは好きなようにカスタマイズできると思ったのですよ!

カスタムテーマ用CSS作成

今回は、「styles.css」のファイルと同じ階層に「custom.css」というファイルを作成しました。

カスタムテーマ用CSS編集

この「custom.css」の中身をデフォルトテーマの「deeppurple-amber.css」と同内容にします。

node_modulesフォルダの中にある「@angular/material/prebuilt-themes/deeppurple-amber.css」を全選択&コピーし、「custom.css」に貼り付けます。

普通に全選択&コピーをしても整形されないので、CSSを整形した後貼り付けましょう。
https://lab.syncer.jp/Tool/CSS-PrettyPrint/

styles.cssの編集

読み込むCSSを変更します。

 

import先を「custom.css」に変更します。

カスタムテーマをいじってみる

あとは、「custom.css」内に定義されているカラーを変更することで、例えば、

  • Material Inputのアンダーライン色を変える
  • Material CheckBoxの背景色を変える

なんてことができます。

 

そもそも、デフォルトテーマを変えた時に色が変更される部分は、各テーマのCSSに色が定義されているということですし、それは編集可能ということを意味しています。

デフォルトテーマ自体はライブラリの中に定義されているので編集しないようにしましょう。
あくまで、独自で定義したCSSを編集するのが正しいやり方です。

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

まとめ

元々はテーマを変えたいというよりも、マテリアルデザインの色を変えたかったということから始まりました。

でも、どうやっても変わらない部分があったりしたのですが、よくよく考えるとデフォルトテーマを変更して色が変わる部分は、各テーマのCSSに定義されているということになります。

なら、独自でカスタムテーマを作れば、あとは好きにいじれるし、最高じゃね?っと思ったのです。

まあ、かなり強引なやり方ですが、色なんて変わればいいんですよ。

ということで、さいなら!

【Angular】テーマを超簡単にカスタマイズする方法!
フォローしてもらえると泣いて喜びます