vuetify: [Bug Report] Impossible to set color of List Item text

Environment

Vuetify Version: 2.1.1 Vue Version: 2.6.10 Browsers: Chrome 77.0.3865.90 OS: Mac OS 10.14.6

Steps to reproduce

Try to set color (text/icon) of not active list item with available tools:

color prop on list item;
active-class prop on list item;
class on list item;
css;
css with !important;
inline css;

Expected Behavior

Actual Behavior

Impossible to replace light* text color of dark list item without inline css. With inline css active tile is effected and cannot be styled to have dark* text color.

*light = the white color used for light theme backgrounds and dark theme texts. *dark = the black color used for dark theme backgrounds and white theme texts.

Reproduction Link

https://codepen.io/JesusCrow/pen/OJJPqVb?editors=0100

Other comments

I tried everything I could think up to create a list item that has a certain color for text and icon. I think that this is impossible without inline css. Using inline css disables me from styling active item text.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 19
Comments: 17 (6 by maintainers)

Commits related to this issue

Fix #9285 — committed to Tofandel/vuetify by Tofandel 3 years ago
fix(VList): add new prop active-color and contained fixes #9285 — committed to vuetifyjs/vuetify by johnleider 3 years ago
feat(VList): port to v3 (#13697) fixes #8137 fixes #9285 fixes #12826 Co-authored-by: Kael <kaelwd@gmail.com> — committed to vuetifyjs/vuetify by johnleider 3 years ago
feat(VList): port to v3 (#13697) fixes #8137 fixes #9285 fixes #12826 Co-authored-by: Kael <kaelwd@gmail.com> — committed to vuetifyjs/vuetify by johnleider 3 years ago
fix(VListItem): allow default color to change when inactive (#13719) Fixes #9285 — committed to vuetifyjs/vuetify by Tofandel 3 years ago
fix(VListItem): color doesn't apply for active route (#9285) — committed to Tofandel/vuetify by Tofandel 3 years ago
fix(Routable): isActive if exact and test (#9285) — committed to Tofandel/vuetify by Tofandel 3 years ago
fix(VListItem): allow default color to change when inactive (#14207) fixes #9285 — committed to vuetifyjs/vuetify by Tofandel 3 years ago

Most upvoted comments

So if I want to change color of text in list items located at my navigation drawer I should overwrite dark mode text color? Which would change color of ANY text anywhere where dark mode is used? And it still wouldn’t work, because of rules like:

.theme--dark.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
  color: #fff!important;
}

Or are you trying to suggest that I would create inline style with .theme--dark. Because I don’t know anything that could overturn last css statement with !important without using inline css. And I have never seen inline css selectors.

varna on Oct 11, 2019

I’ll make a PR, we should just remove the important keyword here, the selector is already quite powerful and it’s really not needed

Tofandel on May 28, 2021

Fixed in 34a2683

If you have any questions, please reach out to us in our Discord community.

johnleider on Jun 10, 2021

I’m trying to say you can do an easy customization that way as a temporary or permanent workaround to your issue. Just label your html code with class/id tags and reference them using the theme. As an example you could have your nav drawer as <v-navigation drawer class=“myClass” …/> and then in the css you could either use SASS/SCSS or just do something like .v-application.theme–light myClass { color:black; } and .v-application.theme–dark myClass { color:white; }

UglyHobbitFeet on Oct 11, 2019