Vuetify 中的颜色主题更改不起作用

Question

我将 vuejs 与 vuetify 一起使用，我放置了一个 Basic vuetify 模板并尝试更改颜色主题，但颜色不会切换。我的控制台中没有出现任何错误，我的缓存也被清除了。

main.js 代码：

 import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, {
  theme: {
    primary: colors.indigo.base, // #E53935
    secondary: colors.indigo.base, // #FFCDD2
    accent: colors.indigo.base // #3F51B5
  }
});

const app = new Vue({
    el: '#app',
    // ...
});

这就是我的模板的样子。

     <div id="app">
  <v-app light>
    <v-navigation-drawer
      fixed
      v-model="drawerRight"
      right
      clipped
      app
    >
    </v-navigation-drawer>
    <v-toolbar
      dark
      fixed
      app
      clipped-right
    >
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-spacer></v-spacer>
      <v-toolbar-side-icon @click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>

        </v-layout>
      </v-container>
    </v-content>
  </v-app>
    </div>

原文由 tigerel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

颜色不会切换

什么颜色？您那里没有任何使用主题颜色的组件。如果你想改变工具栏的背景颜色，例如你必须做 <v-toolbar color="primary">

原文由 Kael Watts-Deuchar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

就我而言，我必须将所有组件包装在 v-app 中

<div id="id">
  <v-app>
// youre code here
  </v-app>
</div>

如果你不这样做，你的应用程序将使用默认主题。

来自 vuetify 文档的参考：

“在 Vuetify 中，v-app 组件和 v-navigation-drawer、v-app-bar、v-footer 等组件上的 app prop 有助于通过组件周围适当的大小来引导您的应用程序。这允许您创建真正独特的界面，无需管理布局大小的麻烦。所有应用程序都需要 v-app 组件。这是许多 Vuetify 组件和功能的安装点，并确保它将默认应用程序变体（深色/浅色）传播到子组件，并确保对 Safari 等浏览器中的某些点击事件提供适当的跨浏览器支持。v-app 只应在您的应用程序中使用一次。”

原文由 mh. bitarafan 发布，翻译遵循 CC BY-SA 4.0 许可协议