Overview
Examples
Screenshots
Comparisons
Applications
Download
Documentation
Tutorials
Bazaar
Status & Roadmap
FAQ
Authors & License
Forums
Funding Ultimate++
Search on this site
Search in forums












SourceForge.net Logo
Home » Community » U++ community news and announcements » DarkTheme function parameters changed
DarkTheme function parameters changed [message #60794] Tue, 10 September 2024 16:29 Go to next message
mirek is currently offline  mirek
Messages: 14255
Registered: November 2005
Ultimate Member
I have tried tuning DarkTheme function (function that "inverts" colors designed for light theme into "dark" colors) a bit as I was not happy about blue colors converted to DarkTheme. This time, I have approached it really emprically and created upptst/DarkTheme application (supposed to run in light theme) to finetune 3 relevant parameters. Would you find my current set of parameters wanting, you can try yourself and suggest different set...

index.php?t=getfile&id=6961&private=0
Re: DarkTheme function parameters changed [message #60804 is a reply to message #60794] Thu, 12 September 2024 12:03 Go to previous messageGo to next message
Tom1
Messages: 1301
Registered: March 2007
Ultimate Contributor
Hi,

I wish I could help here. I tried this and could not figure out any sensible settings. My red-green colorblindness seems to make it very difficult (or impossible) to figure out what might work well for all. On the other hand, I can tell what does not work well for red-green colorblind people, so I'm happy to help on that.

For all GUI designers, I recommend reading the Wikipedia article on color blindness... all the way down to Digital design at least Smile

https://en.wikipedia.org/wiki/Color_blindness

Best regards,

Tom
Re: DarkTheme function parameters changed [message #60806 is a reply to message #60804] Thu, 12 September 2024 16:32 Go to previous messageGo to next message
Tom1
Messages: 1301
Registered: March 2007
Ultimate Contributor
Hi Mirek,

I've been surfing the web today about dark theme and UI coloring. Didn't find any usable algorithms for 'color inversion'.

Anyway, I found some interesting reading about dark theme and color usage here:

https://m2.material.io/design/color/dark-theme.html


Best regards,

Tom
Re: DarkTheme function parameters changed [message #60810 is a reply to message #60806] Sat, 14 September 2024 16:31 Go to previous messageGo to next message
mirek is currently offline  mirek
Messages: 14255
Registered: November 2005
Ultimate Member
I have pushed another attempt at improved DarkTheme function. Please check.

Also, upptst/DarkTheme is also updated, maybe you can find better set of constants...

(Note: I am doing all this because previous algorithm blue undo arrow icon was basically translated to white... so trying something that leaves it blue).

Mirek
Re: DarkTheme function parameters changed [message #60812 is a reply to message #60810] Sat, 14 September 2024 22:32 Go to previous messageGo to next message
Tom1
Messages: 1301
Registered: March 2007
Ultimate Contributor
Hi Mirek,

Very, very nice! After tuning for a good while, I ended up with 0.24, 0.7, 0.16 ... but then I looked at the old code and there was within a comment 0.21, 0.72, 0.07 for physiologically correct values. I guess they are even better with this new algorithm.

Now that DarkTheme() 'color inversion' works so great, maybe a slight tuning of default TheIDE text colors (along the lines laid out in material.io Dark theme documentation) is in place. I'm thinking about:
1. replacing any saturated (default) text colors with non-saturated pastel colors
2. checking the text contrast with those colors on both light and dark background

This might offer more balanced light/dark theme experience (... maybe).

Best regards,

Tom
Re: DarkTheme function parameters changed [message #60813 is a reply to message #60810] Sat, 14 September 2024 23:18 Go to previous messageGo to next message
Tom1
Messages: 1301
Registered: March 2007
Ultimate Contributor
mirek wrote on Sat, 14 September 2024 17:31
(Note: I am doing all this because previous algorithm blue undo arrow icon was basically translated to white... so trying something that leaves it blue).

Mirek

Hi,

The undo arrow icon seems to be saturated blue. So, if you do re-coloring for the icon:
index.php?t=getfile&id=6964&private=0
, or something similar, you should get a more balanced light/dark theme behavior. After all, blue is a very small contributor to the amount of luminance and therefore it is logical that the always dark blue becomes very light blue.

Best regards,

Tom
Re: DarkTheme function parameters changed [message #60814 is a reply to message #60812] Sun, 15 September 2024 10:10 Go to previous messageGo to next message
mirek is currently offline  mirek
Messages: 14255
Registered: November 2005
Ultimate Member
Tom1 wrote on Sat, 14 September 2024 22:32
Hi Mirek,

Very, very nice! After tuning for a good while, I ended up with 0.24, 0.7, 0.16 ... but then I looked at the old code and there was within a comment 0.21, 0.72, 0.07 for physiologically correct values. I guess they are even better with this new algorithm.



Well.. The whole purpose is that with previous algorithm, LtRed becomes pink, Blue becomes white. Which is true here as well, with "physiologically correct" values. (The reason is simple - LtBlue is still dark color and we do not have enough range to make it light).

So it is all about compromise - after all, what matters is that colored texts remain readable while retaining reasonable color information. Warning text still needs to be red (and preferably not pink).

Mirek

Re: DarkTheme function parameters changed [message #60819 is a reply to message #60814] Mon, 16 September 2024 13:01 Go to previous messageGo to next message
Tom1
Messages: 1301
Registered: March 2007
Ultimate Contributor
Hi Mirek,

These two functions can be useful tools when working with colors, so please feel free to merge them in Color.h / Color.cpp if you like:
// Formula from https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

double RelativeLuminance(Color color) {
	auto comp = [&] (double c){
		c /= 255;
		return (c <= 0.03928) ? c / 12.92 : pow((c + 0.055) / 1.055, 2.4);
	};
	return comp(color.GetR()) * 0.2126 + comp(color.GetG()) * 0.7152 + comp(color.GetB()) * 0.0722;
}

// Formula from https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef

double ContrastRatio(Color c1, Color c2) {
	double rl1 = RelativeLuminance(c1);
	double rl2 = RelativeLuminance(c2);
	return (max(rl1, rl2) + 0.05) / (min(rl1, rl2) + 0.05);
}

Best regards,

Tom
Re: DarkTheme function parameters changed [message #60822 is a reply to message #60819] Tue, 17 September 2024 09:10 Go to previous messageGo to next message
mirek is currently offline  mirek
Messages: 14255
Registered: November 2005
Ultimate Member
Tom1 wrote on Mon, 16 September 2024 13:01
Hi Mirek,

These two functions can be useful tools when working with colors, so please feel free to merge them in Color.h / Color.cpp if you like:
// Formula from https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

double RelativeLuminance(Color color) {
	auto comp = [&] (double c){
		c /= 255;
		return (c <= 0.03928) ? c / 12.92 : pow((c + 0.055) / 1.055, 2.4);
	};
	return comp(color.GetR()) * 0.2126 + comp(color.GetG()) * 0.7152 + comp(color.GetB()) * 0.0722;
}

// Formula from https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef

double ContrastRatio(Color c1, Color c2) {
	double rl1 = RelativeLuminance(c1);
	double rl2 = RelativeLuminance(c2);
	return (max(rl1, rl2) + 0.05) / (min(rl1, rl2) + 0.05);
}

Best regards,

Tom


Why not... added.
Re: DarkTheme function parameters changed [message #60824 is a reply to message #60812] Tue, 17 September 2024 17:00 Go to previous messageGo to next message
mirek is currently offline  mirek
Messages: 14255
Registered: November 2005
Ultimate Member
Tom1 wrote on Sat, 14 September 2024 22:32
Now that DarkTheme() 'color inversion' works so great, maybe a slight tuning of default TheIDE text colors (along the lines laid out in material.io Dark theme documentation) is in place. I'm thinking about:


Default scheme should always be "host". However, I can add alternative dark theme, if you supply one. It is quite easy, check

CtrlLib/Ch.cpp:716

Mirek
Re: DarkTheme function parameters changed [message #60826 is a reply to message #60824] Tue, 17 September 2024 20:31 Go to previous messageGo to next message
Tom1
Messages: 1301
Registered: March 2007
Ultimate Contributor
mirek wrote on Tue, 17 September 2024 18:00
Tom1 wrote on Sat, 14 September 2024 22:32
Now that DarkTheme() 'color inversion' works so great, maybe a slight tuning of default TheIDE text colors (along the lines laid out in material.io Dark theme documentation) is in place. I'm thinking about:


Default scheme should always be "host". However, I can add alternative dark theme, if you supply one. It is quite easy, check

CtrlLib/Ch.cpp:716

Mirek

I was actually just thinking about TheIDE accent colors for code editing and other views... just to adjust the dark variants to view nicely on dark backgrounds. But yes, this involves dark theme tuning as well to get contrast optimized.

I remember working on Win32 emulated dark theme colors. The trick was (and I think still is) that many definitions come from platform and mostly only colors need to be adjusted for the dark theme. I recall that the color changes had to be written in-line within ChHostSkin(). If I just create a function called e.g. ChMyCustomSkin(), similar to e.g. ChDarkSkin(), I will not get platform shapes/styles for widgets, but something else instead. Therefore, some reorganization would be helpful:

It would be nice to have theme loading clearly split to two parts:

1. Load system colors (custom or platform) and store with "SColor*_Write();" functions like before.
2. Load shapes/styles from host like in ChHostSkin() (or load custom shapes/styles), and combine with preloaded SColor*() colors for a complete theme.

Also live theme changes would be nice... We have talked about this before and at that time you warned about a potential problem that arises with some controls caching colors internally. Still, it would be an interesting improvement. (I can even imagine a generic Theme(Color)EditorDialog after live theme changes feature has been introduced...)

Best regards,

Tom
Re: DarkTheme function parameters changed [message #60830 is a reply to message #60826] Tue, 17 September 2024 23:45 Go to previous messageGo to next message
mirek is currently offline  mirek
Messages: 14255
Registered: November 2005
Ultimate Member
Tom1 wrote on Tue, 17 September 2024 20:31

It would be nice to have theme loading clearly split to two parts:

1. Load system colors (custom or platform) and store with "SColor*_Write();" functions like before.
2. Load shapes/styles from host like in ChHostSkin() (or load custom shapes/styles), and combine with preloaded SColor*() colors for a complete theme.



You cannot load just shapes. All 3 hosts we use paint the whole widget (think images of widgets).

Mirek
Re: DarkTheme function parameters changed [message #60841 is a reply to message #60830] Wed, 18 September 2024 21:11 Go to previous messageGo to next message
Tom1
Messages: 1301
Registered: March 2007
Ultimate Contributor
mirek wrote on Wed, 18 September 2024 00:45
Tom1 wrote on Tue, 17 September 2024 20:31

It would be nice to have theme loading clearly split to two parts:

1. Load system colors (custom or platform) and store with "SColor*_Write();" functions like before.
2. Load shapes/styles from host like in ChHostSkin() (or load custom shapes/styles), and combine with preloaded SColor*() colors for a complete theme.



You cannot load just shapes. All 3 hosts we use paint the whole widget (think images of widgets).

Mirek
>
OK, I see. So, basically we're stuck with the colors given by host, right? I mean for buttons, scroll bars and more...

Is it also true that if full control of colors is desired, the widgets need to be created internally like ChClassicSkin() and ChStdSkin() do?

BR, Tom
Re: DarkTheme function parameters changed [message #60843 is a reply to message #60841] Wed, 18 September 2024 21:59 Go to previous messageGo to next message
mirek is currently offline  mirek
Messages: 14255
Registered: November 2005
Ultimate Member
Tom1 wrote on Wed, 18 September 2024 21:11
mirek wrote on Wed, 18 September 2024 00:45
Tom1 wrote on Tue, 17 September 2024 20:31

It would be nice to have theme loading clearly split to two parts:

1. Load system colors (custom or platform) and store with "SColor*_Write();" functions like before.
2. Load shapes/styles from host like in ChHostSkin() (or load custom shapes/styles), and combine with preloaded SColor*() colors for a complete theme.



You cannot load just shapes. All 3 hosts we use paint the whole widget (think images of widgets).

Mirek
>
OK, I see. So, basically we're stuck with the colors given by host, right? I mean for buttons, scroll bars and more...


No, we can choose any colors we wish - but we need to draw our widgets too... but if you have checked to code reference I sent, it is doing exactly that there...

DarkTheme in windows is currently sort of hack - we apply DarkTheme on light theme widgets (because that is what API we currently use is returning).

Mirek
Re: DarkTheme function parameters changed [message #60845 is a reply to message #60843] Wed, 18 September 2024 22:37 Go to previous messageGo to next message
Tom1
Messages: 1301
Registered: March 2007
Ultimate Contributor
mirek wrote on Wed, 18 September 2024 22:59

DarkTheme in windows is currently sort of hack - we apply DarkTheme on light theme widgets (because that is what API we currently use is returning).

Mirek

Yes, I know it all too well from 2022:

https://www.ultimatepp.org/forums/index.php?t=msg&th=106 57&goto=57856&#msg_57856

Well, I'll think about this theming, and let you know if I come up with anything potentially useful.

Best regards,

Tom
Re: DarkTheme function parameters changed [message #60895 is a reply to message #60845] Sun, 06 October 2024 14:46 Go to previous messageGo to next message
Lance is currently offline  Lance
Messages: 656
Registered: March 2007
Contributor
Thanks to work of both of Mirek and Tom1, Dark Theme now works very naturally on gnome.

Here is a small feature request that may improve user experience on gnome or possible x11 as a whole. But if it's too complicated or unworthy, just ignore it.

On more recent gnome (or at least ubuntu version of gnome), we can quickly switch between darkstyle and normal style using the dropdown menu:

index.php?t=getfile&id=6971&private=0

Native applications respond to the changes immediately while, for theide, we have to restart it after theme changes. This makes theide and upp appliations stand out in a negative way.

I was told dconf command tool can monitor the changes. Indeed

$dconf watch /org/gnome/desktop/interface/color-scheme

will report the changes. Or underneath, gio, can be used somehow to access the settings or possibly even subscribe to certain changes, which I don't know how.

If upp can listen to the event and request all Ctrl to Refresh (hierachically) themselves, and all SColorXXX returns a reference (to a static variable who has application-long life time which will by updated by Upp at theme-changes), a upp application can behave more similar to a native gnome/x11 application.

However, all user programs alos need to change accordingly to use Color& instead of Color to store SColorXXXs that they use in their own chameleon style. But this won't break their programs catastrophically even if they don't: any part that they call SColorXXX on the site will be reflectly after first Refresh, while the part they stored a copy of SColorXXX, in, for example, a Chameleon style, will only be corrected after a restart.

More can be involved than just color, eg, icon,etc. But it could be a simple , albeit tedious, work for Mirek.
Re: DarkTheme function parameters changed [message #60897 is a reply to message #60895] Sun, 06 October 2024 21:35 Go to previous messageGo to next message
mirek is currently offline  mirek
Messages: 14255
Registered: November 2005
Ultimate Member
The problem with switching the theme is actually a problem of all those stored colors in all widgets and data. E.g. what to do with AttrText that has some dark adjusted ink stored in it.

U++ can actually switch the theme with immediate response (just check upptst::ChStyle, it does just that - but notice that background in example ArrayCtrl does not change), the reson for restart is actually to make developer's live easier.

But OK, I can add "SkinChanged" virtual method and leave the immense work of reskining color in developer maybe...

Mirek
Re: DarkTheme function parameters changed [message #60898 is a reply to message #60895] Sun, 06 October 2024 21:37 Go to previous messageGo to next message
mirek is currently offline  mirek
Messages: 14255
Registered: November 2005
Ultimate Member
Lance wrote on Sun, 06 October 2024 14:46

If upp can listen to the event and request all Ctrl to Refresh (hierachically) themselves, and all SColorXXX returns a reference (to a static variable who has application-long life time which will by updated by Upp at theme-changes), a upp application can behave more similar to a native gnome/x11 application.

However, all user programs alos need to change accordingly to use Color& instead of Color to store SColorXXXs that they use in their own chameleon style. But this won't break their programs catastrophically even if they don't: any part that they call SColorXXX on the site will be reflectly after first Refresh, while the part they stored a copy of SColorXXX, in, for example, a Chameleon style, will only be corrected after a restart.


That is not enough, look at this:

CtrlLib/ArrayCtrl.h:686

ArrayCtrl& EvenRowColor(Color paper = Blend(SColorMark, SColorPaper, 220), Color ink = SColorText);

[Updated on: Sun, 06 October 2024 21:38]

Report message to a moderator

Re: DarkTheme function parameters changed [message #60899 is a reply to message #60897] Sun, 06 October 2024 22:32 Go to previous messageGo to next message
Lance is currently offline  Lance
Messages: 656
Registered: March 2007
Contributor
mirek wrote on Sun, 06 October 2024 15:35
The problem with switching the theme is actually a problem of all those stored colors in all widgets and data. E.g. what to do with AttrText that has some dark adjusted ink stored in it.

U++ can actually switch the theme with immediate response (just check upptst::ChStyle, it does just that - but notice that background in example ArrayCtrl does not change), the reson for restart is actually to make developer's live easier.

But OK, I can add "SkinChanged" virtual method and leave the immense work of reskining color in developer maybe...

Mirek


Thanks for the information. Please don't add "SkinChanged". I was thinking maybe add a layer of indirection (Store reference to a static Color variable instead of a copy of it in Chameleon Style). If it is more complicated than that, it's not worth it.
Re: DarkTheme function parameters changed [message #60900 is a reply to message #60898] Sun, 06 October 2024 22:34 Go to previous messageGo to previous message
Lance is currently offline  Lance
Messages: 656
Registered: March 2007
Contributor
mirek wrote on Sun, 06 October 2024 15:37

That is not enough, look at this:

CtrlLib/ArrayCtrl.h:686

ArrayCtrl& EvenRowColor(Color paper = Blend(SColorMark, SColorPaper, 220), Color ink = SColorText);

Thanks!
Previous Topic: SetRect "MegaRect" support...
Next Topic: 2024rc
Goto Forum:
  


Current Time: Tue Apr 29 09:30:57 CEST 2025

Total time taken to generate the page: 0.01272 seconds