ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Vue向けに開発されているUIフレームワーク、Vuetifyは人気があります。UIコンポーネントも多く、サポートされているWebブラウザも幅広くなっています。しかしVuetifyを自在にカスタマイズできるデザイナーの方はまだ多くなく、Vuetify標準のUIに寄ってしまいがちです。

そこでせめて色だけでもカスタマイズしましょう。Vuetify Theme Generatorを使えばVuetify対応のカラーカスタマイズが簡単にできます。

Vuetify Theme Generatorの使い方

メイン画面です。左側で色を選択すると、プレビューに反映されます。

例えばプライマリカラーを紫にしました。

セカンダリーはブルー系に。

そんな感じでどんどん色を選んでいきます。

最後にエクスポートすればテーマカラーが生成されます。

Vuetify Theme Generatorを使うことでVuetifyのカラーリングを簡単にカスタマイズできます。プレビューがあることで、どこに反映される色なのかも理解しやすいです。デザイナーはもちろんプログラマーにとっても便利なツールでしょう。

Vuetify Theme GeneratorはVue製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Vuetify Theme Generator

vuetifyjs/theme-generator: Vuetify Theme Generator

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2