使用Vuetify在Nuxt.js中根据时间在明/暗模式之间切换

// theme.js

export default {
  light: {
    primary: '#ffffff', // 定义明亮模式的主要颜色
    secondary: '#f5f5f5', // 定义明亮模式的次要颜色
  },
  dark: {
    primary: '#000000', // 定义暗黑模式的主要颜色
    secondary: '#303030', // 定义暗黑模式的次要颜色
  },
};

// nuxt.config.js

import theme from './theme';

export default {
  // ...
  plugins: ['@nuxtjs/dayjs'],
  buildModules: ['@nuxtjs/vuetify'],
  vuetify: {
    customVariables: ['~/theme.js'],
    theme: {
      dark: false, // 默认使用明亮模式
      themes: theme,
    },
  },
  // ...
};

<!-- Layout.vue -->

<template>
  <v-app :dark="$vuetify.theme.dark">
    <nuxt />
  </v-app>
</template>

<!-- MyPage.vue -->

<template>
  <div>
    <v-btn @click="toggleDarkMode">切换模式</v-btn>
  </div>
</template>

<script>
export default {
  methods: {
    toggleDarkMode() {
      this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
    },
  },
};
</script>