（以前社内ブログに投稿していた記事の再掲です）
やりたいこと
アプリケーションのデフォルトのテーマカラーをカスタマイズしたいと思います。
これを設定しておくことで、アプリケーションの背景色を自動で設定できたり、コンポーネントの色指定等で統一感を持たせやすくなります。
手順
事前にVeutify3 Betaの環境構築がされていることを前提として進めていきます。
大まかな手順は公式サイトの通りです。
１．vuetify.tsを作成
まず、pluginsディレクトリにvuetify.tsファイルを作成します。
内容は以下の通りです。
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
export default createVuetify({
theme: {
defaultTheme: 'dark'
}
})
２．plugins.jsの内容を修正
現在plugins.jsの内容は以下のようになっていると思います。
これを手順1でvuetify.tsで記述したcreateVuetifyに統合していきます。
import { defineNuxtPlugin } from '#app'
import { createVuetify } from 'vuetify'
import * as appAll from 'vuetify/components'
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
components: {
...appAll
}
})
nuxtApp.vueApp.use(vuetify)
})
まずは以下のようにplugins.jsにvuetify.tsを呼び出すように変更します。
import { defineNuxtPlugin } from '#app'
import Vuetify from './vuetify'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Vuetify)
})
そしてvuetify.tsの内容を以下のように変更します。
import { createVuetify , ThemeDefinition } from 'vuetify'
import * as appAll from 'vuetify/components'
export default createVuetify({
components: {
...appAll
},
theme: {
defaultTheme: 'dark'
}
})
これで色をvuetify.tsで定義することができるようになりました。
３．実際に色を設定する
実際にテーマカラーを設定していきます。
以下のようにテーマカラーを設定して、デフォルトでそのテーマを使用するように記述しておきます。
background , primaryなどの他にも、任意の色を追加することが出来ます。（ex. mycolor）
import { createVuetify , ThemeDefinition } from 'vuetify'
import * as appAll from 'vuetify/components'
const myCostomLightTheme: ThemeDefinition = {
dark: false,
colors: {
background: '#dcdcdc',
primary: '#FF0000',
secondary: '#00FF00',
mycolor: '#0000FF'
}
}
export default createVuetify({
components: {
...appAll
},
theme: {
defaultTheme: 'myCostomLightTheme',
themes: {
myCostomLightTheme,
}
}
})
実際に使用すると以下のような感じになります。
<v-row justify="center" align="center">
<v-card
width="500"
*class*="ma-16 pa-5"
>
<h1>sample card</h1>
<v-card-text>
sample card text.
</v-card-text>
<v-card-actions *class*="justify-end" >
<v-btn variant="contained" elevation="3" color="primary">button1</v-btn>
<v-btn variant="contained" elevation="3" color="mycolor">button2</v-btn>
</v-card-actions>
</v-card>
</v-row>
特に指定しなくても背景色がグレーになっており、ボタンの色がテーマで指定した通りの色になっていることが確認できると思います。
４．複数テーマを使用したいとき
ダークテーマもカスタムしておきたい場合や、その他のテーマも用意したい場合があると思います。
そういう時は、vuetify.tsに先程同様テーマを作成して登録しておけばOKです。
ダークテーマとしてmyCostomDarkTheme、別テーマとしてmyCostomThemeを以下のように追加してみました。
import { createVuetify , ThemeDefinition } from 'vuetify'
import * as appAll from 'vuetify/components'
const myCostomLightTheme: ThemeDefinition = {
dark: false,
colors: {
background: '#dcdcdc',
primary: '#FF0000',
secondary: '#00FF00',
mycolor: '#0000FF'
}
}
const myCostomDarkTheme: ThemeDefinition = {
dark: true,
colors: {
background: '#000000',
primary: '#0000FF',
secondary: '#00FF00',
mycolor: '#FF0000'
}
}
const myCostomTheme: ThemeDefinition = {
dark: false,
colors: {
background: '#B0C4DE',
primary: '#0060DE',
secondary: '#DE0F00',
mycolor: '#CFDE00'
}
}
export default createVuetify({
components: {
...appAll
},
theme: {
defaultTheme: 'myCostomLightTheme',
themes: {
myCostomLightTheme,
myCostomDarkTheme,
myCostomTheme
}
}
})
全体に適用させたいので、v-appのthemeプロパティにテーマ名を指定します。
<template>
<v-app theme="myCostomDarkTheme">
<NuxtPage />
</v-app>
</template>
勿論、もう一つのテーマも同様にすれば適用できます。
<template>
<v-app theme="myCostomTheme">
<NuxtPage />
</v-app>
</template>
これで複数テーマを使用することが出来ます。
補足
アイコンを使用している方は、vuetify.tsに以下のように追記してください。
使用方法は通常通りです。
import { createVuetify , ThemeDefinition } from 'vuetify'
import * as appAll from 'vuetify/components'
import '@mdi/font/css/materialdesignicons.css'
const myCostomLightTheme: ThemeDefinition = {
dark: false,
colors: {
background: '#FFFFFF',
primary: '#000000',
secondary: '#00FF00',
}
}
export default createVuetify({
components: {
...appAll
},
icons: {
defaultSet: 'mdi',
sets: {}
},
theme: {
defaultTheme: 'myCostomLightTheme',
themes: {
myCostomLightTheme,
}
}
})
以上でVuetifyのテーマカラーをカスタマイズすることが出来ました！是非参考にしてみてください。