如何在下一个文本中更改主题?

Question

我是next和vue的新手，我正试图将颜色主题从深色改为浅色。我的项目是由next cli生成的，我有这个版本:

"dependencies": {
"core-js": "^3.8.3",
"nuxt": "^2.14.12",
"vuetify": "^2.4.4"
}
"devDependencies": {
"@nuxtjs/vuetify": "^1.11.3"
}

我正在学习如何做到这一点从这个链接:https://vuetifyjs.com/en/features/theme/

但实际上，当我试图改变一些颜色或主题没有发生。我试图传递浅色或深色的道具，但仍然没有发生

<v-app dark>...</v-app>

plugins/vuetify.js

import Vue from "vue";
import Vuetify from "vuetify/lib";
Vue.use(Vuetify);
export default new Vuetify({
theme: {
themes: {
light: {
primary: "#00bcd4",
secondary: "#8bc34a",
accent: "#3f51b5",
error: "#e91e63",
warning: "#ffeb3b",
info: "#2196f3",
success: "#4caf50"
}
}
}
});

Answer 1

通过CLI创建了下一个项目。工作项目托管在这里:https://codesandbox.io/s/vuetify-dark-light-theme-iv8s4?file=/pages/index.vue

您需要按照官方文档中的建议对vuetify.options.js进行更改。

要切换主题，您可以使用this.$vuetify.theme.dark作为setter，我添加了一些按钮。此信息取自这里:https://github.com/nuxt-community/vuetify-module/issues/213#issuecomment-551972535