VueプロジェクトでGoogle Analyticsに送るイベントをまとめる方法
2020/02/07
vue-cli + vuetifyのプロジェクトにカスタムテーマを設定する方法
2022/10/28
2019/06/07
はじめに
この記事では、vue-cliで作成したvuetify込みのプロジェクトにカスタムテーマを設定する方法をご紹介します。
ここで言うカスタムテーマとは、vertifyのプロジェクトで使用するカラーのことです。
環境
- macOS Mojave 10.14.5
- @vue/cli@3.7.0
前提
vue-cliを用いてプロジェクトの作成が完了しており、vuetifyの導入が完了していることを前提に説明します。
カスタムテーマ設定前の plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
Vue.use(Vuetify, {
iconfont: 'md',
})サイトの見た目
vuetifyが適用されていなかったり、サイトの見た目がこのサイトのサンプルと違う場合は、冒頭に紹介した構築までの手順を参考にしてみてください！
（バージョンの違いなどで作成されるプロジェクトに差異がある可能性もあります）
カスタムテーマを考える
早速カスタムテーマを設定していくのですが、まずはカラーなどを決める必要があります。
VUETIFY THEME GENERATOR
https://theme-generator.vuetifyjs.com/
このサイトでは、色を選択すると実際にUIに反映されてサイトの雰囲気を確認することができます。
また、vuetify.js に組み込むためのコードを出力することできます！
EXPORT を押すと以下のように組み込むためのコードが出力されます。
また、vuetifyで用意されているカラーネームを利用することもできます。
ただし、こちらのサイトで用意されている色のパターンは少ないため、次に紹介するサイトと併用することをお勧めします。
vuetifyで用意されているカラー
https://vuetifyjs.com/ja/framework/colors
このサイトでは、vuetify公式が用意しているカラーを確認することができます。
公式ということもあり、マテリアルデザインに沿ったカラーが豊富に用意されています。
基本的にはこのサイトをベースにしてサイトの配色を決めることをお勧めします。
参考：paletton
サイトの配色を決める際に参考になるサイトです。
色相環のポインタをドラッグすることで、バランスの良い配色パターンを確認することができます。
また、画像の下の方にある EXAMPLES… を押すことで、現在の配色パターンを用いたサイトを確認することができます。
ただし、こちらのサイトで生成したカラーはvuetifiyのマテリアルデザインには向いていないと思うので、あくまでvuetify公式で用意されているカラーを用いましょう。
plugins/vuetify.js の修正
カラーが無事に決まれば、実際にコードに導入していきます。
実はこの作業が一番簡単です。笑
plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/src/stylus/app.styl';
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
iconfont: 'md',
theme: {
primary: colors.indigo.base,
secondary: colors.purple.base,
accent: colors.cyan.base,
error: colors.red.base,
warning: colors.orange.base,
info: colors.lightBlue.base,
success: colors.green.base,
},
});ハイライトされてる部分を追加すれば完了です！
カラーコードを挿入する場合は、4行目のimport文は消してしまって構いません。
解説
解説というほどでもありませんが、修正したファイルを見た通りvuetifyでは基本的に 7色 で構成します。
このうち、12~15行目 はステータス（成功とか失敗とか注意とか）を示すカラーなので、サイトの配色自体は 3色 で構成します。
この3色の構成については、マテリアルデザインのガイドに沿っているので、気になる方はググってください（投げやり）
カスタムテーマの適用
plugins/vuetify.js の修正が完了したので、これでカスタムテーマを適用できる状態になりました。
実際にサンプルのコンポーネントにカラーを適用してみましょう。
App.vue
<template>
<v-app>
<v-toolbar app color="primary" dark>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
flat
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
>
<span class="mr-2">Latest Release</span>
</v-btn>
</v-toolbar>
<v-content>
<HelloWorld />
</v-content>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld';
export default {
name: 'App',
components: {
HelloWorld,
},
data() {
return {
//
};
},
};
</script>3行目 のv-toolbarコンポーネントにcolor属性とdark属性を追記しています。
これでカスタムテーマをツールバーに適用できたので、ローカル実行で確認してみましょう。
無事に適用することができました！
まとめ
vue-cliで作成したvuetify込みのプロジェクトにカスタムテーマを設定する方法をご紹介しました。
一番大変なのは、作りたいサービスに沿った配色を考えるということがわかりました。笑
参考
https://theme-generator.vuetifyjs.com/
