vue.js 动态更改主题

gtlvzcf8  于 2023-01-26  发布在  Vue.js
关注(0)|答案(2)|浏览(208)

我最近把我的vuetify版本升级到了2.0。根据关于主题的新文档,我们需要在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的更新值?

s4n0splo

s4n0splo1#

我想你错过了切换被提到的部分。
...切换$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;
}
v09wglhw

v09wglhw2#

只是为了那些想用另一个主题来交换整个主题的人。文章https://betterprogramming.pub/changing-application-theme-dynamically-in-vuetify-js-c01d640699c4描述得很好,并使用以下逻辑来用一个完全不同的主题来交换主题:

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

相关问题