动态改变主题 [英] Changing Theme Dynamically

问题描述

我最近将我的 vuetify 版本升级到了 2.0.根据关于主题的新文档，我们需要设置vuetify.js 中的 >dark.我在 vuex 中设置了 dark 的值，当我更新变量时，vuetify.js 没有得到更新的值.

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

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

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

推荐答案

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

I think you missed the part where toggling is mentioned.

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

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

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

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

这篇关于动态改变主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！