Recommendation around creating dark/light mode in Windows app

How is best to make a windows app have a dark mode?

Not all controls have background color property.

So looking for some tips on how to implement.

seems windows is not really supported and Application.AppearanceChanged is only a Apple thing.
the ui controls use a fake transparency you can change the window background
and the labels appear in the same background.
i can’t see a way to change the text color of buttons (except BevelButton).
label text color is new since some months.

the original darkmode in windows only change the brightness and colors (white to yellow) for all apps.

I have done a fair amount of work bringing Windows Dark Mode to Xojo Desktop apps in GraffitiSuite via my Immersive [docs] classes, including firing events for theme change, a massive amount of dark/light system color settings retrieval in GraffitiColors [docs], and baked in support for many of GraffitiSuite’s components.

2 Likes

Thanks for the inputs…

Oddly, I’m doing this now.
I’ve had a bevelbutton replacement for some time (with help from Dave S)
Based on that I managed to create a toolbar substitute and a segmented control substitute
Today Ive done a checkbox substitute.
Its a slog, and it wont be responsive in the way that Mac is.

I’m not clear on the implications of this answer.

Anthony (a one-man-shop if I’m not mistaken) has shown a way to do it (by creating new controls) - but does that now mean that Xojo will not support it themselves? Is the choice between buying his plug-ins or creating your own custom controls?

At #3 on the roadmap is “New Desktop controls with API 2 events” - will these then support dark mode? Because the expectation from a Rapid Application Development tool is for support for dark mode to be build in (after all, how many YEARS has dark mode been around now?) … hmmm, but will it be native or CSS based …? Or a mix of the two?

I can’t speak for what Xojo will or won’t do. I needed it, I built it. Others may need it, so I sell it. My implementation uses the Windows API to retheme controls and the window chrome where possible.

2 Likes

That is NOT a dark mode, that was an Accesibility feature with High contrast. (basic theming feature that xojo ALSO doesnt support :roll_eyes:)

here it is translated to “Nachtmodus” = Nightmode.
it was made that apps can be used at night that the screen not dazzles.
where do you find darkmode in Windows 10 that apps appear dark?

“Interesting” experience though. I mainly only face it when the customer activates it by mistake and is then opening a “big drama panic ticket”, as I call those ;-). Dark mode on Windows is in my experience still far away from being mature. Not Microsoft’s fault but far too many (legacy) apps out, which can’t yet properly deal with it or not at all.

1 Like

yeah, a main dark app switch and the result is very inconsistent.
i think darkmode should enabled by time or ambient light sensor.
there is no appearance change app event in xojo at windows 10 :frowning:

Yeah, that’s what we’re talking about. I built the support for Xojo apps in GraffitiSuite.

Huh??? Why is it not Microsoft’s fault if their dark mode implementation is not “mature”? And what do “legacy apps” have to do with whether the dark mode implementation on Windows is mature or not?

Sorry, that was an immensely non-sensical statement … I think it fried my logic sensor … :crazy_face:

Because your app should react in some way to the dark mode settings, at least for an optimal display. There is no automatic magic “switch” producing good results. Same for HTML, modern frameworks have CSS variables that you can adapt to display the right colors for dark mode, but the developer has to ensure that they fit, otherwise the output is often “interesting”. Now on macOS apps are more often updated to the latest and greatest, at least more often than on Windows. And a 10 years old legacy windows app will most likely not look good. Most business applications that my customers are using on Windows, don’t have any dark mode yet.

Similar to all the browser plugins. Many of them are just basically inverting the colors via javascript (excluding embedded pictures). This doesn’t produce an optimal result. In Xojo Web such JS hacks won’t work as some controls (rectangle and listbox for instance), have apparently the background color partially included in the style element, which always wins.

For PDFs, it is even worse. Most hacks are about converting the content to pictures and then inverting them via “ImageMagick” for instance. That often looks ok, but you are losing all pdf functionality like full text search etc.

It can very well be that my logical sensor is broken or even missing, but my eye sensor is usually completely screwed up on Windows 10 ;-). And that’s a pity, dark mode is for many only a matter of taste or a fad, but for people with visual constraints the dark mode is often a relief and very important from a social inclusion point of view. On macOS the results are meanwhile better, but still many webpages don’t have dark mode included at all, or it is realized in a poor way.

It’s all opt-in for developers. Windows could’ve taken the route that macOS did and offer a simple API call to theme the entire app for Dark Made (at least the native controls within the app and window chrome), but Microsoft can’t even decide what UI framework they want to support, let alone give something that useful for Win32.

My implementation uses the uxtheme API to theme what native controls it can as well as the window chrome, menus, etc. I matched it up fairly close to the experience one expects building macOS Dark Mode apps with Xojo, but there are some areas that need to be considered by the developer like canvas drawing – that’s why I have the massive amount of color support methods in GraffitiColors.Windows.Immersive – and other Xojo components that are either not native or not supported by the API – I subclass those and override drawing or replace them.

For Web with Xojo, I have GraffitiThemer which does most of the heavy-lifting by allowing multiple stylesheets to be loaded, one for light and one for dark, and can either switch automatically or when called.

Back to Windows, though, this really isn’t entirely Xojo’s fault. Microsoft is the indecisive one who doesn’t provide everything needed for Win32-based apps. I’d be happy to supply my Immersive work to Xojo for implementation, honestly.

1 Like

Sorry, another logic circuit blown. There is no “Because”. You are creating causal links where none are, leading to “What the smeg is he talking about???” :wink:

I get that it might be a language problem (I’m not a native English speaker myself, and had an English teacher of mine write “Markus, never ever do anything with English” under one of my essays, and the less said about my deduction that male friends are “boyfriends” and female friends are “girlfriends”, the better :man_facepalming:),

I think you are mixing together two very different things: “Dark mode on Windows” (aka how Microsoft wants you to implement it) vs “too many (legacy) apps out, which can’t yet properly deal with it or not at all”.

I agree that the first one is not mature (eg Microsoft can’t decide how it wants to do it), the second one about individual apps has nothing to do with how mature dark mode support is on Windows, especially as you refer to older apps that might never even have considered dark mode (eg if dark mode would be very mature but the app is from a pre-dark mode era, then it still won’t support dark mode - the two are not linked).

In any case I think we can all agree that dark mode on Windows is desirable for the reasons Anthony mentioned.

Which begs two questions: how to implement it in your app? How will Xojo implement it cross-platform.

One possibility might be that the new controls will have the option to use color groups (eg different colours in light and dark mode), with the option to use system colours (if Microsoft ever gets its act together) or recommended / custom colours.

… they always are … :wink:

Already available via Windows API.
https://graffitisuite.com/wiki/doku.php?id=desktop:colors:windows:immersive

2 Likes

Which once more brings us back to the question: if you can do it as a one-man-job, then why not Xojo?

1 Like

I have to say, this is an impressive achievement! However, looking at the long list of possible colors, it appears to be a formidable job to figure out which of these to use where on my app… Is there something like a visual resource to help with this?

Sure, in the demo app/project.

(Note those beautiful re-themed scrollbars and all the work I put into my Dark Mode-aware ListBox subclass)

1 Like