如何在Vuetify3中动态修改主题颜色？

Vue3搭配Vuetify3时，主题修改逻辑和Vue2版本差异较大，核心是通过Vuetify提供的useTheme组合式API来访问并修改主题配置，以下是具体实现方式：

1. 引入主题API #

在需要修改主题的组件中，先导入useTheme：

import { useTheme } from 'vuetify'

2. 动态修改主题颜色 #

通过useTheme()获取主题实例后，直接修改对应主题模式下的颜色属性即可。注意Vuetify3的主题颜色是响应式Ref对象，必须修改.value属性才能生效：

const theme = useTheme()

// 修改亮色主题的主色、次色
theme.themes.light.primary.value = '#4caf50'
theme.themes.light.secondary.value = '#2196f3'

// 修改暗色主题的主色、次色
theme.themes.dark.primary.value = '#4caf50'
theme.themes.dark.secondary.value = '#2196f3'

3. 适配登录后动态更新场景 #

在用户登录成功并获取品牌主题信息后，直接在回调逻辑中执行上述修改代码即可：

// 模拟登录后获取品牌主题数据
async function handleLogin() {
  // 假设接口返回品牌主题配置
  const brandTheme = await fetchBrandTheme()
  const theme = useTheme()
  
  // 应用品牌定制的主题颜色
  theme.themes.light.primary.value = brandTheme.primary
  theme.themes.light.secondary.value = brandTheme.secondary
  theme.themes.dark.primary.value = brandTheme.darkPrimary
  theme.themes.dark.secondary.value = brandTheme.darkSecondary
}

注意事项 #

• 若需全局修改主题，可在App.vue或全局逻辑中使用useTheme，无需在每个组件重复引入。
• 基础主题配置可在Vuetify插件初始化时设置，动态修改是基于该基础配置进行的调整。

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