Using custom theming in Vuetify and pass color variables to components

Question

In my index.js file I have manually override the Vuetify theme object with my company's color:

Vue.use(Vuetify, {
  theme: {
    primary: '#377ef9',
    secondary: '#1b3e70',
    accent: '#ff643d',
    error: '#ff643d'
    ...
  }

Now, I can use these colors from my templates like so:

<my-text-field name="input text"
    label="text"
    value="text text text text..."
    type="text"
    color="primary">
</my-text-field>

What I'm after is using the primary or any other variable in the theme object defined above, inside my template style:

<script>
  import { VTextField } from 'vuetify'
  export default {
    extends: VTextField
  }
</script>

<style scoped lang="stylus">
  label
    color: <seconday color> <-- this is what I'm after
    color: #1b3e70 <-- this works, but not quite good enough for me
</style>

I can easily just write the hex value of my colors in the style section, but I don't want to repeat myself, and would rather use my theme object so it will also be easier for my to easily change the colors everywhere, and avoid typos which will lead to mistakes in the colors definitions.

Answer 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

---

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

Answer 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