How to change/override the default color of a switch label in vuetify?

Question

As you can see from the offical docs of vuetify, the labels for switches have their own pre defined color. How can i override them to get black text? I am passing the switch as a prop from a global component called form structure into another component that i have named "Primary"

https://vuetifyjs.com/en/components/selection-controls

<v-switch v-if="externalSwitch" model="switch2":label="externalSwitchLabel"> 
</v-switch>

<v-layout v-for="info in information" :key="info.title">
  <v-flex>
    <form-structure :externalSwitchLabel="`${info.title}`" 
      :externalSwitch="true" :hasSubTitle="true" :subTitle="`${info.status}`" 
      :script="`${info.script}`">
    </form-structure>
  </v-flex>
</v-layout>

My array looks like this:

information : [
  {title: "Something1", status:"active", script: "Hello"},
  {title: "Something2", status:"in Progress", script: "Ciao" }
]

My Css looks like this:

<style scoped>
.v-label.theme--light {
  color: black
}
</style>

Have you tried the following? `.v-label.theme--light{ color: black !important; }` — Max Martynov, Jan 25 '19 at 21:53
yeah i tried it, it didn't work. It only works if i take out scoped from my style but then it changes every label on every other page and on every text field as well. — , Jan 25 '19 at 21:54
See this answer to understand why your css is not working https://stackoverflow.com/a/50985784/1981247 — Traxo, Jan 27 '19 at 15:13

score 7 · Answer 1 · edited Mar 31 '21 at 13:09

7

I tried the slot approach and it worked for me:

<v-switch>
   <template v-slot:label>
      <span class="input__label">Label text</span>
   </template>
</v-switch>

CSS looks like this:

.input__label {
   color: black;
}

edited Mar 31 '21 at 13:09

kissu

40,416
14
65
133

answered May 11 '20 at 04:33

ABucin

936
1
7
18

Boussadjra Brahim · Answer 2 · 2019-01-25T22:27:24.733

1

You could use color prop by giving it rgb or hexadecimal value as follows :

new Vue({
  el: '#app',
  data () {
    return {
   
      switch1: true,
      switch2: true
    }
  }
})

.v-input__slot .v-label{
color: black!important
}

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app">
  <v-app id="inspire">
    <v-container fluid px-0>
     
      <v-switch
        :label="`Switch 1: ${switch1.toString()}`"
        v-model="switch1"
                color="#f45525"
      ></v-switch>
       <v-switch
        :label="`Switch 2: ${switch2.toString()}`"
        v-model="switch2"
                color="rgb(0,150,45)"
      ></v-switch>
    </v-container>
  </v-app>
</div>

edited Jan 25 '19 at 22:27

answered Jan 25 '19 at 21:50

Boussadjra Brahim

82,684
19
144
164

1

Thanks for the help but passing color as prop doesn't work either. – Jan 25 '19 at 21:57
oh i see, i meant the color of the text itself so in this case it would be "color of Switch 1 :true to black" and not of the switch itself. – Jan 25 '19 at 22:01
sorry i misunderstood you, but i'm searching a way to fix that – Boussadjra Brahim Jan 25 '19 at 22:14
try the css rule that i added in my answer – Boussadjra Brahim Jan 25 '19 at 22:27
1

Sorry brother but that doesn't help either. – Jan 25 '19 at 22:40

score 1 · Answer 3 · edited Mar 31 '21 at 13:08

If you don't want to override the default style for the label, you can pass in a slot to v-switch with your desired styled element.

Example:

<v-switch v-model="enableScreenshot" label="Enable Screenshot">
   <template v-slot:label>
      <span class="v-label-white">Enable Screenshot</span>
   </template>
</v-switch>

Then your style:

.v-label-white {
  color: white;
  font-weight: bolder
}

Senne Strubbe · Answer 4 · 2022-09-05T14:58:43.193

I stumbled upon this problem with vuetify for vue2 a while ago. Somewhere I found a solution, probably on stackOverflow. What helped me was using this:

  <style scoped>   
  .v-input--checkbox  >>> label {
      color: black ;
      /* background-color: orange; */
  } 
  </style>

When upgrading the project to vue3, using vuetify for vue3, the problem came back. I found the solution for this, the important thing here is to reset the opacity to 100.

  <style scoped>   
  .v-checkbox :deep(label) {
      /* color: black ; */
      /* background-color: orange; */
      opacity: 100;   
  } 
  </style>

Before any of you ask: No, I don't know what the >>> means, I just know it works.

score 1 · Answer 5 · answered Oct 14 '22 at 09:11

My solution for Vuetify v3

Update the default color of the parent and thumb:

.v-selection-control__wrapper,.v-switch__thumb {
  color: deeppink;
}

And keep using color for the active-color

Codepen

note: the css is not scoped, but you can add more specific selectors to be sure only your specific switch is affected

score 0 · Answer 6 · edited Mar 31 '21 at 13:09

0

Try this.

.v-input--is-label-active label {
    color: red !important;
}

edited Mar 31 '21 at 13:09

kissu

40,416
14
65
133

answered Aug 23 '19 at 11:57

Jason

1,091
4
19
40

score 0 · Answer 7 · edited Mar 31 '21 at 13:08

0

You only need to remove scoped from style:

<style>
.v-label.theme--light{
  color: black
}
</style>

This means that the style will be applied globally in the application.

edited Mar 31 '21 at 13:08

kissu

40,416
14
65
133

answered Sep 23 '20 at 23:49

Aramillo

3,176
3
24
49

How to change/override the default color of a switch label in vuetify?

7 Answers7

My solution for Vuetify v3

Linked