1

In Vuetify, I used a toolbar component and set its color to primary, so it is supposed to show up in blue, but I see it white:

<v-toolbar dark color="primary">
   <v-btn icon>
      <v-icon>more_vert</v-icon>
   </v-btn>
</v-toolbar>

Only when I use <v-toolbar dark> then I see the toolbar becomes black (as expected), when using <v-toolbar blue> (or any other color) it becomes white.

What may be wrong with my settings? I am using the default Vuetify theme (Vue.use(Vuetify)).

Billal Begueradj
  • 20,717
  • 43
  • 112
  • 130

1 Answers1

1

This might not be the answer but it might clarify it a bit. To style the toolbar you can set the theme just like you already did with:

<v-toolbar dark>

The dark can also be light.

To change the color you need to specify it with the color attribute:

<v-toolbar color="blue">

What you tried to do here won't work. As said the theme can either be light or dark.

<v-toolbar blue>

Have you by any change changed the primary color to a white?

Vue.use(Vuetify, {
  theme: {
    "primary": "#1976D2",
SuperDJ
  • 7,488
  • 11
  • 40
  • 74
  • 1
    Default primary is blue anyway afaik, so this cannot be correct? Unless I missed some recent update with that regard? – Traxo Sep 10 '18 at 08:23
  • I know the default primary is blue but that is why I was wondering if the OP somewhere changed it. If the OP didn't change the primary color there is some other problem or a bug. the `v-app` you mentioned seems like a pretty likely problem. I also know that Vuetify uses quite a lot if `!important` styling https://github.com/vuetifyjs/vuetify/issues/3400 which might also lead to unexpected behaviour when overwriting styles. – SuperDJ Sep 10 '18 at 08:30
  • Good points but setting a color on toolbar is 101, there should not be any problems with that so I'm 99.9% sure it's not wrapped inside `v-app` unless there were recent changes which I'm unaware of. We will see when they check back :) Regardless, I marked it as duplicate because the problem is the same as the linked one. – Traxo Sep 10 '18 at 08:32
  • In fact I tried that before asking (sorry, I forgot to mention it) but it did not take effect. Thank you for the feedback though – Billal Begueradj Sep 10 '18 at 08:56