Using custom theming in Vuetify and pass color variables to components

Edit ^(2018/10/11)

Since version 1.2. we can enable CSS variables
NOTE: allegedly it won't work in IE (Edge should work), and possibly some Safari versions?

From docs (see Custom Properties)

Enabling customProperties will also generate a css variable for each theme color, which you can then use in your components' blocks.

Vue.use(Vuetify, {
  options: {
    customProperties: true
  }
})

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

For custom values e.g.
yourcustomvariablename: '#607D8B'
use --v-yourcustomvariablename-base (so base is default).

---

---

Original answer:

There is a Feature Request on github: Access theme colors in stylus files

@KaelWD (one of devs) wrote:

This is something you'll have to implement yourself. I've tried doing something similar before but it doesn't really work on a framework level.

Issue is labeled wontfix

---

_{Edit (2018/10/11)}
Also see this updated thread:
https://github.com/vuetifyjs/vuetify/issues/827 (Feature request: Native css variables)

There is a way to go around this by utilizing :style attributes. It can be used to set custom CSS properties reactively.

Add a computed property:

computed: {
    cssProps () {
        return {
            '--secondary-color': this.$vuetify.theme.secondary
        }
    }

Bind style to cssProps:

<div id="app" :style="cssProps">

Then, in your style:

<style scoped>
    label
        color: var(--secondary-color);
</style>

Adapted from this discussion: https://github.com/vuejs/vue/issues/7346