前置き
Angular Material の公式サイトを見たところ、動的にテーマを切り替えていた。
これに習って自分のAngular アプリでもテーマを動的に変えられるようにしたので、その時のメモがこちら。
本編
Angular Material の公式サイトではどうやって動的にテーマを変えているのか？
結論としては、document経由でスタイルシートのリンクを書き換えていた。
↓のコンポーネントがそれ
内部で↓を呼び出してリンクを書き換えている。
なお、PrimeNG にはテーマの切り替え方の動画があった。
やり方としては↑と同じ。
Angular のCSS バンドル設定
↑で切り替え方は分かったが、どうやってそのCSS を準備するのか？
個別準備するのは大変だしと思ってAngular Material のソースを見たら↓のようにしていた。
{
"inject": false,
"input": "src/styles/custom-themes/magenta-violet.scss",
"bundleName": "magenta-violet"
},
angular.json の設定をしてやれば、一緒にバンドルしてくれるようだ。
おまけ
↑を踏まえて自分のサイトに手を入れた内容が↓。
自分のAngular アプリでは、PrimeNG を使用している。
PrimeNG にはいくつものテーマが用意されているのでそれを使う。
まず、使うテーマを@import しただけCSS を用意し、バンドルするようにした。
次に、全部見たわけではないけど、ぱっと見--primary-colorというカスタムプロパティに主な色が設定されているのを確認した。
なので、これを使ってPrimeNG 以外の色を書き換える。
今回は--main-colorというカスタムプロパティに一旦入れ、color-mix()関数を使いバリエーションを作り、それを使いまわした。
テーマ切り替えに↓のコンポーネントを作成した。
やってることは大分簡略したけど、Angular Material の公式サイトとほぼ同じ。
感想
楽しかった。
特に色が大きく変わるので触っていて面白かった。
今回の記事は以上です。
前回記事はこちら
詳細見たい人はこちら