openhab-android
openhab-android copied to clipboard
openhab
White flash before UI loads
Probably related to https://github.com/openhab/openhab-android/issues/2583.
Actual behaviour
When opening the app it briefly flashes white before showing the dark mode UI of my dashboard. This is particularly frustrating when trying to turn of the lights around the house when going to bed on an OLED device. The entire device screen is dark, then flashes eye-searingly white for half a second, and then back to the dark UI of my dashboard.
Expected behaviour
Keep with the dark mode theme everywhere. Related: could the UI be cached? Waiting for the UI to load every time I open the app is a bit tedious (probably a side effect of using a slow device for the server). Caching the UI would probably also allow it to circumvent this issue (I'm guessing it's just the background of the WebView before the page is loaded).
Steps to reproduce
- Open App
- About two thirds through the loading watch the screen flash white
- Enjoy your dashboard
Can you reproduce the issue in demo mode?
Yes
Environment data
Client
- Android version: 11
- Device model: Realme X2
- App version : 2.19.0
- Build flavor : Full
- Device language: English
Server
- Server version: 3.1.0
- Reverse Proxy: N/A
- Authentication method : None
openHAB Cloud
- Self hosted cloud or myopenhab.org: N/A
- openHAB Cloud version : N/A
- Authentication method : N/A
Initially the webview has a dark background. Then the main UI loads, shows a white background. Shortly after it asks the app on which theme the app runs and in case of the dark theme, main UI switches to a dark background.
@ghys Is it possible that main UI calls the js interface earlier? Or use a transparent background before it calls the js interface to determine the theme?
"calling the js interface earlier", not really. However the dark theme is set by applying the theme-dark CSS class on the root <html> element. It could be set earlier either by the app (https://stackoverflow.com/questions/30018540/inject-css-to-a-site-with-webview-in-android) or a script that would get loaded before the whole app and would use either the localStorage and/or prefers-dark-scheme (https://stackoverflow.com/questions/67876614/why-my-dark-mode-is-not-working-fullywhile-some-area-is-working).
Or use a transparent background before it calls the js interface to determine the theme?
@ghys The above is not an option?
I suppose it loads the Framework7 CSS which is light theme by default and then - after it has loaded so a few seconds later - figures out that it has to apply the dark theme. If the theme-dark class is applied in advance then you won't have a light theme applied for a few seconds before the app changes it.
I wasn't able to change the background to black by applying theme-dark very early. I'd still prefer a server side fix for this as the same issue is present on a (desktop) browser.
