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)

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)