[Nuxt.js]Vuetifyのテーマを用いる

Vuetifyのテーマを用いる

開発環境

package.json

"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に以下のように書かれています(上記のバージョン)。

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に追記します。

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に以下を加えます。

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がデフォルトでありますが、この通りに名前を指定する必要はありません。
そのため、

nuxt.config.js

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          btnBg: colors.blue.darken2
        },
        light: {
          btnBg: colors.grey.darken3
        }
      }
    }
  }

といった指定をすることも可能です。この場合も呼び出す時はcolor="btnBg"とすれば利用可能です。