Setting the text color on a QListItem on hover

  • I have a list in an app set in dark mode that contains clickable items. In this mode, the background of the app is #121212 and the background of the item the mouse hovers over is #333. That is it is #333 as long as the text color is white.

    The hover background color is linked to the text color of the list item. The only place in Quasar SCSS code that I found any reference that may be where the background color when hover is set is in css/core/visibility.sass where there is this section:

      .q-focusable:focus, .q-manual-focusable--focused, .q-hoverable:hover
        > .q-focus-helper
          background: currentColor
          opacity: .15
            opacity: .1
            opacity: .4

    Since the QItem <div> gets the q-hoverable class when set as clickable, it makes sense that this would be where the background color is set.

    The problem is that while this works great in light mode, in dark mode the results are less than visual pleasing. See the result when I tried to force the text color to orange on hover in this CodePen. You will notice that I have also tried to force the background color to #333, but that has no effect for some reason. I have not figured out how to override the default behavior for background color. What I would essentially like is to set the background color to a fixed color, rather than a function of currentColor. Does anybody have any suggestion how I could make that happen?

Log in to reply