How to use vuetify theme variables in styles

Question

I want to use the variables defined in my vuetify theme in the style portion of my vue files. Its not mentioned on the docs and can't seem to find an answer anywahere, does anyone know how to do this?

e.g.

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
  }
})

now in my Home component I want to do:

<template>
    <h1>My Title</h1>
</template>

<styles>
    h1{
        color:$primary; #from the vuetify theme
    }  
</styles>

Possible duplicate of [Using custom theming in Vuetify and pass color variables to components](https://stackoverflow.com/questions/48280990/using-custom-theming-in-vuetify-and-pass-color-variables-to-components) — Traxo, Oct 10 '18 at 10:48
The answers on the other question are more work arounds than official solutions, which is ideally what i want. Though if there isn't one then I guess the work around will have to do. — Brad, Oct 10 '18 at 13:10
> `The answers on the other question are more work arounds than official solutions,` One of the answers quotes official statement about this issue. And reply on that answer is by one of the Vuetify devs. So it doesn't negate the fact that this is a duplicate question (at least I don't see any difference?). I.e. afaics the official "solution" is a "workaround", lol. — Traxo, Oct 10 '18 at 13:11
The official answer was referring to stylus, not scss - though don't know if the same applies — Brad, Oct 10 '18 at 13:17
Good point, however I think the same applies because the workaround uses CSS, but I presume you could use stylus as well. See this https://github.com/vuetifyjs/vuetify/pull/4774 — Traxo, Oct 10 '18 at 13:19
I have updated [answer](https://stackoverflow.com/a/48285278/1981247), found docs with that regard, check it out! — Traxo, Oct 16 '18 at 18:26

score 3 · Answer 1 · answered Apr 05 '20 at 08:53

U can use:

<style scoped>
  .something {
    color:            var(--v-primary-base);
    background-color: var(--v-accent-lighten2);
  }
</style>

From this list:

  --v-anchor-base: #c42742;
  --v-primary-base: #c42742;
  --v-primary-lighten5: #2c0447;
  --v-primary-lighten4: #cfa854;
  --v-primary-lighten3: #dd88cc;
  --v-primary-lighten2: #b49921;
  --v-primary-lighten1: #f899c7;
  --v-primary-darken1: #0169dc;
  --v-primary-darken2: #c28fd0;
  --v-primary-darken3: #fbe002;
  --v-primary-darken4: #33303a;

see https://stackoverflow.com/a/48285278/1084004 for full details, `customProperties: true` might need to be set — mikeapr4, Mar 08 '21 at 18:35

How to use vuetify theme variables in styles

1 Answers1