Changing to a dark theme makes many controls unreadable

When setting the compile option "Use Operating System Theme" to True, the application uses the operating system setting to start in light or dark mode. This change indeed happens, but in dark mode, many controls become unreadable.

Attached a small application containing a few popular controls, without any coding and any specific setting, except the caption or text field and the font size. In light mode, everything is readable: labels, values and selections. In dark mode, only the button actually changes its color.
Light_Dark.zip (8.6 KB)

Light

The dark theme also shows an extra line at the top:
Dark

The setting "Use Operating System Theme" also does not detect a theme change in the OS. It only seems to detect the current setting (light/dark) when starting the app. If the user changes the theme in the operating system when the application runs, it stays in the original theme setting detected during start-up.

Is there a way to detect an OS theme change during the run of the application? If so, it becomes possible to correct unreadable controls in dark theme through CSS and even adapt controls when using a light theme.

Set for controls & form the property ElementFont = efCSS

image

I see the BODY element causes the line on top. Not sure why. We'll need to investigate why the browser is doing this.