Vuetify Theme Generator を使って Vue アプリのテーマカラーを設定してみた

VuetifyLogo
プログラム

Vue でアプリ作る時に便利な Vuetify

VuetifyLogo

Vue で Web アプリケーションを作ろうと思ってるんですが、CSS は不得手なものでそこに時間をかけるよりは UI フレームワークを活用した方が挫折が少なそうなので、Vuetify をチョイスしました。ボタン等の細かな UI コンポーネントはもちろんのこと、ツールバー、フッターやツリービューまで用意されてます。vue ファイルの template 部分でコンポーネント名を指定したタグを書くだけで適用できるので非常にサクッとイマドキのデザインが適用できちゃいます。

Vuetify のテーマカラーを設定したい

そんな便利な Vuetify ですが、既存のカラーではなく、アプリ独自のテーマカラーを適用したくなってきます。テーマカラーを検討する上で便利そうなツールがあったので試してみました。それが Vuetify Theme Generator です。

VuetifyThemeGenerator

ページ内で表示されているカラーを、primary、secondary、accent、error、warning、info、success の7つ指定することで、テーマ指定用の JSON データ・コードが出力されます。

themeCode

カラーの指定は簡単だけどハマりポイントがある

この出力されたデータをそのまま使えばいいかと思いきや、そのまま利用できない残念な部分があったので記録しておきます。

HexCode の罠

デフォルトで表示される HexCode 版のコードですが、以下の様に出力されます。

{
primary: #673ab7,
secondary: #cddc39,
accent: #e91e63,
error: #f44336,
warning: #9c27b0,
info: #03a9f4,
success: #3f51b5
}

ただ、実際にコード内でカラーを指定する場合は、16進数のカラーコード部分を文字列にする必要があるので、

{
primary: ‘#673ab7’,
secondary: ‘#cddc39’,
accent: ‘#e91e63’,
error: ‘#f44336’,
warning: ‘#9c27b0’,
info: ‘#03a9f4’,
success: ‘#3f51b5’
}

という形で出力されてほしいなぁ。

カラーネーム指定の罠

Hex 指定をせずに、Vuetify で指定できるカラーネームを指定する形式でも出力が可能です。ただ、こちらも少し問題を抱えている様です。

import colors from ‘vuetify/es5/util/colors’
{
primary: colors.deep-purple.base,
secondary: colors.lime.base,
accent: colors.pink.base,
error: colors.red.base,
warning: colors.purple.base,
info: colors.light-blue.base,
success: colors.indigo.base
}

通常は、これを theme.js として保存し、Vue.use を書いているコード(/src/plugins/vuetify.js など)で読み込みするのですが、上記のコードをそのまま読み込むとエラーが出ます。
内容を確認する限り、「colors.deep-purple.base なんて定義は存在しねぇよ」という事の様です。import で指定されている vuetify/es5/util/colors を確認すると確かにその様な定義はなく、「colors.deepPurple.base」が正解でした。他にも定義が異なるカラーがあるのでその部分は修正が必要な様です。

まとめ

ちょっと使ってみた感じでは Vuetify Theme Generator は、新しい Vuetify の定義と乖離があったり、微修正が必要だったりするので「非常に便利」とは言い辛い状態ではあります。サイト内でアプリのテーマ適用イメージを確認できる点は良いですが、メインカラーの2色以外のエラー・インフォメーション・成功などのカラーもプレビューできないと利用する必要性はちょっと下がるなぁ、という印象でした。

コメントはまだありません

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

プログラム
AWS 利用料支払いをクレジットカードで出来なかった件

とある昼下がりの午後(だったかは定かではない)に一通のメールが届きました。 タイトルはこんな感じです …

プログラム
ファイルを読み込む html/JavaScript をローカル環境で実行したかった件

ローカル環境で html/JavaScript を書いている機会が増えて、色々と詰まったところがあっ …

プログラム
既存のローカルプロジェクトを GitHub に移行する時にハマったメモ

現在ローカルで作成中のウェブアプリ(Rails アプリ)を GitHub でバージョン管理しようと思 …