Vuetify 中的颜色主题更改不起作用 [英] Color theme change in Vuetify not working

问题描述

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

main.js 代码:

从'vue'导入Vue；从 'vuetify' 导入 Vuetify；导入 'vuetify/dist/vuetify.min.css';从vuetify/es5/util/colors"导入颜色；Vue.use(Vuetify, {主题: {主要:colors.indigo.base，//#E53935次要:colors.indigo.base，//#FFCDD2口音:colors.indigo.base//#3F51B5}});const app = new Vue({el: '#app',//...});

这就是我的模板的样子.

 
<v-app 灯><v-导航抽屉固定的v-model="drawerRight"对剪辑应用程序></v-navigation-drawer><v-工具栏黑暗的固定的应用程序右剪裁><v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon><v-间隔></v-间隔><v-toolbar-side-icon @click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon></v-工具栏><v-内容><v-容器流体填充高度><v-layout justify-center align-center></v-layout></v-容器></v-content></v-app>

解决方案

颜色不会切换

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

I am using vuejs with vuetify, I put a Basic vuetify template and tried to Change the Color theme but the Color will not Switch. I do not get any Errors in my console and my Cache is cleared aswell.

The main.js Code:

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',
    // ...
});

And this is how my template Looks like.

    <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>

解决方案

the Color will not Switch

The colour of what? You don't have any components that use theme colours there. If you want to change the background colour of the toolbar for example you have to do <v-toolbar color="primary">

这篇关于Vuetify 中的颜色主题更改不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！