CODEWITHSUNDEEP
htmlcssvue.jsvuetify.js
Christopher Waugh
Christopher Waugh

Reputation: 431

How can I change Vuetify's primary text color?

In a few places, vuetify sets text color to the "primary color" defined in its theme (eg. hilighting selected drop down menus). With my company's colors, this looks ugly. How can I set this to be different?

From what I can tell, this comes from these css rules:

.v-application.primary--text {
    color: #0064a2 !important;
    caret-color: #0064a2 !important;
}

When I change those, I can make the text color look nice. Unfortunately, they're generated by vuetify and marked as !important, so I can't seem to change them outside of the browser inspector.

I can add something like 'primary--text': 'color: #FF00FF' to the style theme, but that changes the background color, not the text color.

Here's a codepen example

I could use vuetify's themes exclusively for text, and set the rest of the element colors manually, but this doesn't seem to be their intended use. What should I do to change the text color?

Upvotes: 8

Views: 15010

Answers (2)

Riza Khan
Riza Khan

Reputation: 3158

Was having the same issue and Roy's answer guided me to this solution:

.my-app.v-application .primary--text {
    color: inherit !important;
}

This way, you aren't screwing up styling for other items that are using the primary color.

Upvotes: 0

Roy J
Roy J

Reputation: 43899

You can add a class to the app and create a more-specific CSS rule like so (this example doesn't actually run here, but you can copy it over to your codepen):

new Vue({
  el: '#app',
  vuetify: new Vuetify({
    theme: {
      dark: true,
      themes: {
        dark: {

          // Color is applied to selected drop down item
          primary: '#0064A2',
          
          // Uncomment this to make things worse
          // 'primary--text': '#FF00FF'
        }
      }
    }
  }),
})
.my-app.v-application .primary--text {
    color: white !important;
}
<div id="app">
  <v-app class="my-app">
    <!--Click the dropdown to see ugly colors-->
    <v-select :items="[undefined]"/>
  </v-app>
</div>

Upvotes: 8

Related Questions