Suggestion: move away from inverting text in list selections

Brainstorm
,
1

Currently selected list items appear as a block colour with inverted text/icon colour. Example:
list-selection

Personally I find this makes the list item difficult to read. Maybe there low contrast between the text and the background colour?

Compare this to the menu selection style, which just adds a semi-transparent background to the item (and a border):
menu-selection

I think that list items would be more legible if they followed the menu style of using a non-opaque background with good contrast with respect to the text colour.

1 Like
2

Interesting.
That doesn’t happen on my system with breeze dark.

Screenshot_20231204_203541
Screenshot_20231204_2035411150×893 81.9 KB

Screenshot_20231204_204040

€: Also doesn’t happen in a plasma 5 session with Breeze and Blue accent colour:
Screenshot_20231204_204725

Possibly an issue with your settings? Can you try if this also happens with a newly created user?

3

Looks like you’re on Plasma 6, while I’m still on Plasma 5. So maybe some things have changed in the update from 5 to 6. Still, I think the issue is visible in your dark-mode system settings screenshot. Also illustrated here https://pointieststick.files.wordpress.com/2023/12/screenshot_20231201_225336.jpeg and here https://pointieststick.files.wordpress.com/2023/11/image-9.png

I just think that using white text with a colour block background makes the text difficult to read.

1 Like
4

I can reproduce the inverted text on my tumbleweed plasma 5 session.

On my Arch system I don’t have it in neither a plasma 5 or 6 session (see my edit). Likely fixed with plasma 6, but maybe my config is just screwed up.

5

Part of the problem is that the lighter blue is already used for the hover effect.

The Places panel in Dolphin 24.02 does what you suggest. It uses an extremely light, almost invisible blue for the hover effect. I’m not sure if that’s the way to go…
Screenshot_20231205_151053

6

It’s all about preserving adequate contrast. If we want to stop inverting the text color in our selections, we need to desaturate or lighten the highlight color behind it.

This is doable by changing the Breeze color scheme. We also probably need to change the Breeze QStyle to change the menu selection style so that it uses the exact highlight color for selections, rather than a lightened version of it. That way the color scheme is always in charge.

7

I’ve just noticed the NeoChat sidebar items have pretty nice styling without inverting the text:
neochat-list-items

Maybe this style could be used in Breeze?

8

Quite a bit can be done in the color scheme. That is, at least on Lightly.

Screenshot_20231205_193106
Screenshot_20231205_1931061920×1080 76.2 KB

On Breeze…hardly.

Screenshot_20231205_193808
Screenshot_20231205_1938081920×1080 81.3 KB

9

NeoChat uses custom list delegates, a relic from the time before ItemDelegate had a rounded highlight style. Apps using that custom delegate need to be ported to use ItemDelegate or its subclasses, and any visual improvements it still retains should to be added to the standard stuff so everyone can benefit.

10

This is provided by the colour scheme so probably best to leave it alone.

However something related: for Klassy, I wrote a custom function that draws automatically either black or white foregrounds depending on which would give best contrast. This is user-selectable. Posting in-case it is of interest for reuse.

Function:

Usage:

11

Slightly off-topic, but I also wrote a function that tints any symbolic-style image/icon with a custom colour far better than anything that I could find in the KColorUtils or Qt effects libraries. (unless someone else knows of something else available, I think this would be a valuable addition to KColorUtils)

The tint functions in the KColorUtils and Qt effects libraries tint by replacing the colour black with your desired tint colour. This only works well in some cases.

My convertAlphaToColor function instead uses the alpha mask of the source image and paints in your tint colour per-pixel using that alpha mask: