Utilisation de thèmes personnalisés dans Vuetify et passage de variables de couleur aux composants

Question

Dans mon index.js J'ai remplacé manuellement le fichier Vuetify theme avec la couleur de mon entreprise :

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

Maintenant, je peux utiliser ces couleurs à partir de mes modèles comme suit :

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

Ce que je cherche, c'est à utiliser le primary ou toute autre variable dans le theme défini ci-dessus, dans le style de mon modèle :

<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>

Je peux facilement écrire la valeur hexadécimale de mes couleurs dans la section style, mais je ne veux pas me répéter, et préfère utiliser mon theme Ainsi, il me sera plus facile de changer facilement les couleurs partout, et d'éviter les fautes de frappe qui entraîneraient des erreurs dans la définition des couleurs.

Answer 1

Exemple de changement de thème ( lien utile ):

    <v-app :dark="setTheme" 
           :style="{background: $vuetify.theme.themes[theme].background}" 
           >

JS :

      computed: {
            setTheme() {
                this.$vuetify.theme.dark = this.goDark;
            }
      },
      data() {
            return { 
                goDark: false
            }
      }