将主题颜色暴露给 vuetify 中的 css 变量不起作用

Question

我启用了自定义属性：

Vue.use(Vuetify, {
    options: {
        customProperties: true
    }
});

并尝试通过 CSS 变量使用：

<style>
    .custom{
        color:var(--v-primary-base);
    }
</style>

这是vuetify.js我设置主题的文件：

export default new Vuetify({
    icons: {
        iconfont: 'mdi',
    },
    theme: {
        themes: {
            light: {
                background: '#FFFFFF',
                primary: '#25316A',
                secondary: '#b0bec5',
                accent: '#25316A',
                error: '#E86674',
                orange: '#FF7A0D',
                golden: '#A68C59',
                badge: '#F5528C',
                customPrimary: '#085294',
            },
            dark: {
                primary: '#085294',
            }
        },
    },
})

没有任何主题颜色可通过变量访问。我尝试了很多方法，但没有奏效，也没有抛出错误。任何人都可以请帮助我吗？

Answer 1

您需要将options属性传递给Vuetify实例，而不是在use函数中。

从文档：

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
    // ...
  },
})

Answer 2

您必须使用 vuetify 文件中的选项，但您在错误的地方使用了它，如下所示......

export default new Vuetify({
    icons: {
        iconfont: 'mdi',
    },
    theme: {
        options: {
            customProperties: true,
        },
        themes: {
            light: {
                background: '#FFFFFF',
                primary: '#25316A',
                secondary: '#b0bec5',
                accent: '#25316A',
                error: '#E86674',
                orange: '#FF7A0D',
                golden: '#A68C59',
                badge: '#F5528C',
                customPrimary: '#085294',
            },
            dark: {
                primary: '#085294',
            }
        },
    },
})

之后，当你想使用你制作的自定义 CSS 变量时，你必须像这样使用它。

<style>
    .custom{
        color:var(--v-golden-base);
    }
</style>

这里的基数是默认值，我展示了黄金变量，但您可以使用其中任何一个。