White flash while loading the page [Dark Mode]

[lukaszpolowczyk]

Steps to reproduce

1. I have dark mode enabled in the system and "Match System" mode in app.element.io.
2. I visit the page https://app.element.io/

Outcome

What did you expect?

3. I expected to see a dark page before the app.element.io interface loads.

The page should detect the dark mode in CSS, even before the interface loads, and set a dark background during loading.

Alternatively, a cookie from the server should contain information about the user's account preference from the first response from the page.

So, a simple CSS needs to be included already on the loading screen, still in the basic skeleton of the page, in the initial HTML file (template file).

What happened instead?

3. I see a completely white page before the app.element.io interface loads.

Of course, this is not the fault of the web browser, as Firefox has a dark blank page in dark mode.

Operating system

Arch Linux with Cinnamon and GNOME apps

Browser information

Firefox 130.0 (64 bity)

URL for webapp

app.element.io

Application version

1.11.83

Homeserver

matrix.org

Will you send logs?

No

[t3chguy]

The page should detect the dark mode in CSS, even before the interface loads, and set a dark background during loading.

The flash happens before CSS loads.

[lukaszpolowczyk]

The flash happens before CSS loads.

Not quite, this happens before any interface is loaded at all. This is the application loading stage, where only an empty HTML file is loaded, and the application with its interface is loaded afterwards.

So, a simple CSS needs to be included already on the loading screen, still in the basic skeleton of the page, in the initial HTML file (template file).