🌙
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>
Discussion