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 » U++ Library support » Look and Chameleon Technology » New dark theme thread
New dark theme thread [message #51604] Fri, 19 April 2019 12:50 Go to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
So I tested out 2019.1 and for the first time I used dark mode support.

Aesthetics are subjective, so some may like it, some may not. I don't. Nor do I think that probably most graphics designers will. Or people with eyes. Unless you are somebody who needs high contrast themes.

Beyond that, there is eyestrain. It is well known that high contrast colors cause eye strain. There are several design docs upon design docs out there giving good practices. You can use formulas to compute contrast ratios.

The new dark mode support is not really a dark mode, but a high contrast theme.

I personally get a terrible eye pain when using this theme.

I don't want to highjack the official 2019.1 thread, so let's have a discussion here.

I spent the better part of the day trying to reduce eye strain and bring colors under check. It will be a long process, many controls to test, lots of trial and error.

But here are the results of today's work, before above, after bellow:

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


The toolbar is hot pink to see if this color affects any other GUI elements, in U++ or Win 10 apps. So far it doesn't.

PS: TheIDE needs to have an option to turn of dark mode, even if the system is in dark mode, until we fix this mode, or forever. It should default as false, i.e. use dark mode. Basically not call SetDarkThemeEnabled if dark mode is disabled.
  • Attachment: comp1.png
    (Size: 31.81KB, Downloaded 345 times)

[Updated on: Fri, 19 April 2019 12:50]

Report message to a moderator

Re: New dark theme thread [message #51623 is a reply to message #51604] Mon, 22 April 2019 10:11 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
Another day of progress...

I'm having problems with adjusting the width of the separator in the menu and I'm not sure about the separator bezel as a whole and using native icons in menus, but the original radio menu option does not fit it with the overall look IMHO, so improvement?

What do you guys think?

index.php?t=getfile&id=5813&private=0
  • Attachment: comp2.png
    (Size: 37.73KB, Downloaded 340 times)
Re: New dark theme thread [message #51625 is a reply to message #51623] Mon, 22 April 2019 10:32 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
Oh, and incredibly weird bug.

If you compare the screenshot from the first post and the screenshot from the second, several option boxes are missing.

Adding the menu causes them to not be visible.

I'll try and produce a compilable minimal testcase.
Re: New dark theme thread [message #51630 is a reply to message #51625] Mon, 22 April 2019 12:36 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
I also did one of the most used controls in U++: clock! Laughing

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


A few observations:
1. I could not figure out how to control the color for those two bars on the left and right. Looks like some frame/backpaint problems.
2. This is not that important, but maybe we should update it with Painter for smooth AA lines?



  • Attachment: comp3.png
    (Size: 9.67KB, Downloaded 317 times)
Re: New dark theme thread [message #51631 is a reply to message #51630] Mon, 22 April 2019 12:39 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
Continuing here because of 1 image/reply.

3. I used Material design color for red blue and green there. There are tables that allow you to make a color good for dark mode. We have SRed, but here is comparison:

index.php?t=getfile&id=5816&private=0
  • Attachment: red.png
    (Size: 2.05KB, Downloaded 309 times)
Re: New dark theme thread [message #51633 is a reply to message #51630] Mon, 22 April 2019 13:22 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
cbpporter wrote on Mon, 22 April 2019 13:36

1. I could not figure out how to control the color for those two bars on the left and right. Looks like some frame/backpaint problems.

Yeah, figured it out: those are two LineCtrl!

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

  • Attachment: comp4.png
    (Size: 3.12KB, Downloaded 305 times)
Re: New dark theme thread [message #51635 is a reply to message #51633] Mon, 22 April 2019 17:50 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
I'm relatively close to success...

Default autodetects dark and light, but you can also force dark, force light our use my custom skin:

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


Calendar needs a bit more work...
  • Attachment: comp5.png
    (Size: 36.50KB, Downloaded 306 times)
Re: New dark theme thread [message #51638 is a reply to message #51604] Mon, 22 April 2019 22:22 Go to previous messageGo to next message
mr_ped is currently offline  mr_ped
Messages: 808
Registered: November 2005
Location: Czech Republic - Praha
Experienced Contributor

Seems like good progress to me.

Still looks kinda amateur compared to KDE5 dark breeze theme (default dark in KDE5), but then again, that thing took decade+ to end in its current state, so I don't expect anyone to catch up after few hours of work, for the amount of time you are working on this, it looks very very good.
Re: New dark theme thread [message #51639 is a reply to message #51638] Mon, 22 April 2019 23:08 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
mr_ped wrote on Mon, 22 April 2019 23:22
Seems like good progress to me.

Still looks kinda amateur compared to KDE5 dark breeze theme (default dark in KDE5), but then again, that thing took decade+ to end in its current state, so I don't expect anyone to catch up after few hours of work, for the amount of time you are working on this, it looks very very good.

Thanks!

I'm between two worlds: half of my effort is fixing bugs and parametrizing the skin for a future custom skin (make the current U++ implementation look good, but in line with what exists today), half trying to implement a good skin (I like this one https://midnightsketch.com/)

I wouldn't use exactly those separator frames, but for now they need to work correctly with dark mode and they don't really, so for now it will look like this.

The left separator frame is still wrong I think.

Once everything is fully skinable to my liking and I ran tests even with RNG colors, we can work on making a custom skin that doesn't care about Win10 and looks hopefully less amateurish.
Re: New dark theme thread [message #51651 is a reply to message #51639] Tue, 23 April 2019 12:33 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
Today I familiarized myself with the various TabCtrls.

In the screenshot bellow you can see that booting up in light mode then turning on dark mode creates some black on black tabs. This is fixed with my dynamic theme change support and at the bottom you can see the new skin for the tabs.

I couldn't skin the body of the tab and the tabs themselves no mater how much I looked over ChHostSkin. For now it is a mystery how that works and where does that black come from... Hopefully one day I can skin them with SColorFace().

Oh, and there are more shenanigans with FileTabs icons. First of all, there is like a 10% chance they show up. Most of the time they are not visible at all. Then they are either light or dark per execution of the application. Weird... I'm investigating NativePathIcon, maybe that is the problem...

index.php?t=getfile&id=5822&private=0
  • Attachment: comp6.png
    (Size: 21.43KB, Downloaded 263 times)

[Updated on: Tue, 23 April 2019 12:35]

Report message to a moderator

Re: New dark theme thread [message #51652 is a reply to message #51651] Tue, 23 April 2019 14:48 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
This is quite the (unplanned) project!

I am restructuring my effort into 3 subprojects...

Project A
This will be a fixed vanilla dark mode. It will look like today's U++ dark mode, trying to emulate system colors. The idea is that you set dark theme, drop any control in any window, do nothing else special and it will look alright, no bugs, no contrast issues.

This means that the dark mode will continue to be "high contrast".

A few minor fixes and changes are needed to U++ and I will want these changes committed to the official repo. Basically a few things can't be skined and a few bugs.

Part of this project will be to provide hand edited darkmode icons where needed for the default ones, like file open and copy paste, but this part I'm probably not going to do myself.

Project B
This will take fixes from Project A and add on top of them a new low contrast dark skin, which mean black will be replaced by dark gray, super light gray/white will be replaced by darker gray, including for things like FieldFrame.

Pro: this skin will look nice and modern and will not be high contrast and eye straining.

Cons: some of the system looks, like buttons and edit fields and tabs will no longer be system but will be fully custom and theme specific.

I will put this into bazaar or something and use it for my apps, never using the U++ default. And since it is heavily skinned, you can use it on Linux too if you want a consistent experience.

Project C
This will take the skin from Project B and make some very specific non-universal changes to allow all my apps to seamlessly change skin at runtime.

This will offer the following guarantee: an app launching with dark mode will be pixel perfect equal to the same app launched in light mode, but the user has switched to dark mode.
Re: New dark theme thread [message #51669 is a reply to message #51652] Wed, 24 April 2019 11:18 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
So Project A is in full force!

To reiterate, I have two new skins and on the fly skin changing at runtime, but the goal of Project A is to make more U++ compatible with my solution with minimal changes while at the same time fixing bugs.

So standard U++ Dark mode attached.

I'll submit the fixes in the main thread.

Before:
index.php?t=getfile&id=5825&private=0
  • Attachment: before1.png
    (Size: 42.58KB, Downloaded 212 times)
Re: New dark theme thread [message #51670 is a reply to message #51669] Wed, 24 April 2019 11:20 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
After:
index.php?t=getfile&id=5826&private=0
  • Attachment: after1.png
    (Size: 44.35KB, Downloaded 221 times)
Re: New dark theme thread [message #51679 is a reply to message #51670] Thu, 25 April 2019 12:15 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
Well, Easter is almost here, so I'll be out for a week.

So here is a small update.

comp7a is U++ darkmode.
  • Attachment: comp7a.png
    (Size: 43.42KB, Downloaded 142 times)
Re: New dark theme thread [message #51680 is a reply to message #51679] Thu, 25 April 2019 12:17 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
comp7b is recoloring U++ dark mode, inspired by macos.

I added dynamic blending to borders and don't really like it. Needs more tuning.

Something like this is close to the limits of what you can do with just recolors.

  • Attachment: comp7b.png
    (Size: 49.42KB, Downloaded 146 times)

[Updated on: Thu, 25 April 2019 12:22]

Report message to a moderator

Re: New dark theme thread [message #51681 is a reply to message #51680] Thu, 25 April 2019 12:18 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
And finally, comp7c is a little prototype I've been working on that not only recolors, but reskins.

  • Attachment: comp7c.png
    (Size: 52.13KB, Downloaded 151 times)
Re: New dark theme thread [message #51684 is a reply to message #51681] Thu, 25 April 2019 15:59 Go to previous messageGo to next message
cbpporter is currently offline  cbpporter
Messages: 1400
Registered: September 2007
Ultimate Contributor
Well, I just discovered the power of Painter!

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


Might create my skinned GUI with Painter plus some scripting. Maybe Esc? Laughing
Re: New dark theme thread [message #54858 is a reply to message #51604] Tue, 22 September 2020 18:53 Go to previous messageGo to next message
aquilarubra is currently offline  aquilarubra
Messages: 10
Registered: December 2019
Promising Member
I have this:

GUI_APP_MAIN
{
Ctrl::SetDarkThemeEnabled();

But nothing happens. What am I missing?
Re: New dark theme thread [message #54862 is a reply to message #54858] Wed, 23 September 2020 00:48 Go to previous messageGo to next message
Klugier is currently offline  Klugier
Messages: 745
Registered: September 2012
Location: Poland, Kraków
Contributor
Hello Aquilarubra,

As far as I know dark theme is inherit from operating system. So, if you set in your OS theme that is dark then upp app should use it. Please noticed that it only happen on app loading. If you modify it on runtime then it doesn't work. It is doable, but require some changes on uppsrc side.

So, what "Ctrl::SetDarkThemeEnabled();" do. From the documentation we can read:
Quote:

Hints coloring and skinning algorithms that the application is ready to work in dark theme mode. Currently this enables dark theme in Windows (with other platforms dark theme is enabled by default). Default value is true. Disabling dark theme has to be done before GUI_APP_MAIN, e.g. in INITBLOCK.

So, it will do not transform your app into dark especially on Linux (I do not test on Windows). This should be enable on OS level and then app should be launch and inherit this settings from OS.

Klugier


Ultimate++ - one framework to rule them all.

[Updated on: Wed, 23 September 2020 00:49]

Report message to a moderator

Re: New dark theme thread [message #54877 is a reply to message #54862] Wed, 23 September 2020 17:30 Go to previous message
mirek is currently offline  mirek
Messages: 12837
Registered: November 2005
Ultimate Member
In addition to what Klugier wrote:

You can however set "internal" dark skin

#include <CtrlLib/CtrlLib.h>

using namespace Upp;

GUI_APP_MAIN
{
	Ctrl::SetSkin(ChDarkSkin);
	PromptOK("Hello!");
}

Previous Topic: LabelBox style
Goto Forum:
  


Current Time: Wed Oct 28 06:44:26 CET 2020

Total time taken to generate the page: 0.01471 seconds