Javascript 如何在VueJS应用程序中为不同主题实现多个资产路径？

我有一个VueJS应用程序。它实现了多主题功能。为此，我使用了如下内容：

let theme = getTheme() // returns 'light' | dark
document.documentElement.setAttribute('data-theme', theme)

以及默认（浅）主题和暗主题的颜色样式

:root {
  --primary-color: #6B59CC;
  --primary-color-rgb: #{hexToRGB(#6B59CC)};

  --secondary-green-color: #009a76;
  --secondary-green-color-rgb: #{hexToRGB(#009a76)};

  --secondary-orange-color: #F6933E;
  --secondary-orange-color-rgb: #{hexToRGB(#F6933E)};
  ...
}

[data-theme="dark"] {
  --primary-color: #6B59CC;
  --primary-color-rgb: #{hexToRGB(#6B59CC)};

  --secondary-green-color: #009a76;
  --secondary-green-color-rgb: #{hexToRGB(#009a76)};

  --secondary-orange-color: #F6933E;
  --secondary-orange-color-rgb: #{hexToRGB(#F6933E)};
  ...
}

注意：请不要介意明暗主题的样式相同。这只是一个例子。

我需要为每个主题使用不同的图标颜色。例如：浅色主题的基本图标颜色为

#a8a8a8

，深色主题的基本图标颜色为

#cfcfcfcf

如何动态更改图标的颜色？或者世界上有多种方法来实现这一点

另外，我使用带有

object

标记的

SVG

图标。像这样：

<object :data="require('./assets/home.svg')" />

在
数据中定义一个变量怎么样；类似于
lightTheme
的内容，并选中该选项以更改主题：

data() {
    return {
        lightTheme: false
    }
},
methods: {
    changeTheme() {
        this.lightTheme = !lightTheme
        let icon = document.getElementById("id")
        if(this.lightTheme) {
            icon.classList.add('light-theme-style')
            icon.classList.remove('dark-theme-style')
        } else {
             icon.classList.add('dark-theme-style')
             icon.classList.remove('light-theme-style')
        }
    }
}

您还需要将您的元素绑定到
changeTheme
，如果您愿意，您可以共享您的模板代码，我会将其添加到答案中。
用户如何更改主题？通过点击按钮什么的？是的，通过点击按钮。然后数据主题将被更改。答案有效吗？