밝은 테마와 어두운 테마 간의 Vuetify 전환(vuex 사용)

밝은 테마와 어두운 테마 간의 Vuetify 전환(vuex 사용)

Vue-project에는 기본적으로 URL에 따라 vue-router를 사용하면 2페이지/컴포넌트가 표시됩니다.버튼을 사용하여 페이지/컴포넌트를 전환할 수 있습니다.

데이터 관리에도 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.main에는 다음과 같은 것이 있습니다.

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

문제는 스위치를 클릭하면 이 컴포넌트에서 테마가 라이트 모드에서 다크 모드로 전환된다는 것입니다.Light 모드가 기본이고 스위치를 한 번 클릭하면 어두운 테마가 나타납니다.단, 버튼을 클릭하여 다른 URL로 전환하면 라이트 테마가 사용됩니다.이 기능을 올바르게 구현하려면 어떻게 해야 합니까?

잘 부탁드립니다!

라는 이름의 JavaScript 클래스가 있어야 합니다.vuetify.js당신의 경우엔 이렇게 생겼을 겁니다.

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>

이 버튼은 사용자의 이 메서드를 호출합니다.<script>

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

다음 코드는 다크 모드 전환 스위치 btn을 생성합니다.

주의: 용도Localstore

Dark Mode Toggel.표시하다

---

<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의 답변은 기능하고 있지만 지속적이지 않습니다.

언급URL : https://stackoverflow.com/questions/62005958/vuetify-toggle-between-light-and-dark-theme-with-vuex