时间戳

首页 > 解决方案 > 如何在 nuxt vuetify 中更改主题？

javascript - 如何在 nuxt vuetify 中更改主题？

问题描述

我是 nuxt 和 vue 的新手，我正在尝试将颜色主题从深色更改为浅色。我的项目是由 nuxt 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>

插件/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"
      }
    }
  }
});

标签： javascriptvue.jsvuetify.js

解决方案

感谢 CLI，我创建了一个 nuxt 项目。工作项目托管在这里：https ://codesandbox.io/s/vuetify-dark-light-theme-iv8s4?file=/pages/index.vue

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

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

推荐阅读