title: Vuetify toggle between light and dark theme (with vuex)
body: <p>so in my Vue-project I basically have two pages/components that will be shown with the use of vue-router depending on the URL. I can switch between those pages/components via a button.</p>
  <p>I am also using VueX for the management of some data.</p>
  <p>Now I included a switch in one of the components to toggle between a dark and a light theme from Vuetify.</p>
  <p>In the template for this component I do:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;v-switch
        label=&quot;Toggle dark them&quot;
        @change=&quot;toggleDarkTheme()&quot;
      &gt;&lt;/v-switch&gt;
  </code></pre>
  <p>And in the function that gets called I do:</p>
  <pre class="lang-js prettyprint-override"><code>    toggleDarkTheme() {
            this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
            console.log(this.$vuetify.theme.dark);
      },
  </code></pre>
  <p>In app.vue I have included the <code>&lt;v-app dark&gt;</code> and in my main.js i have the following:</p>
  <pre class="lang-js prettyprint-override"><code>    Vue.use(Vuetify);
      const vuetify = new Vuetify({
        theme: {
          // dark: true,
          themes: {
            light: {
              primary: colors.purple,
              secondary: colors.grey.darken1,
              accent: colors.shades.black,
              error: colors.red.accent3,
              background: colors.indigo.lighten5, 
            },
            dark: {
              primary: colors.blue.lighten3,
              background: colors.indigo.base,
            },
          },
        },
      });
      
      Vue.config.productionTip = false;
      
      new Vue({
        router,
        store,
        vuetify,
        render: (h) =&gt; h(App),
      }).$mount('#app');
  </code></pre>
  <p>So my problem now is, when I click the switch, the theme is indeed toggled from light to dark mode in this component. Light mode is the default and when I click the switch once, I get dark theme. However when I click the button to switch to the other URL, there the light theme will be used.
  How do I implement this feature correctly?</p>
  <p>Thanks in advance!</p>