如何在Vuetify的每个组件中应用特定的颜色?

Question

我可以对项目中的整个组件应用特定的颜色吗?我的意思是，不要在每个标签上单独附加class，比如:

<v-icon left>mdi-phone-in-talk</v-icon>
<div class="pink darken-2 grey--text">tel</div>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-location-enter</v-icon>
<div class="pink darken-2 grey--text">loc</div>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-discord</v-icon>
<div class="pink darken-2 grey--text">name</div>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-email</v-icon>
<div class="pink darken-2 grey--text">mail</div>
</v-row>
// every div tag has "pink darken-2", seems quite WET

我想通过在组件的特定范围上应用某种颜色或在项目内的整个模板上应用某种颜色来实现这一目标，例如主题。有什么好的建议吗?

我知道我可以使用"主题配置"，但我不确定是否可以应用自定义色调(如按钮的背景色)。

**最佳:在项目中的所有组件上应用特定的颜色，而不需要在每个类上添加额外的代码**

Answer 1

我会简单地创建一个新组件，它可以在任何地方使用。

@/components/PinkGreyText.vue

<template>
<div class="pink darken-2 grey--text">
<slot />
</div>
</template>

现在注册组件:https://v2.vuejs.org/v2/guide/components-registration.html

现在你应该可以在任何地方使用它了，下面是用上面的自定义组件重写的原始代码片段。

<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-phone-in-talk</v-icon>
<pink-grey-text>tel</pink-grey-text>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-location-enter</v-icon>
<pink-grey-text>loc</pink-grey-text>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-discord</v-icon>
<pink-grey-text>name</pink-grey-text>
</v-row>
<v-row align="center" class="mx-0 my-2">
<v-icon left>mdi-email</v-icon>
<pink-grey-text>mail</pink-grey-text>
</v-row>