如何在独立/CDN 模式下更改 Vuetify 中的主题颜色? [英] How to change the theme colors in Vuetify in standalone/CDN mode?

问题描述

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

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

我知道以前有人问过这种类型的问题，但是 这个问题 使用了 vue-cli 和 nuxt(即不是独立的)和 这个问题 是 Vuetify 1.0 之前的版本.这个问题的不同之处在于独立/CDN 方面.

解决方案

显然发布者已经调用了 Vue.use(Vuetify).所以需要在初始化 Vue 之前覆盖变量:

Vue.prototype.$vuetify.theme = {主要:'#3f51b5'，次要:'#b0bec5'，口音:'#8c9eff'，错误:'#ff00ff'};新的 Vue({ ...

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

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

I am trying to change the named colors in Vuetify so that the visual controls in use around the application inherit the theme centrally and won't require individual color definitions for each component.

The Vuetify theme docs say this about changing theme colors:

This can be easily changed. Simply pass a theme property to the Vue.use function. You can choose to modify all or only some of the theme properties, with the remaining inheriting from the default.

However, I am not seeing this work in practice in standalone/CDN mode with version v1.3.12.

Please note that vue-cli is not used when you load Vue.js from a CDN, and we're very happy working that way as our focus right now is on rapid micro-front-end development.

This codepen shows the code as in the Vuetify docs example, but the colors of the buttons don't change and they remain the default colors. I have even changed the error color to Magenta (#ff00ff) to make that very apparent when it works:

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>

To show that this issue is not limited to CodePen, here is my local project that has a v-navigation-drawer with the error class, and the custom theme color set to Magenta:

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

I understand that this type of question has been asked before but this question was using vue-cli and nuxt (i.e. not standalone) and this question was a Vuetify version pre-1.0. What makes this question different is the standalone/CDN aspect.

解决方案

Apparently publisher calls Vue.use(Vuetify) already. So you need to override variables before initializing Vue:

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


new Vue({ ...

Or override them in created hook:

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

这篇关于如何在独立/CDN 模式下更改 Vuetify 中的主题颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！