如何在Vuetify中配置随明暗主题切换的动态颜色包？

Vuetify支持通过SCSS变量为明暗主题分别定义自定义颜色集合，无需重复覆盖全局$colors变量，只需利用Vuetify的主题配置体系即可实现动态切换。以下是具体实现步骤：

1. 在SCSS变量文件中定义明暗主题颜色 #

在你的variables.scss文件中，先分别定义浅色和深色主题的自定义颜色，再整合到Vuetify的$theme变量中：

// 自定义浅色主题的emotion颜色组
$emotion-light: (
  "joy": #d1bf0e,
  "trust": #9bb700,
);

// 自定义深色主题的emotion颜色组
$emotion-dark: (
  "joy": #38a5fb,
  "trust": #c23a3a,
);

// 配置Vuetify全局主题，为明暗模式分配对应颜色
$theme: (
  "light": (
    "colors": (
      "emotion": $emotion-light,
      // 可保留Vuetify默认颜色（如primary、secondary），按需修改
      "primary": #1976d2,
      "secondary": #424242,
    ),
  ),
  "dark": (
    "colors": (
      "emotion": $emotion-dark,
      "primary": #2196f3,
      "secondary": #424242,
    ),
  ),
);

// 必须在变量定义后引入Vuetify样式
@import 'vuetify/styles';

2. 配置Vuetify实例（JS/TS端） #

在Vuetify初始化文件（如vuetify.ts）中，只需声明主题框架即可，无需重复定义颜色（SCSS已配置完成）：

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default createVuetify({
  theme: {
    defaultTheme: 'light', // 默认启动主题
    themes: {
      light: {},
      dark: {},
    },
  },
})

3. 在组件中使用动态颜色 #

直接通过颜色路径引用自定义颜色组，切换主题时会自动匹配对应模式的颜色：

<v-btn color="emotion.joy">喜悦按钮</v-btn>
<v-card color="emotion.trust" class="pa-4">信任卡片</v-card>

4. 动态切换主题 #

使用Vuetify的useTheme组合式API实现主题切换：

import { useTheme } from 'vuetify'

const theme = useTheme()

// 切换到深色主题
const switchToDark = () => {
  theme.global.name.value = 'dark'
}

// 切换到浅色主题
const switchToLight = () => {
  theme.global.name.value = 'light'
}

关键注意事项 #

• 所有自定义SCSS变量必须在@import 'vuetify/styles'之前定义，确保Vuetify能正确读取并替换默认值。
• 自定义颜色组的命名需符合Vuetify的颜色命名规则（字符串键值对），避免特殊字符。

内容的提问来源于stack exchange，提问作者Chairil Fauzi Firmansyah