Vuetify переключение между светлой и темной темой (с vuex)

Question

, поэтому в моем Vue -проекте у меня в основном есть две страницы / компоненты, которые будут отображаться с использованием vue -router в зависимости от URL-адреса. Я могу переключаться между этими страницами / компонентами с помощью кнопки.

Я также использую 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);
},

В приложении. vue Я включил <v-app dark> и в моем основном. 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-адрес, будет использоваться светлая тема. Как правильно реализовать эту функцию?

Заранее спасибо!

Answer 1

У вас должен быть класс 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
      }
    }
  }
});

Ваш переключатель должен работать, но на всякий случай попробуйте эту кнопку I ' в вашем компоненте.

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