<p>J'utilise Vuetify qui crée des variables CSS pour chaque couleur de thème (comme --v-theme-primary). Je veux pouvoir définir la couleur sur --v-theme-{something} en CSS et que la valeur de {something} provienne de JS. Par exemple : </p> <pre class="brush:js;toolbar:false;"><template> <div :class="$style['colored-text']">Asd</div> </modèle> <script lang="ts" configuration> const couleur = ref("primaire") </script> <style lang="scss" module> .texte coloré { couleur d'arrière-plan : var(--v-theme-[[v-bind(color)]]); } </style> ≪/pré> <p> [[v-bind(color)]] est une syntaxe invalide, je viens de l'évoquer pour une démonstration. Je veux pouvoir y mettre le nom de la couleur ou quelque chose de la référence de couleur afin de pouvoir utiliser var(--v-theme-{color}) en CSS où la couleur vient de JS. Dans l'exemple, cela deviendrait var(--v-theme-primary). <br /><br />Avez-vous des idées ? Cette approche est-elle réalisable ? </p><p><br /></p>

<template>
  <div class="colored-text">Asd</div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue'
  const color = ref("primary")
  const bgColor = computed(()=>`var(--v-theme-${color}`)
</script>

<style>
.colored-text {
  background-color: v-bind(bgColor);
}
</style>