vuetify.js 在 Vue 3 中不起作用（主题定制）

Question

我想要做的是自定义主题 colors（主要，次要..）以用于 v-buttons，v-chips 等元素。

我发现我可以在“/src/plugins/vuetify.js”文件中修改它，如下所示：

 import 'vuetify/styles' import { createVuetify } from 'vuetify' export default createVuetify({ theme: { theme: { light: true}, options: { customProperties: true, }, themes: { light: { background: '#FFFFFF', primary: '#ff0000', secondary: '#b0bec5', accent: '#25316A', error: '#E86674', orange: '#FF7A0D', golden: '#A68C59', badge: '#F5528C', customPrimary: '#ff0000', }, dark: { primary: '#085294', }, }, }, })

我试过了，但它不起作用。 奇怪的是即使我删除了 vuetify.js 文件也没有任何变化！

我的 vue 和 vuetify 是版本 3。在 Vuetify 3 中是否还有另一种自定义主题的方法？

感谢您的阅读。

Answer 1

import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify({
    theme: {
      defaultTheme: "light",
      themes: {
        light: {
          dark: false,
          colors: {
            background: "#FFFFFF",
            primary: "#ffff00",
            secondary: "#b0bec5",
            accent: "#25316A",
            error: "#E86674",
            orange: "#FF7A0D",
            golden: "#A68C59",
            badge: "#F5528C",
            customPrimary: "#ff0000",
          },
        },
        dark: {
          dark: true,
          colors: {
            primary: "#085294",
          },
        },
      },
    },
  })