如何在Vuetify中为项目所有组件统一应用指定颜色？

方案1：全局自定义主题（最推荐，完全匹配最优需求） #

Vuetify的主题配置完全支持自定义任意色调，包括按钮、卡片、图标等所有内置组件的默认颜色，配置后无需给任何组件额外加类，全局自动生效。
配置步骤：
找到项目中的Vuetify初始化文件（通常为src/plugins/vuetify.js或直接在main.js中配置），修改如下：

// Vuetify 3 配置示例
import { createVuetify } from 'vuetify'

const customTheme = {
  colors: {
    primary: '#ec407a', // 对应示例中的pink darken-2色值
    'on-primary': '#757575', // 对应示例中的grey--text文本色，即primary背景上的默认文本颜色
    // 可单独自定义指定组件的默认颜色，比如按钮背景色
    'button-bg': '#ec407a'
  }
}

export default createVuetify({
  theme: {
    defaultTheme: 'customTheme',
    themes: {
      customTheme
    }
  }
})

配置完成后所有Vuetify内置组件默认都会使用你定义的颜色作为主色调，比如v-btn默认背景就是你设置的粉色，文本默认是灰色，不需要额外添加类。

方案2：局部范围统一配色 #

如果只需要在某个页面、某个模块范围内生效，不需要修改全局配置，可以给父容器加一个自定义类，通过CSS后代选择器统一覆盖子元素样式，不需要给每个子标签加类。
示例代码：

<template>
  <!-- 给父容器加自定义类 -->
  <div class="custom-color-wrapper">
    <!-- 内部所有元素不需要加任何类，自动继承样式 -->
    <v-row align="center" class="mx-0 my-2">
      <v-icon left>mdi-phone-in-talk</v-icon>
      <div>tel</div>
    </v-row>
    <v-row align="center" class="mx-0 my-2">
      <v-icon left>mdi-location-enter</v-icon>
      <div>loc</div>
    </v-row>
    <!-- 其余重复元素省略 -->
  </div>
</template>

<style scoped>
.custom-color-wrapper div {
  background-color: #ec407a;
  color: #757575;
}
</style>

方案3：全局样式强制覆盖 #

如果需要修改所有自定义标签、非Vuetify内置组件的默认颜色，可以直接在全局样式文件（通常为src/styles/global.css或app.vue的全局style块）中添加全局规则：

/* 全局所有div默认应用指定颜色 */
div {
  background-color: #ec407a;
  color: #757575;
}
/* 单独指定所有Vuetify按钮的默认颜色 */
.v-btn {
  background-color: #ec407a !important;
  color: #757575 !important;
}

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