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
.
Source:stackexchange.com