我启用了自定义属性:
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',
}
},
},
})
主题颜色均不可通过变量访问。我尝试了很多方法,但是没有用,也没有抛出错误。谁能帮我吗?
最佳答案
您需要将options
属性传递给Vuetify
实例,而不是use
函数中的而不是。
从docs:
export default new Vuetify({
theme: {
options: {
customProperties: true,
},
// ...
},
})
关于vue.js - 在Vuetify中将主题颜色公开给CSS变量不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59529101/