Search code examples
vue.jsvuetify.jsvuetifyjs3

Vuetify 3 - How to change theme dynamically?

I would like to change theme dynamically. I define a lightTheme and darkTheme li

export default createVuetify({
  theme: {
    defaultTheme: "lightTheme",
    themes: {
      lightTheme: {
        dark: false,
        colors: {
          primary: "#ad1c3d",
          "page-header-background": "#d7d7ce",
          "page-background": "#cdcdc1",
          "table-header": "#cdcdc1",
          background: "#c0c0b5",
          "header-background": "#b5b5a6",
          "info-text": "#666660",
        },
      },
      darkTheme: {
        dark: true,
        colors: {
          primary: "#52E3C2",
          "page-header-background": "#282831",
          "page-background": "#32323E",
          "table-header": "#2e2e2e",
          background: "#3F3F4A",
          "header-background": "#4a4a59",
          "info-text": "#99999F",
        },
      },
    },
  },
});

I can access the theme using this.$vuetify.theme however I can't find how I can change the theme at runtime. The method of doing this in Vuetify 2 is different. I can't find any examples with Vuetify 3.

What is the correct method of changing theme dynamically in Vuetify 3?

Solution

  • It looks like the documentation is incorrect. The documentation says to use

    this.theme.global.name.value = "themeName"

    but actually it's

    this.theme.global.name = "themeName"