Control the color of a svg with vuetify / Vue.js

Question

The colors get controlled by vuetify, there is a dark and light theme. How can I change the color of a svg depending on the active theme?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" xml:space="preserve">
<path fill="blue"

Fill only works for colors but not with the usual theme properties as "primary" "error" and so on.

Thank you

Bjørn D · Answer 1 · 2021-11-11T18:55:33.567

Enabling customProperties in your vuetify.js-file will allow you to read the theme colors inside components as css variables.

Apply a css-class to your svg element and target the fill attribute in the css, for example:

<rect
class="fillClass"
..
/>

<style scoped>
.fillClass {
fill: var(--v-error-base);
}
</style>

See this thread and particulary the answer from april 21 for more info:

1 Answers1