[Bug]: White loading screen in dark mode

[jacobc-eth]

Describe the bug

When using MetaMask in dark mode, the loading screen for confirmations is still a white screen with a fox. This creates a jarring experience for dark mode users who are trying to avoid seeing bright white popups.

Steps to reproduce

1. Enable dark mode
2. Initiate a confirmation using any dapp
3. Briefly see a white popup before confirmation is rendered correctly in dark mode.

Error messages or log output

No response

Version

10.14.1

Build type

No response

Browser

Brave

Operating system

Linux

Hardware wallet

GridPlus Lattice1

Additional context

No response

[BelfordZ]

when the extension first opens, and the react app and JS hasn't loaded yet, this is the loading screen that you get (minus the paused debugger faded out-ness):

we can see the style for background-color-default is resolving to white:

Theme is pulled out of redux and set on here:

When manually clicking the extension, there is a slight delay before displaying the dark-mode UI. I presume something is handling waiting until the app is booted before popping up the extension window.

[BelfordZ]

trying with media query prefers-color-scheme:

Adding the below code works when the user has set darkmode at the OS level, but not when manually toggled in settings.

 @media (prefers-color-scheme: dark) {
       #app-content {
         display: flex;
         flex-flow: column;
         background-color: black !important;
       }
     }

     @media (prefers-color-scheme: light) {
       #app-content {
         display: flex;
         flex-flow: column;
         background-color: white !important;
       }
     }

[BelfordZ]

trying to read theme value in the first script to load:

theme is set to null =(

[BelfordZ]

there is a related bug with chrome on ubuntu whereby setting 'dark' theme in the OS does not set prefers-color-scheme in chrome, but it works in firefox. Have not yet tried to repro this bug in firefox.

[BelfordZ]

Theres a few take-aways from investigating this issue.

1. the loading screen in question is static, and part of the backends' html files. The browser renders this before the scripts have all finished loading, and thus metamask UI has not yet started up. As such, access to user preferences doesnt seem possible during this static loading screen. Once the app loads, its only around 500ms before the router changes to the correct notifcation page, and this is the first instance where the theme preference is available.
2. Dark mode is set from the OS - however, specifically on Chrome + ubuntu, the OS setting is not recognized by the browser (data-theme="dark" not being set on ). We can use the above media query to appropriately set the background color in this case, and it should work normally.

Potential solutions:

1. I assume that we could set the static loading page's background to darkmode by default. When using dark mode, a bright page is very jarring, whereas the opposite is less so.
2. Redesign the static loading page / fade in the ui as the router loads. Might look good if it starts from white and fades to black when finished loading.
3. (not ideal) delay opening the extension until the UI is loaded. This seems to be happening when the metamask extension icon is clicked (there is a short delay between the click and the UI opening, which is why you dont see a white background in that case)