BOINC
Add Dark Mode support for Windows
Fixes #5274
Description of the Change
- Bumps WxWidgets version to be higher than 3.3
- Forces common elements to use OS theme
- Retrieves dark theme flag and carefully repaints
- Charts (Statistics, Disk panels)
- Progress bars (to make progress values easily visible)
- Notices list
Note: wxWidgets' IsDark() returns false on Win 11 now even if dark mode is enabled. Therefore, registry reading mechanism was introduced as an additional check
Tested on Win 11.
Alternate Designs
- Should we force version bump? If WxWidgets is outdated, the code still works in always-light mode. Vcpkg complains about this version constraint too
Screenshots:
Release Notes Add Dark Mode support for Windows
@AufarZakiev,
Note: wxWidgets' IsDark() returns false on Win 11 now even if dark mode is enabled. Therefore, registry reading mechanism was introduced as an additional check
For Windows use IsSystemDark() function instead:
https://docs.wxwidgets.org/latest/classwx_system_appearance.html#ac6c70858bb3e4c35a0b1af42997b6c42
AreAppsDark() fits better, doesn't it?
At least, apps on my desktop react on this value and ignore IsSystemDark()
AreAppsDark()fits better, doesn't it?
Yes, it looks like this is really better. Good catch!
@AufarZakiev @AenBleidd Please make absolutely sure that all your changes are guarded by #ifdef _WIN32 to prevent creating problems for Mac and Linux.
@AufarZakiev @AenBleidd Please make absolutely sure that all your changes are guarded by #ifdef _WIN32 to prevent creating problems for Mac and Linux.
or #ifdef __WXMSW__
@CharlieFenton, of course we will, no worries. This is too far from being finished, and it's too early to talk about this now, but this is definitely something I will keep in mind while doing a review of the code.
I had no chance to test this on devices I have. Hopefully will be done during this weekend.
@AufarZakiev, we have a progress bar that has a self-written function to draw itself. It blinks when in dark mode (see the video). This is something that need to be fixed, because otherwise very annoying. I have tested this on Win11 and Win10 (video was recorded on Win11, but on Win10 blinking is even more visible). After this is fixed, I will retest it including Linux. https://github.com/user-attachments/assets/0e415283-8840-48e5-8f48-4a841a5ed6be
I agree that, in dark mode, the background of the graphs should be fairly dark (but if this is a problem on the Mac, the light background is OK)
I think it is worthwhile to take a step back and look at what Microsoft and Apple say about Dark Mode.
This article from Microsoft says:
Light mode is typically the standard setting for most computers, but lots of users are making the switch to Dark mode for a variety of reasons. Here are some benefits to turning on Dark mode: Aesthetic preference: A common reason why people prefer Dark mode is because it aligns with their aesthetic better than Light mode. If you prefer darker colors over lighter ones, Dark mode will likely fit your style. Easier on the eyes: Dark mode is often credited for reducing eyestrain, which is a syndrome that can occur if you look at a bright screen for too long. Turning on Dark mode may also make the letters easier to read. Better for darker locations: A bright screen in a dark room can be harsh on the eyes and could potentially bother those around you. Using Dark mode in a dimly lit airplane cabin or a shared bedroom will help reduce the brightness of your screen to make it stand out less. Preserves battery: Does Dark mode save battery life? You bet!
I've seen some websites say Reduce eyestrain rather than Easier on the eyes. I think that is primarily about reducing the glare that comes from black letters on a white background. It's pretty clear to me that Dark mode doesn't necessarily involve inverting all colors. If you scroll down a bit in this section of this microsoft article you can see that a color quite similar to our graph background is unchanged in dark mode.
When I asked Google for Microsoft dark mode programming guidelines it replied:
Microsoft's dark mode guidelines focus on using dark grays for backgrounds, lighter surfaces for importance (elevation), avoiding pure white/saturated colors, ensuring accessibility (contrast, focus indicators)
and
Elevation: Use lighter shades of gray for more important surfaces (like dialogs) and darker grays for less important ones to create depth. Avoid Pure White: Use dark grays for backgrounds and avoid pure white (#FFFFFF) for text/elements to reduce eye strain in dark mode. Don't Invert: Don't simply invert colors; design specifically for dark mode for optimal results. Accessibility: Ensure focus indicators (like blue outlines) remain visible.
Another important consideration I see mentioned in the above articles and various others is accessibility. Contrast among elements must be high enough to help people with impaired vision understand the display. That means the grid lines must be more prominent than the screenshot from this PR. I feel the pale blue background we have in Light Mode also works well in Dark Mode and allows the grid lines and data to be easily visible without causing eye strain or glare.
I am willing to consider using the colors that we settle on for Windows in the statistics tab on the Mac if they are pleasing (aesthetic preference) and satisfy all the other considerations discussed above. But I feel the current proposal does not meet those criteria.
Finally, please remember that BOINC has supported Dark Mode on the Mac since June 2023 and the current implementation has been very well received.
Finally, please remember that BOINC has supported Dark Mode on the Mac since June 2023 and the current implementation has been very well received.
That doesn't mean that it's perfect and cannot be made better ;)
If you scroll down a bit in this section of this microsoft article you can see that a color quite similar to our graph background is unchanged in dark mode.
True, but the color itself is a little bit more soft and darker in comparison with the color we have in BOINC Manager.
But I do agree. I do not want to say that the set of colors in this PR is the final. I'm open for a discussion, and we need to find the solution that will be satisfiable for all of us. Personally I don't like graphs background in macOS version because I find it too bright, however on the real macOS screen they might look differently (we all remember that display calibration of macOS devices is one of the best, and other displays usually show slightly different colors.
This needs to be further discussed to find better colors for the next try.
@CharlieFenton, some examples of graphics from GitHub I personally like:
I'm not pushing to use them as a guideline, however I like them because they don't have big areas that are too bright or too dark in comparison with the other surrounding areas.
Again, need to be further discussed.
One more example of nice graphs: https://grafana.kiska.pw/d/boinc/boinc?orgId=1&var-project=BOINC%20Central&from=now-24h&to=now
FYI: need more time to deal with progress bars blinking. Still a mystery why it happens and only in the dark mode.
progress bars blinking
This is only a wild guess, but might it be associated with your addition of the remainderColor, textColor, remainderBrush and / or remainderPen? This doesn't happen on the Mac, but as I wrote before:
on MS Windows, BOINC uses the native list control, but on Mac and Linux it uses wxWidgets' wxGenericListCtrl built from wxWidgets source code.
You can test whether it blinks when using the generic list control by temporarily changing lines 25-29 in BOINCListCtrl.h.