Chapter 20無料公開

色の設定 (color, bg-color, class)

超Lチカ団編集局
超Lチカ団編集局
2024.01.08に更新

色の設定 (color, bg-color, class)

class で指定する方法と color prop で指定する方法があります。class で指定する要素は以下の通りです。

  • v- が先頭につかない要素。たとえば div, p, span など
  • 領域を確保するための要素(v-containers, v-sheet, v-formなど)。ただし v-cardcolor を使います。

上記以外の要素は colorbg-color を使います。color で指定する場合は、それぞれの要素によって設定できるパーツが決まっているので、各要素のドキュメントを参考にしてください。

class で色を指定する方法

class を使う場合、背景色は bg-、テキストの色は text- を色名の先頭につけます。たとえば、v-sheet の背景色をred にしてテキストの色を blue にしたい時は、下記のようにします。

sample.jpg

<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>

結果:

color.jpg
color.jpg
color.jpg
color.jpg
color.jpg

色の名前は下記に一覧があります。

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>

結果:

image.png

<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 の場合):
image.png

結果(テーマ dark の場合):
image.png

テーマの指定や設定は /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>

image.png

参考

色についての公式ドキュメントは下記です。

テーマについてのドキュメントは下記です。