Vuetify3 Betaでvuetify.tsを使ってテーマカラーをカスタマイズする

（以前社内ブログに投稿していた記事の再掲です）

# **やりたいこと**

アプリケーションのデフォルトのテーマカラーをカスタマイズしたいと思います。

これを設定しておくことで、**アプリケーションの背景色を自動で設定**できたり、**コンポーネントの色指定等で統一感**を持たせやすくなります。

# **手順**

事前にVeutify3 Betaの環境構築がされていることを前提として進めていきます。

大まかな手順は[公式サイト](https://next.vuetifyjs.com/en/features/theme/#setup)の通りです。

### **１．vuetify.tsを作成**

まず、pluginsディレクトリにvuetify.tsファイルを作成します。

内容は以下の通りです。

```vuetify.ts
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'dark'
  }
})
```

### **２．plugins.jsの内容を修正**

現在`plugins.js`の内容は以下のようになっていると思います。

これを手順1で`vuetify.ts`で記述したcreateVuetifyに統合していきます。

```plugins.js
import { defineNuxtPlugin } from '#app'
import { createVuetify } from 'vuetify'
import * as appAll from 'vuetify/components'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
	  components: {
      ...appAll
    }
  })
  nuxtApp.vueApp.use(vuetify)
})
```

まずは以下のようにplugins.jsにvuetify.tsを呼び出すように変更します。

```vuetify.ts
import { defineNuxtPlugin } from '#app'
import Vuetify from './vuetify'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vuetify)
})
```

そしてvuetify.tsの内容を以下のように変更します。

```vuetify.ts
import { createVuetify , ThemeDefinition } from 'vuetify'
import * as appAll from 'vuetify/components'

export default createVuetify({
  components: {
    ...appAll
  },
  theme: {
    defaultTheme: 'dark'
  }
})
```

これで色をvuetify.tsで定義することができるようになりました。

### **３．実際に色を設定する**

実際にテーマカラーを設定していきます。

以下のようにテーマカラーを設定して、デフォルトでそのテーマを使用するように記述しておきます。

background , primaryなどの他にも、任意の色を追加することが出来ます。（ex. mycolor）

```vuetify.ts
import { createVuetify , ThemeDefinition } from 'vuetify'
import * as appAll from 'vuetify/components'

const myCostomLightTheme: ThemeDefinition = {
  dark: false,
  colors: {
    background: '#dcdcdc',
    primary: '#FF0000',
    secondary: '#00FF00',
    mycolor: '#0000FF'
  }
}

export default createVuetify({
  components: {
    ...appAll
  },
  theme: {
    defaultTheme: 'myCostomLightTheme',
    themes: {
      myCostomLightTheme,
    }
  }
})
```

実際に使用すると以下のような感じになります。

```sample.vue
<v-row justify="center" align="center">
  <v-card
  width="500"
    *class*="ma-16 pa-5"
  >
    <h1>sample card</h1>
    <v-card-text>
      sample card text. 
    </v-card-text>
    <v-card-actions *class*="justify-end" >
      <v-btn variant="contained" elevation="3" color="primary">button1</v-btn>
      <v-btn variant="contained" elevation="3" color="mycolor">button2</v-btn>
    </v-card-actions>
  </v-card>
</v-row>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3681767/13feb344-c388-db60-b087-7e308ffe2de6.png)

特に指定しなくても背景色がグレーになっており、ボタンの色がテーマで指定した通りの色になっていることが確認できると思います。

### **４．複数テーマを使用したいとき**

ダークテーマもカスタムしておきたい場合や、その他のテーマも用意したい場合があると思います。

そういう時は、`vuetify.ts`に先程同様テーマを作成して登録しておけばOKです。

ダークテーマとして`myCostomDarkTheme`、別テーマとして`myCostomTheme`を以下のように追加してみました。

```vuetify.ts
import { createVuetify , ThemeDefinition } from 'vuetify'
import * as appAll from 'vuetify/components'

const myCostomLightTheme: ThemeDefinition = {
  dark: false,
  colors: {
    background: '#dcdcdc',
    primary: '#FF0000',
    secondary: '#00FF00',
    mycolor: '#0000FF'
  }
}

const myCostomDarkTheme: ThemeDefinition = {
  dark: true,
  colors: {
    background: '#000000',
    primary: '#0000FF',
    secondary: '#00FF00',
    mycolor: '#FF0000'
  }
}

const myCostomTheme: ThemeDefinition = {
  dark: false,
  colors: {
    background: '#B0C4DE',
    primary: '#0060DE',
    secondary: '#DE0F00',
    mycolor: '#CFDE00'

  }
}

export default createVuetify({
  components: {
    ...appAll
  },
  theme: {
    defaultTheme: 'myCostomLightTheme',
    themes: {
      myCostomLightTheme,
      myCostomDarkTheme,
      myCostomTheme
    }
  }
})
```

全体に適用させたいので、v-appのthemeプロパティにテーマ名を指定します。

```sample.vue
<template>
  <v-app theme="myCostomDarkTheme">
    <NuxtPage />
  </v-app>
</template>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3681767/8c54970c-b71c-1768-27d0-3a98eee23879.png)

勿論、もう一つのテーマも同様にすれば適用できます。

```sample.vue
<template>
  <v-app theme="myCostomTheme">
    <NuxtPage />
  </v-app>
</template>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3681767/382c9166-7b3b-17c5-fdcb-cad9e3944047.png)

これで複数テーマを使用することが出来ます。

### **補足**

アイコンを使用している方は、`vuetify.ts`に以下のように追記してください。

使用方法は通常通りです。

```vuetify.ts
import { createVuetify , ThemeDefinition } from 'vuetify'
import * as appAll from 'vuetify/components'
import '@mdi/font/css/materialdesignicons.css'

const myCostomLightTheme: ThemeDefinition = {
  dark: false,
  colors: {
    background: '#FFFFFF',
    primary: '#000000',
    secondary: '#00FF00',
  }
}

export default createVuetify({
  components: {
    ...appAll
  },
  icons: {
    defaultSet: 'mdi',
    sets: {}
  },
  theme: {
    defaultTheme: 'myCostomLightTheme',
    themes: {
      myCostomLightTheme,
    }
  }
})
```

以上でVuetifyのテーマカラーをカスタマイズすることが出来ました！是非参考にしてみてください。

# **参考**

[https://next.vuetifyjs.com/en/features/theme/](https://next.vuetifyjs.com/en/features/theme/)