how could dark theme better handle outlines?

[JulienMaille]

I feel like some outlines would looks much better if they were light when the base color is dark. For instance QLineEdit and QSpinBox outlines. On most dark interfaces (for instance Windows GUI) they are lighter than the base color. Something like this maybe

How would you suggest to handle that?

[randrew]

It's true. PhantomStyle, right now, is programmed to look like light bouncing off of solid objects. Well, in a really abstract way. This works OK until the albedo is so dark that your eye cannot distinguish boundary features on the UI elements. At that point, some other abstract model is needed. For example, by making the framing of the objects be self-illuminating. "Bright frames" or however you want to call it.

I don't think your example mockup screenshot looks great as it is. There's not enough contrast on the framing for it to make any difference in legibility. However, if you were to make the base colors darker, then it would make sense. If you have a background that's 0,0,0 (all black), you can't shade it darker to create a frame. It would still be black.

What to do about this problem?

One answer is to not have color themes which are solid black for backgrounds. A lot of the recent demand for very dark color themes comes from mobile phones with OLED displays where darker colors use less energy, increasing battery life. Desktop and laptop computer displays usually use LCD screens with LED backlights, and there’s no difference in energy usage between light and dark colors.

Of course, that’s not a great answer. A lot of people will want to use a very dark color scheme as a matter of preference. And display technologies will change over time.

Imagine you are dragging a slider which adjusts the background color to be darker and darker. At some point, it crosses a threshold where frames around UI elements should stop being shaded as darker, and become brighter. This wouldn’t happen merely by having a background that’s darker than the text.

1. Light-on-dark: Black text, white background.
2. Dark-on-light, mid: Light text, dark background, but not so dark that shading cannot convey depth and framing.
3. Dark-on-light, dark: Light text, dark background, and frames around elements need to become invert or other shading hints need to be used to give depth.

PhantomStyle currently covers 1 and 2, but not 3.

The way to fix it would be to write some code which switches to an alternate path for calculating the derived-from-QPalette colors once some threshold is crossed.

I haven’t done this yet, because nothing has forced me to do it. But it’s probably something I will need to do at some point, so I’ll leave this issue open for now.

Thanks for bringing it up :)

[JulienMaille]

Thanks for taking some time to reply. I agree my example isn't good. My own theme is much darker but I wanted to use your own funhouse as an example. I agree with your 3 scenarios although it was not obvious before reading your comment.

So it seems the way to improve phantom style would require to

• fix the threshold that would trigger scenario nb. 3
• define the light shadows colors.

Should that take place in loadFromQPalette()?

[randrew]

Yeah, I think so.

Sorry, I wasn't trying to insult your example. Your motivation to use one of the existing themes from funhouse makes sense.

If you add an alternate path in loadFromQPalette() that calculates a bright framing color, you will probably need to check the widgets to make sure nothing has gone wrong.

[JulienMaille]

Something like this (using Stealth QPalette) would be a better example? I agree it is still a bit too light.

[randrew]

Yeah, that's closer. When the theme is that dark, I think that's around when it would want to switch over to using bright frames. But I think they need to be significantly brighter than that example :)

[JulienMaille]

In my PR it is slightly brighter. I felt that it should be subtle otherwise it may look like an highlighted status. I also flip the groupbox when the window color is too dark

[randrew]

Thanks for giving it a shot. I looked at it briefly, and it seems like a good start, but a lot more needs to be done. I don't think I can merge the PR as it is. I lot more types of outlines and frames need to be updated – scrollbars, group boxes, buttons, etc. I'll leave it open for now, and when I get some free time, I'll come back and poke around and see what else needs to be done.

[JulienMaille]

Well sometime the frame is here to highlight a widget, and sometime to give it some depth. I already handled groupboxes, but I don't think that scrollbars would look good with a light frame, what do you think?

[randrew]

Ah, sorry, I didn't see the group boxes yet. I don't know about the others. It would take me a while to experiment with it and set up contrast ratios.

[JulienMaille]

Light frame for groupbox is triggered by the QPalette::Window color being very Dark Dc::hack_isVeryDarkCol(pal.color(QPalette::Window)), which is false for Stealth (only the QPalette::Base color passes the test) I'll play with threshold and lightness and share some screenshot so you can see how it looks