Vuetify3でダークテーマに切り替える

Vue3でsetup scriptを使っている場合に、Vuetifyのグローバルテーマを切り替える方法を紹介します。

Vuetify3のテーマにアクセスする

Vuetify3では、グローバル設定にアクセスするために、useThemeを使います。
theme.global.name.valueにアクセスすることで、グローバルテーマの名前を取得できます。
この値をlightかdarkに変更することで、グローバルテーマを切り替えることができます。

import { useTheme } from 'vuetify'

const theme = useTheme()
console.log(theme.global.name.value)

また、テーマの設定はcreateVuetifyで行います。
lightやdark以外にも設定可能で、自分で色を定義することもできます。
Vuetify3公式ドキュメントを参考にしてインストールした場合、src\plugins\vuetify.jsに設定が書かれています。

実装例

ダークモード

ライトモード

ソースコード

<template>
  <v-app-bar flat>
    <v-app-bar-title>
      <v-icon icon="mdi-calculator-variant" />

      Title
    </v-app-bar-title>

    <!-- dark theme switch -->
    <template v-slot:append>
      <v-switch
        v-model="darkTheme"
        @update:model-value="changeTheme"
        :prepend-icon="darkTheme ? 'mdi-weather-night' : 'mdi-weather-sunny'"
        hide-details
        inset
        class="mr-auto"
      />
    </template>
  </v-app-bar>
</template>

<script setup>
import { ref } from 'vue'
import { useTheme } from 'vuetify'

const darkTheme = ref(false)
const theme = useTheme()

const changeTheme = () => {
  theme.global.name.value = darkTheme.value ? 'dark' : 'light'
}
</script>

参考

• https://vuetifyjs.com/en/features/theme/
• https://vuetifyjs.com/en/api/use-theme/