Vue3中修改Vuetify主题颜色不生效问题求助

核心问题：主题配置位置错误 #

你的Vuetify配置中，theme被错误嵌套在defaults对象内，这会导致主题颜色无法被正确加载。Vuetify 3要求theme是createVuetify的顶级配置属性，而非defaults的子属性。

修正后的配置代码 #

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Composables
import { createVuetify } from 'vuetify'

export default createVuetify({
  // 主题配置移到顶级，与defaults同级
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#1B3055',
          secondary: '#4984A1',
        },
      },
    },
  },
  defaults: {
    VBtn: {
      class: 'text-none',
    },
  },
})

额外检查项 #

• 确认在项目入口文件（如main.js）中正确注册Vuetify：

  import { createApp } from 'vue'
  import App from './App.vue'
  import vuetify from './plugins/vuetify'
  
  createApp(App)
    .use(vuetify)
    .mount('#app')
  

• 若问题仍存在，可尝试清除浏览器缓存，或检查是否有自定义CSS代码覆盖了Vuetify的默认样式。

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