Vuetifyのマテリアルカラーパレットでオリジナルの色を作りたいとき

今回はVuetifyのマテリアルカラーパレットでオリジナルの色を作りたいときどのようにすれば良いのかについてご紹介いたします。



Vuetifyのマテリアルカラーパレットでオリジナルの色を作りたいとき

Vuetifyのマテリアルカラーパレットでオリジナルの色を作りたいときがあると思います。
マテリアルカラーパレットは「red lighten-5」や「purple darken-1」といった色ですね。

クライアントからの依頼で、マテリアルカラーパレットにないカラーコードを持つ色を使いたいときどのようにすれば良いのかについてお伝えいたします。

結論を言うと、basic.scssやcommon.cssに

のようにCSSを定義して、「red lighten-5」や「purple darken-1」の代わりにsample-colorのCSSを定義してやりましょう。

これであらかじめ用意されたマテリアルカラーパレットの他にオリジナルのCSSを定義できるはずです。

終わりに

今回はVuetifyのマテリアルカラーパレットでオリジナルの色を作りたいときどのようにすれば良いのかについてご紹介いたしました。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






Veutify

Posted by ちこ