CODEWITHSUNDEEP
vuetify.js
Lee
Lee

Reputation: 62

How can I apply certain color in every component in Vuetify?

Can I apply a certain color to the whole components within the projects? I mean, not attaching class individually on every tags like: 

<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

I want to achieve this goal by either to apply a certain color on the specific scope of components or to do it on the whole template within the project, such like a theme. Any good suggestion?

I know I could use "theme configuration", but I'm not sure whether I can apply the customed color tone (like a background color of button) or not.

** Best: applying a certain color to the whole components within the project with no additional code on each classes **

Upvotes: 0

Views: 196

Answers (1)

Tarkan
Tarkan

Reputation: 561

I would simply create a new component, that can be used anywhere.

@/components/PinkGreyText.vue

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

Now register the component: https://v2.vuejs.org/v2/guide/components-registration.html

Now you should be able to use it anywhere, below is your original snippet rewritten using the custom component above.

<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>

Upvotes: 2

Related Questions