Question

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

Vuetify theme docs谈到改变主题颜色：

可以轻松更改。只需将主题属性传递给 Vue.use功能。您可以选择修改全部或部分修改主题属性，其余属性继承自默认属性。

但是，我看不到v1.3.12版的独立/ CDN模式下的这项工作。

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

This codepen像Vuetify docs示例中那样显示代码，但是按钮的颜色不变，它们仍然是默认颜色。我什至将错误颜色更改为洋红色（#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方面。

Answer 1

显然，发布者已经致电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',
  }
});

Answer 2

通过以下方式自定义您的 main.js 或 app.js 文件

const app = new Vue({
el: '#app',
vuetify : new Vuetify(
    {
        theme: {
            themes: {
              light: {
                primary: '#1cc3b5',
                secondary: '#b0bec5',
                accent: '#8c9eff',
                error: '#b71c1c',
              },
            },
          },
    }
), 
components:{
    ...
}});

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

2 个答案: