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

Question

customizing theme Vuetify's guide not show a complete one-page-code, and when I try the clues, no is working. See trying-example at this 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: {...} })

但没有效果。

Answer 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 颜色在这里不起作用，您需要十六进制值。幸运的是，您可以在以下位置找到所有合适的 material 设计颜色：https://www.materialui.co/colors

这是你的 updated codepen

Answer 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

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

How to customize theme in the instance configuration?

vue.js

vuejs2

vuetify.js