动态改变主题

Question

我最近将 vuetify 版本升级到 2.0。根据有关主题的新文档，我们需要设置dark为vuetify.js. 我在 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
  }
});

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

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