Question

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: {...} })

但没有效果。

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颜色在这里不起作用，您需要十六进制值。幸运的是，您可以在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

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

2 个答案: