re-using Vuetify theme colors - vue.js

Question

Vuetify provides a configurable theme which defines a set of color that may be overridden when constructing the Vuetify object, e.g.
const vuetify = new Vuetify({
theme: {
themes: {
light: {
primary: '#3f51b5',
secondary: '#b0bec5',
error: '#b71c1c',
}
}
}
})
In the example above, I've overridden 3 of the theme colors. How can I use these theme colors in my own components, e.g. if I want to set the background color of a div to match the primary color
<template>
<div id="container"></div>
</template>
<script>
// detail omitted
</script>
<style lang="scss" scoped>
#container {
background-color: '#3f51b5';
}
</style>
In the example above I've hard-coded the primary color, but I assume Vuetify provides a way of avoiding this repetition, e.g. a SASS/SCSS variable?

Answer 1

If you don't need to support IE11 you can tell the theme system to use CSS custom properties instead:
new Vuetify({
theme: {
options: { customProperties: true },
},
})
Then you can access the colors directly in your stylesheet:
#container {
background-color: var(--v-primary-base);
}
https://vuetifyjs.com/en/features/theme/#custom-properties
Vuetify 3 doesn't support IE so this is always enabled, and the custom properties are r,g,b lists so you need to use rgb() or rgba() to access them:
#container {
background-color: rgb(var(--v-theme-primary));
color: rgba(var(--v-theme-on-primary), 0.8);
}

Answer 2

You can simply achieve that by applying the CSS as per your custom theme. Please follow the below steps.
Add a wrapper element <v-app> around your component content and then by using computed property get the theme colors.
<v-app :style="getColors">
computed: {
getColors () {
let themeColors = {}
Object.keys(this.$vuetify.theme.themes.light).forEach((color) => {
themeColors[`--v-${color}`] = this.$vuetify.theme.themes.light[color]
})
return themeColors;
}
}
And then in CSS, You can achieve like this :
#container {
color: var(--v-primary);
}
Live demo :
new Vue({
el: "#app",
opts: {
theme: {
themes: {
light: {
primary: '#3f51b5',
secondary: '#b0bec5',
error: '#b71c1c',
}
}
}
},
vuetify: new Vuetify(this.opts),
computed: {
getColors () {
let themeColors = {}
Object.keys(this.$vuetify.theme.themes.light).forEach((color) => {
themeColors[`--v-${color}`] = this.$vuetify.theme.themes.light[color]
})
return themeColors
}
}
});
.container {
color: var(--v-primary);
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css"/>
<div id="app">
<v-app :style="getColors">
<h4 class="container">Hello</h4>
</v-app>
</div>