无需直接操作DOM的替代方案 #

方案1：根元素绑定主题类 + 全局CSS管控 #

1. 先调整Pinia仓库，用统一的theme字段（值为'dark'或'light'）标识主题，替代原来单独的ColorForBodyBackground和SomeStyle：

// currentThemeStore.js
import { defineStore } from 'pinia'
export const useCurrentThemeStore = defineStore('currentTheme', {
  state: () => ({
    theme: 'light'
  }),
  actions: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light'
    }
  }
})

2. 在App组件的根元素上绑定主题类：

<template>
  <div :class="`theme-${currentThemeStore.theme}`">
    <!-- 应用所有内容 -->
  </div>
</template>

3. 全局CSS中通过主题类控制body背景色：

/* global.scss 或 App.vue的全局样式 */
.theme-dark body {
  background-color: black;
}
.theme-light body {
  background-color: white;
}

4. 组件内样式可简化为嵌套主题类的写法：

<template>
  <div :class="$style.content">Some text</div>
</template>

<style lang="scss" module>
.content {
  /* 通用样式 */
  
  .theme-dark & {
    /* 深色主题专属样式 */
    color: white;
  }
  
  .theme-light & {
    /* 浅色主题专属样式 */
    color: #333;
  }
}
</style>

方案2：CSS变量 + Pinia响应式绑定 #

这种方式通过CSS自定义属性统一管理主题样式，更适合以颜色切换为主的场景：

1. 升级Pinia仓库，维护主题对应的变量配置：

// currentThemeStore.js
import { defineStore } from 'pinia'
export const useCurrentThemeStore = defineStore('currentTheme', {
  state: () => ({
    theme: 'light',
    themeConfig: {
      light: {
        bgColor: 'white',
        textColor: '#333'
      },
      dark: {
        bgColor: 'black',
        textColor: '#fff'
      }
    }
  }),
  getters: {
    activeThemeConfig: (state) => state.themeConfig[state.theme]
  },
  actions: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light'
    }
  }
})

2. 在App组件的根元素上动态绑定CSS变量：

<template>
  <div :style="computedThemeVars">
    <!-- 应用内容 -->
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useCurrentThemeStore } from '@/stores/currentTheme'
const store = useCurrentThemeStore()

const computedThemeVars = computed(() => ({
  '--bg-color': store.activeThemeConfig.bgColor,
  '--text-color': store.activeThemeConfig.textColor
}))
</script>

3. 全局和组件内直接使用CSS变量：

/* 全局样式 */
body {
  background-color: var(--bg-color);
  transition: background-color 0.3s; /* 可选：添加过渡动画提升体验 */
}

组件内样式：

<template>
  <div :class="$style.content">Some text</div>
</template>

<style lang="scss" module>
.content {
  color: var(--text-color);
}
</style>

最优方案推荐 #

优先选择方案2（CSS变量+Pinia），理由如下：

• 完全遵循Vue响应式思想，无需手动操作DOM，状态变化自动同步样式；
• 样式维护成本低，不用重复编写两套类，只需维护主题变量配置；
• 扩展性强，后续新增主题类型或调整配色时，只需修改Pinia中的配置即可；
• 组件与状态耦合度更低，组件只需使用CSS变量，无需依赖Pinia的具体字段。

如果你的主题涉及大量布局、组件结构的差异（而非仅颜色），方案1的类绑定方式会更直观，便于分组管理不同主题的复杂样式。

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