Vuetify在浅色和深色主题之间切换(使用vuex)

6ie5vjzr  于 2023-05-29  发布在  Vue.js
关注(0)|答案(3)|浏览(213)

所以在我的Vue-project中,我基本上有两个页面/组件,它们将根据URL使用vue-router显示。我可以通过一个按钮在这些页面/组件之间切换。
我也使用VueX来管理一些数据。
现在,我在其中一个组件中添加了一个开关,用于在Vuetify的黑暗和光明主题之间切换。
在此组件的模板中,我执行以下操作:

<v-switch
      label="Toggle dark them"
      @change="toggleDarkTheme()"
    ></v-switch>

在调用的函数中,我这样做:

toggleDarkTheme() {
          this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
          console.log(this.$vuetify.theme.dark);
    },

在app.vue中,我包含了<v-app dark>,在我的main.js中,我有以下内容:

Vue.use(Vuetify);
    const vuetify = new Vuetify({
      theme: {
        // dark: true,
        themes: {
          light: {
            primary: colors.purple,
            secondary: colors.grey.darken1,
            accent: colors.shades.black,
            error: colors.red.accent3,
            background: colors.indigo.lighten5, 
          },
          dark: {
            primary: colors.blue.lighten3,
            background: colors.indigo.base,
          },
        },
      },
    });
    
    Vue.config.productionTip = false;
    
    new Vue({
      router,
      store,
      vuetify,
      render: (h) => h(App),
    }).$mount('#app');

所以我现在的问题是,当我点击开关时,主题确实在这个组件中从亮模式切换到暗模式。灯光模式是默认的,当我点击开关一次,我得到黑暗的主题。但是,当我单击按钮切换到其他URL时,将使用灯光主题。如何正确实现此功能?
先谢谢你了!

5w9g7ksd

5w9g7ksd1#

你应该有一个名为vuetify.js的JavaScript类,在你的例子中应该是这样的。

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
        background: colors.indigo.lighten5
      },
      dark: {
        primary: colors.blue.lighten3,
        background: colors.indigo.base
      }
    }
  }
});

你的开关应该可以工作了,但为了以防万一,试试我在你的组件中做的这个按钮。

<div>
      <v-tooltip v-if="!$vuetify.theme.dark" bottom>
        <template v-slot:activator="{ on }">
          <v-btn v-on="on" color="info" small fab @click="darkMode">
            <v-icon class="mr-1">mdi-moon-waxing-crescent</v-icon>
          </v-btn>
        </template>
        <span>Dark Mode On</span>
      </v-tooltip>

      <v-tooltip v-else bottom>
        <template v-slot:activator="{ on }">
          <v-btn v-on="on" color="info" small fab @click="darkMode">
            <v-icon color="yellow">mdi-white-balance-sunny</v-icon>
          </v-btn>
        </template>
        <span>Dark Mode Off</span>
      </v-tooltip>
    </div>

Button在<script>中调用此方法

darkMode() {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
    }
mlmc2os5

mlmc2os52#

下面的代码创建了一个暗模式切换开关btn。

**注:**其用法Localstore

DarkModeToggel.vue**

<template>
   <v-icon class="mr-2">
      mdi-brightness-4
   </v-icon>
   <v-list-item-title class="pr-10">
      Dark Mode
   </v-list-item-title>
   <v-switch v-model="darkmode" color="primary" />
</template>

--

<script>
export default {
  data () {
    return {
      darkmode: false
    }
  },
  watch: {
    darkmode (oldval, newval) {
      this.handledarkmode()
    }
  },
  created () {
    if (process.browser) {
      if (localStorage.getItem('DarkMode')) {
        const cookieValue = localStorage.getItem('DarkMode') === 'true'
        this.darkmode = cookieValue
      } else {
        this.handledarkmode()
      }
    }
  },
  methods: {
    handledarkmode () {
      if (process.browser) {
        if (this.darkmode === true) {
          this.$vuetify.theme.dark = true
          localStorage.setItem('DarkMode', true)
        } else if (this.darkmode === false) {
          this.$vuetify.theme.dark = false
          localStorage.setItem('DarkMode', false)
        }
      }
    }
  }
}
</script>
  • @ckuessner答案正在工作,但不持久。*
kpbpu008

kpbpu0083#

下面是一个简单的按钮主题切换器的例子,它在cookie中保持主题状态。基于@rohit-nishad的解决方案。
Cookie操作的几种方式:

这个例子是用cookie-universal-nuxt实现的。

ColorThemeSwitch.vue

<template>
  <v-tooltip bottom>
    <template #activator="{ on }">
      <v-btn v-on="on" icon @click="switchTheme">
        <v-icon>
          {{ $vuetify.theme.dark ? 'mdi-white-balance-sunny' : 'mdi-moon-waxing-crescent' }}
        </v-icon>
      </v-btn>
    </template>
    <span>Change theme</span>
  </v-tooltip>
</template>

<script>
export default {
  created() {
    const darkModeCookie = this.$cookies.get('app.darkMode');
    if (darkModeCookie) {
      this.$vuetify.theme.dark = darkModeCookie;
    }
  },
  methods: {
    switchTheme() {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
      this.$cookies.set('app.darkMode', this.$vuetify.theme.dark);
    },
  },
};
</script>

最好将'created'钩子中的代码放在布局或插件中的某个地方,这样无论组件是否出现在当前页面上,您的应用程序都将更改主题。插件使用示例:

~/plugins/persistedThemeLoader.js

export default function ({ $vuetify, $cookies }) {
  const darkModeCookie = $cookies.get('app.darkMode');
  if (darkModeCookie) {
    $vuetify.theme.dark = darkModeCookie;
  }
}

nuxt.config.js

plugins: [
    '~/plugins/vuetify',
    { src: '~/plugins/persistedThemeLoader', mode: 'client' },
],

相关问题