色の設定 (color, bg-color, class)
class
で指定する方法と color
prop で指定する方法があります。class
で指定する要素は以下の通りです。
-
v-
が先頭につかない要素。たとえばdiv
,p
,span
など - 領域を確保するための要素(
v-containers
,v-sheet
,v-form
など)。ただしv-card
はcolor
を使います。
上記以外の要素は color
や bg-color
を使います。color
で指定する場合は、それぞれの要素によって設定できるパーツが決まっているので、各要素のドキュメントを参考にしてください。
class で色を指定する方法
class
を使う場合、背景色は bg-
、テキストの色は text-
を色名の先頭につけます。たとえば、v-sheet
の背景色をred
にしてテキストの色を blue
にしたい時は、下記のようにします。
<template>
<v-sheet class="bg-red blue" width="100vw" height="100vh">
Vuetify3
</v-sheet>
</template>
背景色だけ指定してテキストの色を指定していない場合、テキストの色は背景にによって黒か白のどちらかに自動的に設定されます。
色の名前
色の名前は「ベースの色名」-「lighten/darken/accent」-「1から4の数字」という形で指定します。例えば red-lighten-2
とか deep-purple-darken-3
とかいう感じです。red
とか dark-purple
のように、ベース名だけでも色名として使えます。なお、色名の brown
, blue-grey
, grey
は accent
の色がありません。また、black
, white
, transparent
の色名は、単独でのみ使えます。
以下、使える色の組み合わせを背景色に設定して表示する例を載せておきます。
<template>
<v-container>
<v-row>
<v-col cols="3" v-for="(color, n) in colors" key="n" class="my-2">
<v-sheet :class="`bg-${color}`" height="5vh">
<span class="ma-3">{{ color }}</span>
</v-sheet>
<div v-for="(mod) in ['lighten', 'darken', 'accent']" key="mod">
<div v-for="(num) in [1,2,3,4]" key="num">
<v-sheet :class="`bg-${color}-${mod}-${num}`" height="5vh">
<span class="ma-3">{{color}}-{{mod}}-{{num}}</span>
</v-sheet>
</div>
</div>
</v-col>
<v-col cols="3" v-for="(color, n) in colors2" key="n" class="my-2">
<v-sheet :class="`bg-${color}`" height="5vh">
<span class="ma-3">{{ color }}</span>
</v-sheet>
<div v-for="(mod) in ['lighten', 'darken']" key="mod">
<div v-for="(num) in [1,2,3,4]" key="num">
<v-sheet :class="`bg-${color}-${mod}-${num}`" height="5vh">
<span class="ma-3">{{color}}-{{mod}}-{{num}}</span>
</v-sheet>
</div>
</div>
</v-col>
<v-col cols="3" class="my-2">
<v-sheet :class="`bg-${color}`" height="5vh" v-for="color in colors3" key="color">
<span class="ma-3">{{color}}</span>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data: () => ({
colors: [
'red', 'pink', 'purple','deep-purple','indigo','blue',
'light-blue','cyan','teal','green','light-green','lime',
'yellow','amber','orange','deep-orange'],
colors2: ['brown','blue-grey','grey'],
colors3: ['black','white','transparent'],
})
}
</script>
結果:
色の名前は下記に一覧があります。
RGBの値を直接指定したい場合は、後述のテーマで色名を定義する方法を使います。
色指定の例
<template>
<v-container>
<v-container class="bg-black text-indigo-lighten-5 my-3">
hogehoge
</v-container>
<v-card class="bg-purple darken-1 my-3">
HOGE
</v-card>
<v-btn color="red-darken-3 my-3">
HOGE1
</v-btn>
</v-container>
</template>
結果:
<v-btn>
でクラスを使って色を指定しようとしても、うまく反映されません。
テーマを使って色を指定する方法
テーマの機能を利用して、アプリ全体で統一された色 (primary, secondary など)を使うことができます。
<template>
<v-container>
<v-btn color="primary">Primary</v-btn>
<v-btn variant="outlined" color="error">Error</v-btn>
</v-container>
</template>
結果(テーマ light の場合):
結果(テーマ dark の場合):
テーマの指定や設定は /pulgins/vuetify.js
または src/plugins/vuetify.js
のいずれか存在するほうのファイル内で行います。
const vuetify = createVuetify({
...
theme: {
defaultTheme: 'dark' // 'light'
}
...
}
テーマの色をカスタマイズしたい場合は、下記のようにします。
const vuetify = createVuetify({
...
theme: {
themes: {
light: { // テーマ名
colors: { // 以下で色を指定する(下記はデフォルト色){
primary: '#1976D2',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107',
},
},
},
}
}
オリジナルのテーマを作って、それをデフォルトにしたい場合は、下記のようにします。下記では bbled
という名前のテーマを作って、それをデフォルトにしています。
色の名前は下記の例に沿う必要は特にありません。英数字以外の文字を色名に使いたいときは、下記の primary-darken-1
のようにクオーテーションで囲います。
const vuetify = createVuetify({
...
theme: {
defaultTheme: 'bbled',
themes: {
bbled: {
dark: false,
colors: {
background: '#FFFFFF',
surface: '#FFFFFF',
primary: '#6200EE',
'primary-darken-1': '#3700B3',
secondary: '#03DAC6',
'secondary-darken-1': '#018786',
error: '#B00020',
info: '#2196F3',
success: '#4CAF50',
warning: '#FB8C00',
}
},
}
}
}
<template>
<v-container>
<v-btn color="primary">Primary</v-btn>
<v-btn variant="outlined" color="error">Error</v-btn>
<v-btn color="secondary-darken-1">Secondary-Darken-1</v-btn>
</v-container>
</template>
参考
色についての公式ドキュメントは下記です。
テーマについてのドキュメントは下記です。