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

Question

我将 vuejs 与 vuetify 一起使用，我放置了一个基本 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>

Answer 1

@DigitalDrifter 建议@import '~vuetify/src/stylus/main'.

但是，那是手写笔代码。因此，您可以创建例如 stylus 文件夹并将 main.styl 放入该文件夹，这是建议的，以便您可以轻松更改默认样式。

将该代码添加到 main.styl:

// main.styl
@import '~vuetify/src/stylus/main'

然后在您的 app.js

中包含 main.styl

// app.js
import './stylus/main.styl'

如果你以后想在里面覆盖 Vuetify 默认的 stylus 变量（在 main.styl 中做），那么你的变量必须在 @import 之前声明，然后它们将自动覆盖 Vuetify 默认变量.

Answer 2

the Color will not Switch

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

Answer 3

在我的例子中，我必须将所有组件包装在 v-app 中

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

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

reference from vuetify docs:

"In Vuetify, the v-app component and the app prop on components like v-navigation-drawer, v-app-bar, v-footer and more, help bootstrap your application with the proper sizing around component. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify's components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be used within your application ONCE."

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

Color theme change in Vuetify not working

javascript

vue.js

vuejs2

vuetify.js