Vuetify: [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 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.

[a-di-ez]

using an !important here is bad practice, hopefully they'll fix it

[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