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