Accessing $vuetify instance property from vuex store

Question

I was using vuetify and wanted to change theme from vuex store using $vuetify instance but i got this error Cannot set property 'theme' of undefined"

here is my code

export default {
  getters: {},
  mutations: {
    toggleDarkTheme(state) {
      this.$vuetify.theme.primary = "#424242";
    }
  }
};

Answer 1

$vuetify is an instance property hence you can access any vue instance property using

Vue.prototype.$prop

For your case

import Vue from 'vue';
export default {
  getters: {},
  mutations: {
    toggleDarkTheme(state) {
      Vue.prototype.$vuetify.theme.primary = "#424242";
    }
  }
};

Answer 2

For Vuetify 2.0 you can try following method. (After following Vuetify 2.0 Upgrade guide for themes)

import Vuetify from './plugins/vuetify'

export default {
  getters: {},
  mutations: {
    toggleDarkTheme(state) {
      Vuetify.framework.theme.themes.light.primary = "#424242";
    }
  }

Answer 3

This one worked for me

...
toggleDarkTheme(state) {
   window.$nuxt.$root.$vuetify.theme.dark = true
}