Expose theme colors to css variables in vuetify not working

Question

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?

Does this answer your question? https://stackoverflow.com/questions/48280990/using-custom-theming-in-vuetify-and-pass-color-variables-to-components — Ann Kilzer, Dec 31 '19 at 10:57

score 18 · Accepted Answer · answered Mar 24 '20 at 11:33

18

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,
    },
    // ...
  },
})

answered Mar 24 '20 at 11:33

hhs

196
2
4

Vuetify's variables stop working at this point, why is that? you cant use variables.scss for example and define $stepper-header-height: or something .. (without customProperties, this works) – trainoasis Dec 18 '20 at 12:16

score 6 · Answer 2 · edited May 25 '22 at 12:16

6

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.

edited May 25 '22 at 12:16

NorthWind

3
3

answered Jul 21 '20 at 14:26

Mithun Das

435
4
8

do you know why color: var(--v-info-lighten2) works? but var(--v-red-lighten2) doesnt? – verunar Jul 30 '20 at 13:42
You got your answer? – Mithun Das Dec 10 '20 at 15:40
god, i dont remember, no longer working with vue. i guess you were both right, i put it in the wrong place.. – verunar Dec 11 '20 at 12:26
1

This doesen't work. `customProperties` has to be set in `theme` NOT `themes` – Hexodus May 03 '21 at 10:43
It worked in my project and my project is now up and running! I don't know why is not working in yours! – Mithun Das May 04 '21 at 11:50

Expose theme colors to css variables in vuetify not working

2 Answers2