Vuetify配置彩色App Bar却显示全白，求排查原因

你的问题是Vuetify的v-toolbar设置了dark color="primary"后显示全白，移除属性后工具栏无颜色，这大概率是Vuetify初始化方式错误或者主题配置未正确生效导致的。

1. Vuetify版本不匹配（最常见） #

看起来你的main.js用的是Vuetify 1.x的初始化写法，但如果你的项目安装的是Vuetify 2.x+，这种写法会导致主题配置无法被正确加载，进而color="primary"不生效。

解决步骤： #

首先确认你的Vuetify版本：
打开项目根目录的package.json，查看vuetify的版本号；或者运行命令：

npm list vuetify

如果是Vuetify 2.x+：

修改main.js的初始化代码为新版本的写法：

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.config.productionTip = false

// 创建Vuetify实例并配置主题
const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c'
      }
    }
  }
})

new Vue({
  el: '#app',
  router,
  vuetify, // 将Vuetify实例传入Vue实例
  components: { App },
  template: '<App/>'
})

你的模板代码不需要修改，保持原有的v-toolbar写法即可：

<template>
  <v-toolbar dark color="primary">
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title class="white--text">Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon>
      <v-icon>search</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>apps</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>refresh</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>more_vert</v-icon>
    </v-btn>
  </v-toolbar>
</template>

2. CSS加载问题 #

如果确认版本匹配，但问题依然存在，检查以下几点：

• 确保vuetify.min.css的路径正确，没有拼写错误；
• 确认webpack配置中已经正确配置了css-loader（你的代码注释里提到了这一点，检查项目的webpack.base.conf.js是否包含css-loader的规则）；
• 没有其他自定义CSS覆盖了Vuetify的工具栏样式（比如全局样式中的background-color或color规则）。

3. 深色模式的误解 #

补充说明：dark属性的作用是让工具栏内的文本和图标使用浅色（白色），而color="primary"是设置工具栏的背景色为主题中的primary颜色。两者结合后，工具栏应该是深蓝色（你的primary值#3f51b5）背景，白色文本，这才是正确的显示效果。

内容的提问来源于stack exchange，提问作者Adrian Elder