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

Posted 2023-02-23

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

【英文标题】：How to change the theme colors in Vuetify in standalone/CDN mode?

【发布时间】：2019-05-11 13:59:14

【问题描述】：

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

Vuetify theme docs 这么说改变主题颜色：

这很容易改变。只需将主题属性传递给 Vue.use 函数。您可以选择修改全部或仅部分 主题属性，其余的继承自默认值。

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

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

This codepen 显示 Vuetify 文档示例中的代码，但按钮的颜色不会改变，它们仍然是默认颜色。我什至将错误颜色更改为洋红色 (#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，并且自定义主题颜色设置为洋红色：

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

我知道以前有人问过这类问题，但 this question 使用的是 vue-cli 和 nuxt（即不是独立的），而 this question 是 Vuetify 1.0 之前的版本。这个问题的不同之处在于独立/CDN 方面。

【问题讨论】：

我认为这是因为codepen默认调用Vue.use，所以你不能覆盖它。在您的本地项目中，它应该可以工作。因此，在 codepen 中，您将在创建的钩子中使用类似 this.$vuetify.theme.primary = '#4caf50' 的东西（可能有多种方法）。如果它不起作用，也许您可​​以尝试在代码沙箱上重现（据我所知，没有启动 vuetify 模板）。

感谢您的指导。我将编辑问题以确认这在我的本地项目中也不起作用。

使用this.$vuetify.theme.error = '#ff00ff'; 在添加到created 函数时在codepen 和本地都有效。请将此添加为答案，我会接受它作为正确的。再次感谢！

我将它添加到 codepen 中，并带有一个允许用户动态更改颜色的字段。

【参考方案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',
  
);

【讨论】：

我猜你不知道 v-app 背景颜色的设置？

@Graham 并非所有内容都在设置中，我认为背景颜色不存在。它可能在手写笔变量中，如果不是，则只需覆盖 CSS（请注意覆盖特定的主题颜色）。我想你可以在v-app 上添加class="blue" 或类似的东西来改变它的背景颜色，但我没有测试它所以不确定它是否有任何副作用（大概没有）。此外，如有任何其他问题，请转到 Vuetify Discord 或打开另一个问题。你也可以在那儿 ping 我@Traxo#6215，没问题。

谢谢，我会在 Discord 上联系你。我之前在那里问过，但没有得到答复。

【参考方案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:
    ...
);