Reputation: 431
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.
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
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
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