[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](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で以下のように用いることができます。

```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"`とすれば利用可能です。