Solution pour utiliser les noms définis par JS comme variables CSS dans VueJS.

Question

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 : 

Answer 1

Vous pouvez créer une propriété calculée pour une valeur CSS.

Vous pouvez également supprimer :class="$style['colored-text']" et utiliser class="colored-text" directement.

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

exemple sfc