在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',
            }
        },
    },
})

没有主题颜色可以通过变量访问。我尝试了多种方法，但都没有成功，也没有报错。请问有人可以帮帮我吗？

- Himakar

---

这个回答解决了你的问题吗？https://dev59.com/HVYM5IYBdhLWcg3w3S-F - Ann Kilzer

@AnnKilzer 不，它没有起作用。 - Himakar

Answer 1

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

来自文档：

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

- hhs

---

Vuetify的变量在这一点上停止工作，为什么会这样？例如，您不能使用variables.scss定义$stepper-header-height或其他内容（没有customProperties，这可以正常工作）。 - trainoasis

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>

这里的"base"是默认值，我用黄金变量展示了它，但您可以使用任何一个变量。

- Mithun Das

---

你知道为什么 color: var(--v-info-lighten2) 起作用，但 var(--v-red-lighten2) 不起作用吗？ - verunar

你得到了答案吗？ - Mithun Das

天啊，我不记得了，已经不再使用Vue了。我想你们两个都是对的，我把它放错地方了... - verunar

这个不起作用。customProperties 必须在 theme 中设置，而不是 themes。 - Hexodus

它在我的项目中运行良好，我的项目现在已经启动了！我不知道为什么在你的项目中无法工作！ - Mithun Das