Changing Theme Dynamically

Question

I have recently upgraded my vuetify version to 2.0. According to new documentation about theme, we need to set dark in vuetify.js. I set the value of dark in vuex and when I update the variable, vuetify.js does not get the updated value.

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import store from '../store';

const { getters } = store;

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'md'
  },
  theme: {
    dark: getters.isDark
  }
});

How can I get the updated value of dark from vuex?

Answer 1

I think you missed the part where toggling is mentioned.

...Will dynamically change when toggling $vuetify.theme.dark...

You just need to set this.$vuetify.theme.dark = true/false in your function where you toggle the dark theme.

vuetify.js:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'md'
  },
  theme: {
    dark: false
  }
});

Function that should toggle the dark theme:

toggle(isDark) {
      this.$vuetify.theme.dark = isDark;
}

Answer 2

Just for the people which want to swap out the whole theme with another theme. The article https://betterprogramming.pub/changing-application-theme-dynamically-in-vuetify-js-c01d640699c4 depictures it quite nicely and uses the following logic to swap out the theme by a completely different theme:

    setTheme(theme) {
      // close menu
      this.menu = false;
      const name = theme.name;
      const dark = theme.dark;
      const light = theme.light;
      // set themes
      Object.keys(dark).forEach(i => {
        this.$vuetify.theme.themes.dark[i] = dark[i];
      });
      Object.keys(light).forEach(i => {
        this.$vuetify.theme.themes.light[i] = light[i];
      });
      // also save theme name to disable selection
      this.$vuetify.theme.themes.name = name;
    }
  }