Light Skin On Dark Mode

Targets macOS
#1

I want to give the user an option to choose between Light Skin or Dark Skin in my app, regardless of what he sets on the OS level. It works great when the user has set Light Mode on the OS Level and chooses Light Skin in my app but not so much the other way around only because of the PopupMenu controls.
Any idea of how to manipulate the PopupMenu(s) under macOS and Dark Mode to look readable with light skin/background color?
Here’s the problem:
Light Skin On Dark Mode

Light Skin On Dark Mode
Light Skin On Dark Mode1417×587 63 KB

And here you can see the same controls in OS Dark Mode:

Dark Skin On Dark Mode
Dark Skin On Dark Mode1429×592 64.2 KB

I think the main problem here is the transparency of the controls in Dark Mode and I’m trying to find an idea how to get this look usable.

#2

Okay, so here’s what I created to “fix” the readability.
In the window paint event add this code for each control you wish to see better.

If color.IsDarkMode and LightSkin Then
  Var r As Double = PopupMenu1.Height-20 // just in case the height got larger than 20 (macOS default)
  g.DrawingColor = &c808080
  
  If PopupMenu1.Enabled Then g.FillRoundRectangle(PopupMenu1.Left+2, PopupMenu1.Top+r, PopupMenu1.Width-2, 20, 5, 5)
End If
#3

In the Ohanaware App Kit, I provide a demo of specifying which theme to use for a window, if needs be I can also provide a demo of specify a theme per application.

Our HDRtist NX 2 uses this technique to always use dark mode, even on macOS 10.11 El Capitan.

If you want your application to always be in light mode, there is an option in App Wrapper 4 to specify this at wrapping time.

#4

Hi @Sam_Rowlands, Thank you for the pointer, however, in this app what I wanted to achieve was full user flexibility to choose dark skin in light mode/ light skin in dark mode and the obvious dark skin in dark mode/light skin in light mode.
All of which is both PC and Mac, and it looks great after bypassing the limitations of the native controls on both systems.
Here’s how it looks on Windows:

Light_Dark_Scalable_UI
Light_Dark_Scalable_UI997×759 1.41 MB

And it looks exactly the same on any macOS even those who don’t support Dark Mode.
Still have some tweaking to do, but it already works wonderfully nice!
BTW, Special thanks to @Michel_Bujardet for the RubberViews classes.

#6

Ah I see. I only know how to do it for the macOS with native controls.