How do i read this? This v-tab is creating a button and setting its properties but which of these properties responsible for text color?

Question

V-tab given below creates this button(right one) on v-app-bar

<v-tab
                :to="'/demo'"
                active-class="text--primary"
                class="
                  font-weight-bold
                  white--text
                  v-btn v-btn--depressed v-btn--flat v-btn--outlined
                  theme--dark
                  deep-purple--text
                  text--accent-4
                  mx-1
                  my-2
                "
                min-width="96"
                text
                >{{ $i18n.t("Registration") }}
              </v-tab>
              <v-tab :to="'/registration'"> </v-tab>

What i am meaning to ask is how do i read the [ class = "" ] of the v-tab and which of the properties is responsible for background color of v-btn and text color.

What i understood do for v-btn--outline creates a outlined button , v-btn--flat flat or round, mx1 and my-2 margins.

What white--text, theme--dark, text--accent-4, deep-purple--text are doing? and if i want the button to change to

<v-btn
                      outlined
                      color="#0e2672"
                      elevation="2"
                      dark
                      large
                      @click="login"
                      :loading="loading"
                      >{{ $i18n.t("Demo") }}</v-btn
                    >

what changes in the v-tab section should i make? And also i like get any reference material that would help me understand all this.

Answer 1

Background information & resources

Many developers today use 'utility classes` - libraries that automatically set styles according to class name (Reead more).

How to know which one affects background

This is the case here as well. To know which class property generates the button color you can either:

1. check the style sheet for this class.
2. OR Look into the styling library documentation (look up in the top of the html page for links to know which library it is)
3. OR Generate demo div and append classes to it to see how each class reacts/ gradually remove classes from your element.

This is as far as I can help whitout see the whole code (maybe give some link to source). Though some times generic answers are better as we can learn more from them. Hope this was helpful.

My guess: theme--dark is the only one affecting the color.

To change background

color you can :

1. try add some class according to this library
2. OR simply use: style="background-color: skyBlue” inside this V-tab element.