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

[varna]

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.

[UglyHobbitFeet]

FYI you can make custom css per theme. https://stackoverflow.com/questions/58067386/vuetify-themes-with-custom-css

[varna]

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.

[UglyHobbitFeet]

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]

To get to the text in a list item in a navigation drawer you can use css rules to drill down from the starting point of the navigation drawer. https://www.w3schools.com/cssref/sel_element_gt.asp

[varna]

Thanks! Totally forgot that I can add classes and ids without style and use them as selectors...

#SidebarNavigation .theme--dark.v-icon {
  color: #f2a52b !important;
}

[johnleider]

Can you please reduce this to a minimal reproduction, thank you!

[varna]

Vuetify "provides" 3 styling approaches via props color, class and active-class. This is very obscure. It's impossible to use a simple cascading approach to style list with provided api.

There are 6 colors of interest while styling item list:

• color (text color);
• background (background color);
• color:selected (text color of selected list item);
• background:selected (background color of selected list item);
• color:hover (text color of hovered list item);
• background:hover (background color of hovered list item).

I only wanted to apply background, color, background:selected and color:selected.
In this example:
✅Background should be black;
⚠️ Color of text should be grey;
⚠️ Background of active item should be amber;
✅Color of active item text should be green.

First problem is that you apply some sort of tint that is not removed when active-class prop is applied.

Second problem is that you can't simply set the text color of list item. Most of props only apply styles to selected items instead of normal items. Even if you manage to add some styles to normal text, it gets overwritten by some other styles applied by child components or !important css.

[acarlstein]

FYI you can make custom css per theme. https://stackoverflow.com/questions/58067386/vuetify-themes-with-custom-css

This solution only works if you are allowed to use styles that are not scoped. Plus, if you are allowed to use CSS class names inside the scoped style that are not in the template. If you have restrictions by using a strict version of ESLint, then the alternative is to set a global scss in your vue.config.js:

'use strict'

module.exports = {
  transpileDependencies: [
    'vuetify'
  ],
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "@/scss/app.scss";'
      }
    }
  }
}

And then put the CSS changes in the app.scss file.
However, make sure that your component has a non-empty style with `lang="scss", else it will not be included.

You can also check out the Webpack plugin as an alternative.

[runlong-yao]

The color property of v-list-item is not working,because of default color style in vuetify.
For easy use,color property's style should override default color style

[varna]

Still not Fixed ?

I don't think it will ever be fixed with such "verbose" description.
Should probably close this issue and create something like:

Bug: v-list-item class="color--text" is only applied to active-class

[Tofandel]

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

[johnleider]

I'm not sure that this is something we should touch in v2 at this point. I'll keep the conversation into consideration while working on v-list for v3.

[Tofandel]

Well just in case, the PR addresses this. The bug happens because the color prop applies all the time and the !important keyword was added to override this, a quick fix is to only apply the color class when the item is active (like the documentation suggests actually) and remove the important keyword. I would classify this as a minor breaking change, since the color class is not present anymore by default

Then it makes sense to also add a prop to be able to change the base color when the item is not active

Anyways, I saw so many dirty workarounds in the projects I oversee referencing this issue that I decided to tackle this, so I'd be happy to see it in v2.6 as well as its my understanding there is still several months of waiting until v3 is ready

Otherwise the 5 specifier long css selector + important will have to do 😞

[johnleider]

Fixed in 34a2683

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

[KaelWD]

Reverted in 4e4b1ea