[Vuejs]-How to use CSS variables with names comming from JS in VueJS?

by

1👍

you can create a computed for the css value

you can also remove :class="$style['colored-text']" and just use class="colored-text"

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

sfc example

👤Daniel

Leave a comment