Vue2/Vuetify2迁移至Vue3/Vuetify3后自定义主题颜色使用问题

1. 改用 Vuetify3 内置颜色类 #

Vuetify3 调整了颜色类的命名规则，不再支持 Vue2 中primary+lighten-1分开写的方式，需要将颜色与色调合并为单个类：

• 文本颜色：text-{颜色}-{色调}，例如 text-primary-lighten-1
• 背景颜色：bg-{颜色}-{色调}，例如 bg-primary-lighten-1
• 字体大小类 text-h6 仍可正常使用

修改后的代码示例：

<v-card-title class="text-h6 bg-primary-lighten-1 text-white">
  卡片标题内容
</v-card-title>

注：添加text-white是为了保证浅色背景下文本可读性，可根据实际需求调整

2. 自定义作用域样式（解决CSS变量绑定失败问题） #

如果想用自定义类结合Vuetify主题变量，需要注意两个关键点：

• Vuetify3 的主题颜色变量格式为--v-theme-{颜色}或--v-theme-{颜色}-{色调}，比如主色浅1度是--v-theme-primary-lighten-1，可通过浏览器开发者工具查看元素的CSS变量确认具体名称。
• 由于<v-card-title>是Vuetify组件，作用域样式默认无法穿透到组件内部的文本元素，需使用Vue3的:deep()深度选择器。

示例代码：

<template>
  <v-card-title class="custom-card-title">
    卡片标题内容
  </v-card-title>
</template>

<style scoped>
/* 设置标题背景色 */
.custom-card-title {
  background-color: var(--v-theme-primary-lighten-1);
}

/* 设置标题文本样式，需用:deep()穿透到组件内部元素 */
.custom-card-title :deep(.v-card-title__text) {
  font-size: var(--v-theme-h6-font-size);
  color: var(--v-theme-on-primary); /* 用主题的文本适配色，保证可读性 */
}
</style>

3. 通过组件props直接绑定样式 #

Vuetify3 的<v-card-title>支持通过props直接配置样式，更符合Vue3的组件用法：

• title-tag="h6"：自动应用h6的字体样式，替代text-h6类
• color：设置文本颜色
• background-color：设置背景颜色

示例代码：

<v-card-title 
  title-tag="h6"
  background-color="primary-lighten-1"
  color="white"
>
  卡片标题内容
</v-card-title>

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