动态更改主题

Question

我最近将我的 vuetify 版本升级到了 2.0。根据new documentation about theme，我们需要在vuetify.js中设置dark。我在vuex中设置了dark的值，当我更新变量时，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';
import store from '../store';

const { getters } = store;

Vue.use(Vuetify);

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

如何从 vuex 获取 dark 的更新值？

Answer 1

我想你错过了提到切换的部分。

...切换$vuetify.theme.dark...时会动态变化...

您只需要在您切换深色主题的函数中设置this.$vuetify.theme.dark = true/false。

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
  }
});

应该切换深色主题的功能：

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