如何在运行时更改Vuetify 3主题颜色？

Vuetify 3完全支持运行时修改自定义主题的颜色，具体实现步骤如下：

1. 先确认自定义主题的初始化配置 #

确保你已经在Vuetify配置文件（比如vuetify.ts）里定义了自定义主题，示例如下：

import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'customAppTheme',
    themes: {
      customAppTheme: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          // 自定义的主题颜色变量
          appAccent: '#82B1FF',
        },
      },
    },
  },
})

2. 运行时修改主题颜色 #

在组件内通过Vuetify提供的useTheme composable获取主题实例，直接修改对应颜色值即可：

import { useTheme } from 'vuetify'

// 在组件的setup函数或<script setup>中使用
const theme = useTheme()

// 修改primary主色
theme.current.value.colors.primary = '#FF5722'
// 修改自定义的appAccent颜色
theme.current.value.colors.appAccent = '#FFC107'

3. 样式自动同步更新 #

修改颜色后，Vuetify会自动触发所有使用主题变量的组件样式更新，无需手动刷新页面。如果你的自定义CSS中引用了Vuetify的主题CSS变量（比如--v-theme-primary），这些变量也会同步更新，自定义样式会跟着变化。

额外说明 #

• 如果你定义了多套主题，直接修改theme.global.name.value即可切换主题，比如theme.global.name.value = 'dark'；
• 修改时要保证颜色键名和初始化主题时的定义完全一致，否则不会生效。

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