No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Setting the text color on a QListItem on hover

    Framework
    1
    1
    242
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      tdumitr last edited by

      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
            &:before
              opacity: .1
            &:after
              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?

      1 Reply Last reply Reply Quote 0
      • First post
        Last post