如何在实例配置中自定义主题？答案

【问题标题】：How to customize theme in the instance configuration?如何在实例配置中自定义主题？
【发布时间】：2018-03-13 11:31:26
【问题描述】：

customizing theme Vuetify's guide 没有显示完整的一页代码，当我尝试线索时，没有工作。请参阅 codepen 的试用示例。

<div id="app" light> 
  <v-app id="inspire">
    <v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs12>
          <v-card color="primary"> <!-- need to CHANGE here! -->
            <v-card-text><b>Hello</b> - test 123 </v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 >
           <v-card dark color="secondary">
             <v-card-text>Bye  - test.</v-card-text>
           </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

使用指南的线索，没有效果

Vue.use(Vuetify, {  // IGNORING ALL
  theme: {
    primary: 'red',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
});
new Vue({    // NO EFFECT HERE
  el: '#app',
});

注意：也尝试其他类似

var xx = new Vue({ el: '#app' })
xx.use(Vuetify, { theme: {...} })

但没有效果。

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

发布者在使用 CDN 时通常会调用 use。为了使其工作，您需要将其应用于每个 Vue 实例，您可以在 created 挂钩中执行此操作：

const theme = {
    primary: '#f44336',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
}

var xx = new Vue({
  el: '#app',
  created() {
     this.$vuetify.theme = theme
  }
})

另请注意，vuetify 颜色在这里不起作用，您需要十六进制值。幸运的是，您可以在以下位置找到所有合适的材料设计颜色：https://www.materialui.co/colors

这是你的updated codepen

【讨论】：

感谢@craig_h，现在我可以看到 自定义主题 的 Vuetify-magic 是 created(){this.$vuetify.theme=TheNewTheme} ！ vuetifyjs.com/style/theme 有一些评论，但只是间接评论（关于如何更改原色）...作为指导，它需要一些增强和一个完整的示例，作为您的.需要一个重要的通知说 Customize = set $vuetify.theme...所以我发布了this issue。

【解决方案2】：

<script type="text/javascript">
    // customize vuetify globally
    Vue.prototype.$vuetify.theme = {
        primary: '#f44336',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c'
    }
</script>

试试这个，你不需要自定义每个 Vue 实例。
参考：https://vuejs.org/v2/cookbook/adding-instance-properties.html

【讨论】：