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

Modifier (2018/10/11)

Depuis la version 1.2. nous pouvons activer les variables CSS
NOTE : il ne fonctionnerait pas dans IE (Edge devrait fonctionner), et peut-être certaines versions de Safari ?

Desde docs (voir Propriétés personnalisées )

L'activation de CustomProperties génèrera également une variable css pour chaque élément de la base de données. couleur du thème, que vous pouvez ensuite utiliser dans les blocs de vos composants.

Vue.use(Vuetify, {
  options: {
    customProperties: true
  }
})

<style scoped>
  .something {
    color: var(--v-primary-base)
    background-color: var(--v-accent-lighten2)
  }
</style>

Pour les valeurs personnalisées, par exemple
yourcustomvariablename: '#607D8B'
utiliser --v-yourcustomvariablename-base (donc base est la valeur par défaut).

---

---

Réponse originale :

Il existe un Feature Request sur github : Accéder aux couleurs du thème dans les fichiers du stylet

@KaelWD (un des développeurs) a écrit :

C'est quelque chose que vous devrez mettre en œuvre vous-même. J'ai essayé de faire quelque chose de similaire auparavant, mais cela ne fonctionne pas vraiment au niveau du cadre.

Le problème est étiqueté wontfix

---

_{Edit (2018/10/11)}
Voir aussi ce fil de discussion mis à jour :
https://github.com/vuetifyjs/vuetify/issues/827 (Demande de fonctionnalité : Variables css natives)

Answer 2

Il y a un moyen de contourner ce problème en utilisant :style attributs. Il peut être utilisé pour définir des propriétés CSS personnalisées de manière réactive.

Ajouter une propriété calculée :

computed: {
    cssProps () {
        return {
            '--secondary-color': this.$vuetify.theme.secondary
        }
    }

Lier le style à cssProps :

<div id="app" :style="cssProps">

Ensuite, dans votre style :

<style scoped>
    label
        color: var(--secondary-color);
</style>

Adapté de cette discussion : https://github.com/vuejs/vue/issues/7346

Answer 3

Pour tous ceux qui se heurtent à ce problème à partir de Vuetify V2, vous pouvez procéder comme suit pour accéder aux variables de couleur SCSS.

// Import the Vuetify styles somewhere global
@import '~vuetify/src/styles/styles.sass';

// Now in your components you can access the colour variables using map-get
div {
  background: map-get($grey, lighten-4);
}

Toutes les couleurs peuvent être trouvées dans /node_modules/vuetify/styles/settings/_colors.scss .

Answer 4

D'après les réponses ci-dessus, si vous voulez inclure toutes les couleurs Vuetify, mettez ce code dans le modèle App.vue.

<v-app :style="cssProps">

App.vue script

computed: {
   cssProps () {
      var themeColors = {}
      Object.keys(this.$vuetify.theme.themes.light).forEach((color) => {
        themeColors[`--v-${color}`] = this.$vuetify.theme.themes.light[color]
      })
      return themeColors
   }
}

Disons que vous avez cette couleur dans vuetify.js

export default new Vuetify({
  treeShake: true,
    theme: {
      themes: {
        light: {
          darkRed: "#CD3300",
        }
      }
    }
})

Ensuite, dans n'importe quel composant :

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

Answer 5

Je suis peut-être en retard, mais la façon la plus efficace de procéder est celle mentionnée dans la documentation. https://vuetifyjs.com/en/features/theme/#custom-properties

Je fournirai un exemple de travail pour la même chose. Vous n'avez besoin que de trois changements pour que cela fonctionne.

1. Mentionnez l'option qui fait la magie et la couleur de votre thème.

   export default new Vuetify({ theme: { options: { customProperties: true }, themes: { light: { primary: "#3DCFD3", secondary: "#171b34", accent: "3D87E4" } } } });

2. Mentionnez le nom de la classe dans la balise où vous voulez que votre thème soit appliqué.

   <h4 class="blue-header">Yash Oswal</h4>

3. CSS pour appliquer votre thème.

   <style lang="scss">

   .blue-header { color: var(--v-primary-base); }

   </style>