Loading screen shows white background in dark mode

[mountainsandcode]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

The problem

• Using default theme, dark mode
• Reloading the page in browser or the mobile app, the reloading screen is fully white, while the app is in dark mode, which creates a kind of “flash”

Expected behavior

Background of the page to be black/ gray if the theme is set to dark mode

Steps to reproduce

• Activate dark mode
• Pull-to-refresh or refresh the page in browser
• See white “flash”

Environment

• Home Assistant release with the issue: 0.114.0
• Last working Home Assistant release (if known): n/a
• Browser and browser version: Safari on iPad, iOS App
• Operating system: iPadOS, iOS

State of relevant entities

Problem-relevant configuration

Javascript errors shown in your browser console/inspector

Additional information

[bramkragten]

Is your device in dark mode or have you manually set dark mode?

[mountainsandcode]

Is your device in dark mode or have you manually set dark mode?

The device is in dark mode (iPhone/iPad)

[balintkozma]

The same for me on Windows 10 and Android 10 on Samsung. Dark mode enabled on both operating systems.

[ludeeus]

I'm not able to reproduce this

[spacegaier]

@ludeeus The flash happens for me before that loading screen is shown (Firefox on Win 10). Once I see the "Loading data" text and the progress ring, it has the proper black background.

But at least for me the flash exists with all themes (HA default white as well as 3rd party ones). With dark ones such as HA default dark it is just more visible and more jarring.

[spacegaier]

I played around a bit with manually triggering a page refresh in Firefox and then immediately pressing stop in Firefox. I then ended up on the following white page (<ha-init-page>), but not sure if that is just because I stopped the proper loading of the page or whether that is actually the white flash that can be seen.

Note: The text "Unable to connect to Home Assistant" is in the DOM, but is rendered white, which leads me to believe that it is attempting to use the dark theme, where text is white, but just not consistently across the whole init page [saw that it is white in the normal default light theme as well, so never visible?].
At this point in time, primary-background-color is still set to white, as is text-primary-color.

[bramkragten]

It is because we add our default styles before we load the selected user theme/dark theme.

https://github.com/home-assistant/frontend/blob/dev/src/entrypoints/app.ts#L3

[spacegaier]

Yes, I had played around a bit by setting background-color: var(--primary-background-color) in the ha-init-page.ts, but that is still resolving to the normal white background at runtime, since the adjusted darkStyles colors are not yet applied.

=> So is that something that falls in the category "cannot / won't solve" or do you see an option to adjust here something?

[spacegaier]

I found a way how to prevent the white flashes. PR is coming in the next minutes.

[spacegaier]

This PR #6815 fixes the flashing for the main content area.