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>

Answer 1

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;

Answer 2

Update for Vuetify 3 (on top this answer above):

The Upgrade Guide makes brief mention of changes, but doesn't go into detail. Instead of:

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

You'll now do this:

<style scoped>
  .something {
    color:            rgb(var(--v-theme-primary));
    background-color: rgba(var(--v-theme-primary), 0.3);
  }
</style>

As of this writing, the available options are listed in the vuetify theme spec test file.