Блог

Я хочу использовать переменные --v-primary-link , --v-primary-text и --v-primary-disabled . Но Vuetify генерирует только --v-primary-base Возможно ли это с помощью кода, который написан ниже? Или есть какой-либо другой способ сделать это?

код из @plugins/vuetify.js

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

Ожидаемый результат: он также должен генерировать переменные --v-primary-link , --v-primary-text и --v-primary-disabled

Согласно документу Vuetify о тематизации CustomProperty здесь, существует ограниченный список переменных, которые вы можете перезаписать

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

Но вы можете создать свою собственную версию

 // 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,
    },
  },
})
  

И используйте это в своем CSS, как указано в документе vuetify

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