I enabled custom properties:
Vue.use(Vuetify, {
options: {
customProperties: true
}
});
and trying to use through CSS variable :
<style>
.custom{
color:var(--v-primary-base);
}
</style>
this is vuetify.js
file where I am setting theme :
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',
}
},
},
})
None of the theme colors are accessible through variables. I tried many ways but hasn't worked and no error thrown. Any one can please help me?
By picking a color group (yellow, red, blue, and so on) and combining it with one of the modifying classes ( lighten-{n} , darken-{n} , accent-{n} ) you can get hundreds of colors to add to your Vue app and reflect your brand or style.
Vuetify uses SASS/SCSS to craft the style and appearance of all aspects of the framework. Utilizing the sass/scss data option of your vue. config. js file, you can optionally pass in custom variables to overwrite the global defaults.
Vue CLI install Once installed, create a folder called sass , scss or styles in your src directory with a file named variables. scss or variables. sass . The vuetify-loader will automatically bootstrap your variables into Vue CLI's compilation process, overwriting the framework defaults.
With vue and scoped elements, you will meet the /deep/, >>>, ::v-deep selectors. Everything is explained there. So if you want to override a style deep, this means a style of a child of your root vuetify component you will need to use ::v-deep selector along with scoped attribute. Hope, this helps.
You need to pass the options
property to the Vuetify
instance instead, not in the use
function.
From the docs:
export default new Vuetify({
theme: {
options: {
customProperties: true,
},
// ...
},
})
You have to use the options in vuetify file but you have used it in wrong place like this...
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',
}
},
},
})
After that when you want to use your custom CSS variable as you made it you have to use it like this..
<style>
.custom{
color:var(--v-golden-base);
}
</style>
Here base is a default and I showed for the golden variable but You can use any of them.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With