如何在独立/CDN 模式下更改 Vuetify 中的主题颜色？

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

The Vuetify 主题文档 https://vuetifyjs.com/en/style/theme关于更改主题颜色，请说一下：

这可以很容易地改变。只需将主题属性传递给 Vue.use 函数。您可以选择修改全部或仅修改部分 主题属性，其余继承自默认值。

然而，我在 v1.3.12 版本的独立/CDN 模式下并没有看到这项工作在实践中发挥作用。

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

这个代码笔 https://codepen.io/graham-sportsmgmt/pen/oJvPzy显示了 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，并且自定义主题颜色设置为洋红色：

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

我知道以前曾有人问过此类问题，但是这个问题 https://stackoverflow.com/questions/49116469/how-to-change-theme-colors-on-nuxt-vuetify-starter-template正在使用 vue-cli 和 nuxt （即不是独立的）并且这个问题 https://stackoverflow.com/questions/48618078/vuetify-theme-doesnt-change是 Vuetify 1.0 之前的版本。这个问题的不同之处在于独立/CDN 方面。

显然出版商打电话Vue.use(Vuetify)已经。所以你需要在初始化Vue之前重写变量：

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


new Vue({ ...

或者在创建的钩子中覆盖它们：

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