Electron alpha: on start up when dark theme is enabled the electron app flashes white before it gets colored in the right theme

[rainerzufall]

Bug description

on start up when dark theme is enabled the electron app flashes white before it gets colored in the right theme.

Expected result: signal electron is colored in the right theme right away

Screenshots

Platform info

Operating System: Windows 7 64 bit
Signal version: Electron alpha 1.0.22

[scottnonnenberg]

This is a great opportunity to talk design, since you are invested. :0)

That first light-colored loading screen is the base HTML of the page, shown before any Javascript loads up. That's why it shows so fast. Once the application loads, it adds your customized theme class to the page and the proper styles take effect.

All that to say: there's nothing we can really do here. One way to get rid of that flash is to make the loading screen light-colored all the time.

What do you think?

[rainerzufall]

That's a tough one!

So we have three subsequent screens:

1. the base HTML page // which could be manipulated, right?
2. loading screen before customized theme class is added // which could be manipulated, right?
3. loading screen after customized theme class is added // is already manipulated.

If 2. can't be manipulated, there is only one option - make the loading screen light-colored all the time. Maybe a fade out could be added? Even if not, I would say that the resulting flash from a white loading screen to a dark theme does look less irritating compared to what's happening now. Just my intuition at the moment though.

If 2. can be changed. One could think about consistent "signal blue" background for 1., 2., 3. (Like the first welcome screen during migration). Ideally supplemented by a fade out as well.

[scottnonnenberg]

First, 1. and 2. are essentially the same in this case.

Yep, I suppose we could go find the html file on disk and modify it based on a user setting before we open the window. But that would be a reasonable amount of work.

Likely the right solution, as you suggest, is a different design entirely. 'Signal blue' is neither light nor dark, and is already used for the initial setup screens.

[liliakai]

Has anyone tried playing with passing in the backgroundColor option to BrowserWindow creation in main.js? If it does what it says on the tin, then the hard part would changing where the theme setting is stored. Currently it's in IndexedDB which takes a while to load after we open the window... So probably it would need to be moved to userConfig, which is where the other window settings live now.

https://electron.atom.io/docs/api/browser-window/

[scottnonnenberg]

Yep, a "reasonable amount of work" as I said above. We'd need the actual user setting, no matter whether we specify backgroundWindow or simply add a class to the html before we hand it to createWindow. And that's a new system we'd have to thread into the app - saving a user setting currently in IndexedDB into the parent Electron process via IPC.

A bit too much engineering for my taste, when we could use a new, neutral design to skirt the whole issue.

[rainerzufall]

some additional information when thinking about solving this issue. It is not only the colouring which changes, it is also the localization. Here you can see how it changes from light theme & English to dark theme & German:

[scottnonnenberg]

Yep, that's for the same reason. We start with static HTML, which isn't modified with user settings - neither theme nor language. The solution there may be to remove the text.