Vuetifyのテーマを用いる
開発環境
"dependencies": {
"nuxt": "^2.0.0"
},
"devDependencies": {
"@nuxtjs/vuetify": "^1.0.0"
}
インストールの際は以下のどちらかのコマンドを用い、UIコンポーネントにVuetifyを選択します。
npx create-nuxt-app <project-name>
yarn create nuxt-app <project-name>
Vuetifyのテーマ
Vuetifyにはデフォルトでテーマが設定されており、クラス名で指定したり、Vuetifyのコンポーネントでcolorというpropsを用いることによって色を指定できます。Nuxt.jsでは、Vuetifyのテーマはnuxt.config.jsに以下のように書かれています(上記のバージョン)。
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
}
ここでdark: trueの部分でテーマをダークモードかライトモードかを選択でき、trueだとダークテーマとなります。また、primary: colors.blue.darken2の記述ではVuetifyで決められたカラーパレットの色が指定されています（参考URL：https://vuetifyjs.com/ja/styles/colors）もちろん、色コードをprimary: #F44336と指定することも可能です。ただし、執筆している現在のところ(2020/2月)rgb(0, 0, 0), rgba(0, 0, 0, 0), #ffffff00といった形で指定すると[Vuetify] 'rgb(100, 100, 100)' is not a valid rgb colorといったエラーがでます。そのため、透明度のある色はここからは設定できないようです。
ライトテーマも利用したい時は、nuxt.config.jsに追記します。
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
},
/*以下追加*/
light: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
}
これで、dark: flaseとするとライトテーマで指定した色を利用できます。
テーマの利用
テーマの色は、Vuetifyのコンポーネントと、一般のhtmlタグどちらでも利用することが可能です。
たとえば、v-cardというコンポーネントでは、
<template>
<v-card color="primary">
</v-card>
</template>
とすると適応されます。またhtmlタグではclass名を指定することでテキストや背景に色を利用します。公式のドキュメントに書いていますので参考にしてください。
darkとlightのテーマをイベントによって切り替えたい場合は、this.$vuetify.theme.darkに真偽値を代入することによって切り替えが可能です。
テーマをCSSで利用する
テーマをCSSでも利用できるようにするにはnuxt.config.jsに以下を加えます。
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
},
light: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
},
/*以下追加*/
options: {
customProperties: true
}
}
}
これによって、CSSで以下のように用いることができます。
<style>
.example {
color: var(--v-primary-base);
background-color: var(--v-accent-lighten2);
}
</style>
テーマのカスタマイズ
テーマ名は、primary, accent, secondary, info, warning, error, successがデフォルトでありますが、この通りに名前を指定する必要はありません。
そのため、
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: true,
themes: {
dark: {
btnBg: colors.blue.darken2
},
light: {
btnBg: colors.grey.darken3
}
}
}
}
といった指定をすることも可能です。この場合も呼び出す時はcolor="btnBg"とすれば利用可能です。