如何在Vuetify/Vue.js中根据当前主题动态调整SVG颜色

方案1：使用currentColor继承父元素颜色（最简方案） #

• 修改SVG内部路径的fill属性值为currentColor，修改后示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" xml:space="preserve">
<path fill="currentColor"
<!-- 其余SVG代码保持不变 -->
</svg>

• 给SVG的父元素添加Vuetify内置的文本色类即可，比如需要跟随primary主题色就加class="text-primary"，需要跟随error主题色就加class="text-error"，明暗主题切换时颜色会自动同步更新。

方案2：直接绑定Vuetify全局CSS变量 #

Vuetify会自动把所有主题色注入为全局CSS变量，直接在fill属性中调用即可：

• Vuetify 3版本变量格式为--v-theme-<色名>，示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" xml:space="preserve">
<path fill="var(--v-theme-primary)"
<!-- 其余SVG代码保持不变 -->
</svg>

• Vuetify 2版本变量格式为--v-<色名>-base，比如primary色对应var(--v-primary-base)
• 自定义主题色也可以按照对应格式拼接变量名使用，无需额外写监听逻辑。

方案3：JS逻辑动态绑定（适合需要逻辑控制的场景） #

如果需要在JS中判断颜色取值，可以直接调用Vuetify提供的主题API动态绑定：

Vuetify 3示例： #

<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" xml:space="preserve">
    <path :fill="theme.colors.primary"
    <!-- 其余SVG代码保持不变 -->
  </svg>
</template>

<script setup>
import { useTheme } from 'vuetify'
const theme = useTheme()
</script>

Vuetify 2示例： #

<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" xml:space="preserve">
    <path :fill="$vuetify.theme.currentTheme.primary"
    <!-- 其余SVG代码保持不变 -->
  </svg>
</template>

注意：以上方案仅适用于内联到页面中的SVG，如果是通过<img>标签引入的外部SVG文件，需要先将SVG内容转为内联，或者修改SVG源文件内部的fill属性为上述对应写法才能生效。

内容的提问来源于stack exchange，提问作者user17359568