β版の Vue.js（Vue3）+ TypeScript + Vuetify3 + Vite の構成で、動的にテーマを切り替える方法です。
いわゆるダークモードへの切り替えです。
結論として以下のリンクを辿ればできますが、プロジェクトの作成から手順を置いておきます。
記述時点では以下の構成で行っています。
- vue-cli: 5.0.4
- Vuetify 3 Beta#Installation の注意書きより、Vuetify 3を正しくインストールするためには vue-cli は 5.0 以上にする必要があります。
- vite: 2.9.9
- vue: 3.2.25
- vuetify: 3.0.0-beta
- typescript: 4.5.4
プロジェクトの作成
Viteプロジェクトを作成します。
npm create vite@latest
プロジェクト名を入力します。
? Project name: » vue3-ts-vuetify-changing-theme
vue を選択します。
? Select a framework: » - Use arrow-keys. Return to submit.
vanilla
> vue
react
preact
lit
svelte
vue-ts を選択します。
? Select a variant: » - Use arrow-keys. Return to submit.
vue
> vue-ts
プロジェクトが作成されました。
Done. Now run:
cd vue3-ts-vuetify-changing-theme
npm install
npm run dev
上記の案内がありますが、先にプロジェクトへ移動してVuetifyを追加します。
cd vue3-ts-vuetify-changing-theme
vue add vuetify
Vite Preview (Vuetify 3 + Vite) を選択します。
✔ Successfully installed plugin: vue-cli-plugin-vuetify
? Choose a preset:
Configure (advanced)
Default (recommended)
> Vite Preview (Vuetify 3 + Vite)
Prototype (rapid development)
Vuetify 3 Preview (Vuetify 3)
これで完了です。
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify
サーバを起動します。
npm run dev
表示の通り http://localhost:3000/ へアクセスします。
> vue3-ts-vuetify-changing-theme@0.0.0 dev
> vite
vite v2.9.9 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 378ms.
テーマの動的な切り替え
この時点で App.vue は以下の状態です。
App.vue
<template>
<v-app>
<v-main>
<HelloWorld/>
</v-main>
</v-app>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
export default defineComponent({
name: 'App',
components: {
HelloWorld,
},
data () {
return {
//
}
},
})
</script>
Vuetify 3 Beta#Changing theme を参考に修正します。
リンク先とは異なり、以下は script setup で書いています。
App.vue
<template>
<v-app :theme="theme">
<v-main>
<v-btn @click="toggleTheme">toggle theme</v-btn>
<HelloWorld/>
</v-main>
</v-app>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
const theme = ref('light')
const toggleTheme = () => theme.value = theme.value === 'light' ? 'dark' : 'light'
</script>
ボタンで動的にテーマを切り替えられるようになりました。
テーマの更新
新しいテーマの追加や、既存の light 、 dark テーマの更新は Vuetify 3 Beta#Setup に記載されています。
例えば以下のように light テーマを更新すると、背景色やボタンの色が更新されます。
vuetify.ts
import { createVuetify } from 'vuetify'
const light = {
dark: false,
colors: {
background: '#808080',
surface: '#6200EE',
primary: '#6200EE',
'primary-darken-1': '#3700B3',
secondary: '#03DAC6',
'secondary-darken-1': '#018786',
error: '#B00020',
info: '#2196F3',
success: '#4CAF50',
warning: '#FB8C00',
}
}
const dark = {
dark: true,
colors: {
}
}
export default createVuetify({
theme: {
defaultTheme: 'light',
themes: {
light,
dark
}
}
})
