[Vuejs]-How to set a CSS Dynamic Color in VueJs 3 composition API / Vuetify?

by

1👍

The Vuetify colors are available in CSS variables, it’s always the color name prefixed with --v-theme-, i.e. --v-theme-primary, --v-theme-secondary etc. They contain RGB values, so you need to put them into rgb() to retrieve the color definition:

  background: rgb(var(--v-theme-primary));

Vue.createApp({}).use(Vuetify.createVuetify()).mount('#app')
.vuetifyPrimary{
  background: rgb(var(--v-theme-primary));
}

.vuetifySecondary{
  background: rgb(var(--v-theme-secondary));
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <div class="vuetifyPrimary">has primary background</div>
      <div class="vuetifySecondary">has secondary background</div>
    </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

For text and background color, it might be easier still to use CSS classes provided by Vuetify, i.e. text-primary or bg-primary.

Leave a comment