我正在尝试更改 Vuetify 中的命名颜色，以便应用程序周围使用的视觉控件集中继承主题，并且不需要为每个组件单独定义颜色。

Vuetify theme docs说说更改主题颜色:

This can be easily changed. Simply pass a theme property to the Vue.use function. You can choose to modify all or only some of the theme properties, with the remaining inheriting from the default.

但是，我在 v1.3.12 版本的独立/CDN 模式下没有看到这项工作在实践中。

请注意当您从 CDN 加载 Vue.js 时不会使用 vue-cli，我们很高兴以这种方式工作，因为我们现在的重点是快速微前端 -结束发展。

This codepen显示 Vuetify 文档示例中的代码，但按钮的颜色没有改变，它们仍然是默认颜色。我什至将错误颜色更改为洋红色 (#ff00ff)，以使其在工作时非常明显:

JavaScript:

Vue.use(Vuetify, { 
  theme: { 
    primary: '#3f51b5', 
    secondary: '#b0bec5', 
    accent: '#8c9eff', 
    error: '#ff00ff' 
  } 
}); 
 
new Vue({ 
  el: '#app', 
  data: () => ({ 
    // 
  }) 
}); 

HTML:

<div id="app"> 
  <v-app> 
    <v-content> 
      <v-container grid-list-xl> 
        <v-btn>Default</v-btn> 
        <v-btn color='primary'>Primary</v-btn> 
        <v-btn color='secondary'>Secondary</v-btn> 
        <v-btn color='accent'>Accent</v-btn> 
        <v-btn color='error'>Error</v-btn> 
      </v-container> 
    </v-content> 
  </v-app> 
</div> 

为了表明这个问题不仅限于 CodePen，这是我的本地项目，它有一个带有错误类的 v-navigation-drawer，自定义主题颜色设置为 Magenta:

v-navigation-drawer.error(app fixed mini-variant='true') 

我知道以前有人问过这类问题，但是this question正在使用 vue-cli 和 nuxt(即不是独立的)和 this question是 Vuetify 1.0 之前的版本。这个问题的不同之处在于独立/CDN 方面。

请您参考如下方法:

显然发布者已经调用了 Vue.use(Vuetify)。所以需要在初始化 Vue 之前重写变量:

Vue.prototype.$vuetify.theme = { 
  primary: '#3f51b5', 
  secondary: '#b0bec5', 
  accent: '#8c9eff', 
  error: '#ff00ff' 
}; 
 
 
new Vue({ ... 

或者在创建的钩子(Hook)中覆盖它们:

new Vue({ 
  el: '#app', 
  data: () => ({ 
    // 
  }), 
  created() { 
    this.$vuetify.theme.primary = '#3f51b5', 
  } 
});