Using custom theming in Vuetify and pass color variables to components

Solution 1:

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

Solution 2:

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

Solution 3:

For anyone stumbling over this from Vuetify V2 onwards, you can do the following to get access to the SCSS colour variables.

// Import the Vuetify styles somewhere global
@import '~vuetify/src/styles/styles.sass';

// Now in your components you can access the colour variables using map-get
div {
  background: map-get($grey, lighten-4);
}

All the colours can be found in /node_modules/vuetify/styles/settings/_colors.scss.