Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expose theme colors to css variables in vuetify not working

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?

like image 517
Himakar Avatar asked Dec 30 '19 10:12

Himakar


People also ask

How do I use Vuetify theme colors?

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.

What CSS does Vuetify use?

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.

How do I use SASS variables in Vuetify?

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.

How do you override a Vuetify class?

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.


2 Answers

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,
    },
    // ...
  },
})
like image 68
hhs Avatar answered Sep 26 '22 00:09

hhs


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.

like image 39
Mithun Das Avatar answered Sep 25 '22 00:09

Mithun Das