Question

我正在使用带有vuetify的vuejs，我放了一个Basic vuetify模板并尝试更改Color主题但Color不会切换。我的控制台中没有任何错误，我的缓存也被清除了。

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

颜色不会切换

什么颜色？您没有任何使用主题颜色的组件。如果要更改工具栏的背景颜色，例如，您必须执行<v-toolbar color="primary">

Answer 2

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

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

如果不执行此操作，则您的应用使用默认主题。

reference from vuetify docs:

“”在Vuetify中，v-app组件以及v-navigation-drawer，v-app-bar，v-footer等组件上的应用程序prop有助于以适当的组件大小引导应用程序。这允许您可以创建真正独特的界面，而无需管理布局大小。v-app组件是所有应用程序所必需的。这是许多Vuetify组件和功能的安装点，并确保其传播默认的应用程序变体（暗/轻型）子组件，并确保对Safari等浏览器中的某些点击事件提供适当的跨浏览器支持。v-app仅应在您的应用程序内使用。”

Answer 3

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

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

将该代码添加到main.styl：

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

然后在main.styl

中添加app.js

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

如果您以后想要覆盖Vuetify默认的手写笔变量（在main.styl中执行），那么您的变量必须在@import之前声明，然后它们将自动覆盖Vuetify默认变量。 / p>

Vuejs Vuetify颜色主题不起作用

3 个答案: