Use nested variables in Vuetify theme customisation

user_13735959 0
Viewed 212

I want to use variables --v-primary-link, --v-primary-text, and --v-primary-disabled. But Vuetify is generating only --v-primary-base Is this possible using the code which is written below? Or Is there any other way to do this?

code from @plugins/vuetify.js

light: {
  primary: {
    base: '#ffc844',
    text: '#303030',
    link: '#FFA844',
    disabled: '#AAAAAA',
  },
}

Expected Output: It should also generate the variables --v-primary-link, --v-primary-text, and --v-primary-disabled

vue-cli-3 material-design vuetify.js vue.js
1 Answers

According to Vuetify's doc on customProperty theming here, there is a limited list of variables you can overwrite

{
  base: string
  lighten5: string
  lighten4: string
  lighten3: string
  lighten2: string
  lighten1: string
  darken1: string
  darken2: string
  darken3: string
  darken4: string
}

But you can create your own custom version

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: {
          base: '#ffc844',
          text: '#303030',
          link: '#FFA844',
          disabled: '#AAAAAA',
       },
      },
    },
    options: {
      customProperties: true,
    },
  },
})

And use it in your css like so according to vuetify's doc

<style scoped>
  .link {
    color: var(--v-primary-link);
  }
</style>
user_71242400
Related