VUE3+TS+Pinia实现网站主题（颜色风格）切换

一、问题背景

1、VUE3+TS+Pinia前端技术栈，编程实现某网站。

2、网站有主题（包括body、吸顶菜单条、底部区域和相关字体图片等）切换的需求。

3、希望主题切换不存在硬编码，后期可以简单增加数据，即可新增或修改主题。

二、CSS属​​​​​​​性绑定颜色变量

v-bind不仅可以在模版template中使用，也可以在css中使用。css代码示例：​​​​​​​

background-color: v-bind("themeStore.color.bgTopMenu");

三、Pinia中切换主题代码

export const useThemeStore = defineStore('theme', () => {
  const theme = ref('咖啡加白糖')
  const color = reactive<Color>({
    ...themeData.filter(v => v.value === '咖啡加白糖')[0].color
  })

  const changeTheme = (value: string) => {