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?

  • There are several similar issues posted on the Mozilla support site: support.mozilla.org/en-US/questions/1187684 and support.mozilla.org/en-US/questions/1186549. They include some solutions that people report work for them, but I haven't tested any of them.
    – fixer1234
    Apr 13, 2018 at 2:50
  • Unfortunately, I tried that already and it has not fixed the problem. Thank you though. Apr 15, 2018 at 13:50
  • Did you set in about:config : browser.devedition.theme.enabled = true and devtools.theme = dark ? (See link.)
    – harrymc
    Apr 15, 2018 at 17:53
  • The second option is set, but the first one doesn't seem to exist in my about:config. Apr 15, 2018 at 19:07
  • Now this makes me curious. I do have the dark theme set to on, but everything I have seen about it seems to point to the fact that it only affects the top bar. My problems lie in the webpages, where their default color of white shows up before my addon kicks in and turns them dark. Apr 15, 2018 at 19:12

1 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"] {
  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.

  • It seems to have helped a bit with google, but I had already tried everything but the last link. SE sites still seem to flash every time. This is weird, but then again, computers tend to hate me. I would have thought that shadowfox would fix it, but then again, I seem to be the only one that has made all of these changes and still had problems. Honestly, there's only one solution I can think of at this point. Is there any chance someone could point me to a place in the source code that I might be able to change? I have it downloaded. Apr 16, 2018 at 23:22
  • Google's colors loading first seems to indicate that it may be an issue with the order in which the css is loaded. Normal site's css first, then all of the plugins. But then again, I don't really know... Apr 16, 2018 at 23:23
  • (1) This bug report Orbit "White Flash" Visual Bug in Firefox 58 #10924 seems to indicate that at least one bug in Firefox will be fixed in version 60. So keep on testing new versions. (2) See also the following solutions : article1 and article2.
    – harrymc
    Apr 17, 2018 at 6:39
  • If the above does not help, then the problem might be a bug in Firefox, so there is no CSS solution. This might be the conclusion if none of the known solutions work for you with the current version of Firefox. All I can offer in that case is to open a bug report for Firefox, or try other browsers. If this is a new bug, you might try the Pale Moon browser which is based on an older version of Firefox and might not have this bug (I use it and it's totally compatible with Firefox except that it does not support the new WebExtensions add-ons).
    – harrymc
    Apr 17, 2018 at 6:46
  • If the problem is really painful, you could use Pale Moon which uses the previous display engine of Firefox, and with this engine the above solutions might be more fully effective.
    – harrymc
    Apr 19, 2018 at 6:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.