Vuetify 在明暗主题之间切换(使用 vuex)

Posted

技术标签:

【中文标题】Vuetify 在明暗主题之间切换(使用 vuex)【英文标题】:Vuetify toggle between light and dark theme (with vuex) 【发布时间】:2020-09-12 07:13:14 【问题描述】:

所以在我的 Vue 项目中,我基本上有两个页面/组件,它们将根据 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 中,我包含了 &lt;v-app dark&gt;,在我的 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 时,将使用浅色主题。 如何正确实现此功能?

提前致谢!

【问题讨论】:

【参考方案1】:

您应该有一个名为 vuetify.jsjavascript 类,在您的情况下应该如下所示。

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 在您的&lt;script&gt; 中调用此方法

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

【讨论】:

【参考方案2】:

以下代码创建了一个暗模式切换开关 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 的回答是有效的,但不是持久的。

【讨论】:

以上是关于Vuetify 在明暗主题之间切换(使用 vuex)的主要内容,如果未能解决你的问题,请参考以下文章

Vuetify 明暗主题切换

有没有办法在明暗模式之间切换后保留变量状态的值以显示在文本视图中

获取明暗模式主题更改的更新

使用JavaScript / jQuery为网站创夜间/高亮模式

使用JavaScript / jQuery为网站创夜间/高亮模式

更改应用程序主题时更改 UITabbar?