Firefox – Problems with FOUC

firefoxthemes

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?

Best Answer

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.

Related Solutions

Change White Background in Webpages to Another Color – Firefox Guide

I just wrote a quick Greasemonkey script that checks the computed style of the body element and changes it to black (you probably want to choose a different colour):

(function () {
    if (window.getComputedStyle(document.body, null).getPropertyValue("background-color") == "rgb(255, 255, 255)") {
        console.log("Setting new background color...");
        document.body.setAttribute("style", "background-color: #000000;");
    }
})();

The problem with these types of things is that unless websites are designed extremely well, there will be blotches of white on black.

Windows: Is there a way to change the selection color of a background window

Right click a blank area of the desktop and select 'Personalize'. When the Personalization window opens select 'Window Color' from the commands along the bottom. With the Window Color and Appearance window opens select 'Advanced Appearance Settings'. In the Window Color and Appearance dialog choose 'Selected Items' from the Item drop-down list and select a new color for 'Color 1'. Click 'Apply' and click OK to save the setting and close the dialog.

Using other colors may help. If the setting does not apply via RDP, try changing the default font instead, that's not display related and can help quite a lot with general visibility.

For the background, it's not that simple because the actual background-select is a stretched transparent image, not a color selection. There is still a way to alter this. You need Win7 Style Builder 1.5. Note that in order for this to work you have to have the themes service running (which is usually off for classic view). Even if you have aero and transparency disabled and 'Adjust For Best Performance') this will work as long as the themes service is active.

Now, in Win7 SB you need to go to Explorer & Shell -> Explorer -> TreeView -> TreeItem -> SelectedNotFocus. This is the option that handles what you want. BORDERCOLOR, FILLCOLOR and TEXTCOLOR is what you need (BGTYPE:ENUM BORDERFILL needs to be there, but does not need alternations). With FILLCOLOR you should be able to adjust to something very distinguishable.

Best Answer

Related Solutions

Change White Background in Webpages to Another Color – Firefox Guide

Windows: Is there a way to change the selection color of a background window

Related Question