Vuetifyのマテリアルカラーパレットでオリジナルの色を作りたいとき
今回はVuetifyのマテリアルカラーパレットでオリジナルの色を作りたいときどのようにすれば良いのかについてご紹介いたします。
Vuetifyのマテリアルカラーパレットでオリジナルの色を作りたいとき
Vuetifyのマテリアルカラーパレットでオリジナルの色を作りたいときがあると思います。
マテリアルカラーパレットは「red lighten-5」や「purple darken-1」といった色ですね。
クライアントからの依頼で、マテリアルカラーパレットにないカラーコードを持つ色を使いたいときどのようにすれば良いのかについてお伝えいたします。
結論を言うと、basic.scssやcommon.cssに
|
1 2 3 4 |
.sample-color { background-color: #F44336 !important; border-color: #F44336 !important; } |
のようにCSSを定義して、「red lighten-5」や「purple darken-1」の代わりにsample-colorのCSSを定義してやりましょう。
これであらかじめ用意されたマテリアルカラーパレットの他にオリジナルのCSSを定義できるはずです。
終わりに
今回はVuetifyのマテリアルカラーパレットでオリジナルの色を作りたいときどのようにすれば良いのかについてご紹介いたしました。