Dynamically change the selected theme

[Michael2109]

I would like to change the theme after a user clicks a button.

To do so I create 2 themes.

export default createVuetify({
  mobileBreakpoint: "sm",
  theme: {
    defaultTheme: "lightTheme",
    themes: {
      lightTheme: {
        dark: false,
        colors: {
          "app-background": "#F2F3F6"
        },
      },
      darkTheme: {
        dark: true,
        colors: {
          primary: "#52E3C2",
          "app-background": "#000000"
        },
      },
    },
  },
});

I then update it using

const theme = useTheme();

theme.global.name = darkMode ? "darkTheme" : "lightTheme";

I thought I had this working fine but it appears not. I can't find anything in the documentation specifying how to do this for Vuetify 3.

How can I dynamically change the selected theme?

[hslee2008]

theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'

Should do the trick.

[santiagoaloi]

If you are using a store, you could just bind the theme prop in v-app to your theme name.

<template>
  <AuthProvider>
    <VApp :theme="currentTheme">
      <GAppBar />
      <router-view />
      <GSnackbar />
    </VApp>
  </AuthProvider>
</template>

<script setup>
// 👉 pinia appStore.currentTheme is persisted.
// 👉 currentTheme values are light / dark
// 👉 toRefs is needed so reactivity continues in destructure.

const { currentTheme } = toRefs(useAppStore())
</script>

[KaelWD]

I don't recommend setting it on VApp, only theme.global will change the page's color-scheme

[velly]

You store the them, and just use it with theme-provider.
You can just change the theme from store actions.

<v-app>
      <v-theme-provider :theme="themeModeStore.curThemeMode">
        <v-main>
          <router-view />
        </v-main>
      </v-theme-provider>
    </v-app>