Dark Theme Splash Screen is White

[justingolden21]

With dark theme selected, I think it'd be best to not have a blinding white light in fullscreen when opening the app. It only appears for a second, and I'm aware this isn't a bug, it's just an unimplemented feature. Below is a screenshot as is encouraged in issue tracking, however, as you can see, it's just white; not much to see...

Then after it opens I quickly get back to my nice dark theme:

But not until after I've been blinded. If it's possible to change this, I'm sure many of the dark theme users would appreciate it.

Thank you for listening and let me know if there's anything else I can do to report the problem accurately or fix the problem.

[justingolden21]

One thing I forgot to mention (although apparent in the screenshots) is that I'm on Windows 10. I'm unsure if this occurs on other operating systems.

Also, an example of a dark program that opens without a blinding light would be Steam.

Thanks again for listening.

[shiftkey]

@justingolden21 thanks for the feedback. I'm gonna ask if one of the team is able to see this behaviour themselves, because there's a couple of things in the repro steps that intrigue me:

1. when we initialize the window, we set the background to #FFF - maybe we shouldn't do that

desktop/app/src/main-process/app-window.ts

Lines 45 to 47 in 741a553

	// This fixes subpixel aliasing on Windows
	// See https://github.com/atom/atom/commit/683bef5b9d133cb194b476938c77cc07fd05b972
	backgroundColor: '#fff',

2. if there's a noticeable gap between "window loaded" and "displaying the UI" perhaps we need to look at that area to make the setup more seamless

[democat3457]

It does happen for me on dark theme. I'm on Windows 7.

and then it goes back to normal dark theme.

[Daniel-McCarthy]

I took a look at this and was able to reproduce it. To add some information:

• I was only able to reproduce this if I put GitHub Desktop into full screen, closed GitHub Desktop, then re-opened GitHub Desktop and it launched into full screen.
• GitHub Desktop was quite noticeably slower to launch when starting in full screen, leading to seeing a white screen on launch before loading in the UI elements and whichever theme coloring was selected.
• If one can not reproduce this on their system, one way of increasing the time this white screen will show is by building from source, then using yarn start. The Chrome debugger tools should slow the load up, especially so if they have previously placed breakpoints in several source files. (This is not helpful for performance testing, but if one is struggling to reproduce this at all, it may allow them to see the reported white screen behavior).

Additionally, I was successfully able to change the color of this initial screen via the line of code shared by Shiftkey. This leaves me with a couple questions. This setting of the color is meant to fix subpixel AA.

• Since color is being set to white from transparent, is it strictly necessary that the default color is white to fix the AA issue?
• If any color can be used, would it be possible to find out the user's selected theme this early in the load up to decide which color should be used?
• If any color can be used and we can not get the user's theme, would it then be preferable to use a darker color by default for the sake of avoiding eye strain since this is otherwise meant to be a short moment?

[shiftkey]

@Daniel-McCarthy I think I can help you out about these questions:

Since color is being set to white from transparent, is it strictly necessary that the default color is white to fix the AA issue?

I think this can be any opaque colour. We probably just settled on white because it fitted with the theme of the app (before we supported dark theme).

If any color can be used, would it be possible to find out the user's selected theme this early in the load up to decide which color should be used?

The theme is stored in local storage, which is owned by the renderer process. The setup to display the window is done in the main process, which doesn't have access to local storage at this stage. So that's not possible with how things are organized currently.

If any color can be used and we can not get the user's theme, would it then be preferable to use a darker color by default for the sake of avoiding eye strain since this is otherwise meant to be a short moment?

I'd love to figure out how full-screen is involved with this issue rather than applying workarounds.

In theory we shouldn't be showing the AppWindow until it's ready, but the steps you outlined suggest that this.window.show() on BrowserWindow is being called early - and it's showing the empty white window rather than the app content, before the UI is inserted in it's place.

desktop/app/src/main-process/app-window.ts

Lines 213 to 215 in 0b7de43

	public show() {
	this.window.show()
	}

[Daniel-McCarthy]

I'd love to figure out how full-screen is involved with this issue rather than applying workarounds.

@shiftkey In that case, to give some extra details: When starting in full-screen it seems that the window is immediately appearing with the custom Windows menu bar (File, Edit, View... etc) with the rest of the window being a white screen. Then the toolbar with the current repository/branch/status loads in. Then finally the UI view loads in.

Though, when GitHub Desktop starts off in a non-full screen state, it would seem that it acts as expected. The instant it appears on screen, all sections do appear at the same time with no separate load-in visible.

I will try debugging this and seeing if I can find anything that looks interesting with when it is deciding to call this.window.show() when loading in full-screen.