Problems with FOUC

Question

I am using firefox developer edition. I have it configured with several programs that give it a dark theme. My biggest problem with it is that because my eyes adjust to the screen being dark, the flash of unstyled content hurts my eyes whenever I open a web page.

Currently what I have done is to enable the dark theme, which does a good job taking care of the tab and url bar. For the pages that are protected, I use ShadowFox to color them dark as well. I then configured an addon called Dark Background and Light Text to color all of the webpages.

I have tried editing the display foreground and background color in about:config. I have the developer theme set to dark. Shadowfox takes care of editing the userChrome file.

Now my biggest problem is with websites like google. With google, I get the original light colors for about a full second before the custom colors appear. Most sites are not that bad, but all follow the same trend, showing light backgrounds before the dark ones. Editing the display colors in about:config helped with some sites, but did not affect google at all.

I am wondering if there is any sort of configuration I can do to fix the fouc. I am perfectly willing to go as far as modifying the base colors in the source code if I need to. I have not been able to find anything useful on the internet. Is there anything I am able to do about this? Maybe change the color values in the source code?

Answer 1

Several solutions were offered in the Firefox and Redit forums for this problem. I am not sure that they all treat the same case, so you might as well try them all.

---

The post Firefox Quantum flashes white screen when idle tabs are clicked advises to edit or create in the profile folder the files userContent.css and userChrome.css and add in both the following line:

.tabbrowser-tabbox { background-color: #a9a9a9 !important; }

If the file(s) already exist, check that this does not conflict with existing content.

---

The post How can I make the color of newly opened (but unloaded) windows/tabs dark? advises to add in userChrome.css the lines :

/* Reduce the "white flash" in new tabs */
browser[type="content-primary"], 
browser[type="content"] {
  background: #778899 !important;
}

Check that this is not already done if you have installed ShadowFox (a universal dark theme for Firefox).

---

The post How do you stop firefox from flashing a white screen while a page is loading? advises in about:config to set browser.display.background_color to a darker color (#333). Also adding into userChrome.css :

{ background-color: #333 !important; } 

---

The post Removing the white flash before a page loads contains more code for userContent.css and userChrome.css, which may also already be contained in ShadowFox. The code is too large to include here.

---

If one of the above methods solved the problem, please indicate which one.