I'm not aware of any built-in way to do it. However, you can use a custom style rule to fill that empty space with a dark color. I use a dark slate blue, and this is the rule:

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

You can apply custom style rules to Firefox's user interface using either of the following methods:

(1) A userChrome.css file. This is an optional file Firefox reads at startup, so no add-on is needed.

(2) The Stylish for Firefox extension. This "Legacy" extension is expected to lose its ability to restyle the browser UI in Firefox 57, so although this method is easier, I'm now recommending #1. But I'll put links at the end of this post if #1 is too much work for you at this time.

Okay, so how do you do it? Apologies that the rest of this is based on my knowledge of Windows Explorer and lack of knowledge of Finder.

For the userChrome.css method:

Open your current Firefox profile folder using either

• "3-bar" menu button > "?" button > Troubleshooting Information
• (menu bar) Help > Troubleshooting Information
• type or paste about:support in the address bar and press Enter

In the first table on the page, click the "Show in Finder" / "Open Folder" button. This should launch a new window listing various files and folders in Finder / Windows Explorer.

Windows: Turn on display of file extensions

By default, Windows hides the .txt and .css file extensions. It is important to show them to make sure the files are named correctly. See this article for more info: https://www.bleepingcomputer.com/tutorials/how-to-show-file-extensions-in-windows/

chrome folder

The userChrome.css file needs to be created in a folder named chrome in your profile folder. Firefox doesn't create this folder, so you most likely need to create it yourself.

If you have the folder already, double-click into it.

If you do not have the folder, either (not sure about Mac)

• right-click a blank area and choose New then Folder
• click the New Folder button on the Windows Explorer toolbar

Name the new folder chrome (all lower case). After the folder appears (often at the bottom of the list), double-click into it.

userChrome.css file

The userChrome.css file is a plain text file you can create as follows:

right-click a blank area of the chrome folder, choose New, then Text Document, then change the name to userChrome.css. Make sure Windows doesn't sneak the .txt file extension on there. If it does, right-click Rename until the file name is precisely userChrome.css (with that capitalized C and all else lower case).

Editing userChrome.css

Unless you've created a web page before, your system may not have any program set to open .css files. You can assign them to Notepad or to your preferred text editor. Right-click userChrome.css and choose Open With. Then choose to find a program on your computer and select Notepad, for example.

AVOID using a word processor for this purpose, as it may inject formatting codes that corrupt the file. If you want a better text editor, consider:

https://notepad-plus-plus.org/

It does color coding of known file types which makes it a bit easier to read them.

Once the file is open, you can paste in your custom style rule(s):

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

Then save the file.

Firefox only reads userChrome.css at startup, so in order to test your change, you need to quit/exit out of Firefox and start it up again.

Success?

If you prefer:

• Install Stylish and restart Firefox when prompted: https://addons.mozilla.org/firefox/addon/stylish/
• Installable style: https://userstyles.org/styles/132844/soften-the-white-flash-back-color-while-loading

jscher2000 said

I'm not aware of any built-in way to do it. However, you can use a custom style rule to fill that empty space with a dark color. I use a dark slate blue, and this is the rule:

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

You can apply custom style rules to Firefox's user interface using either of the following methods:

(1) A userChrome.css file. This is an optional file Firefox reads at startup, so no add-on is needed.

(2) The Stylish for Firefox extension. This "Legacy" extension is expected to lose its ability to restyle the browser UI in Firefox 57, so although this method is easier, I'm now recommending #1. But I'll put links at the end of this post if #1 is too much work for you at this time.

Okay, so how do you do it? Apologies that the rest of this is based on my knowledge of Windows Explorer and lack of knowledge of Finder.

For the userChrome.css method:

Open your current Firefox profile folder using either

• "3-bar" menu button > "?" button > Troubleshooting Information
• (menu bar) Help > Troubleshooting Information
• type or paste about:support in the address bar and press Enter

In the first table on the page, click the "Show in Finder" / "Open Folder" button. This should launch a new window listing various files and folders in Finder / Windows Explorer.

Windows: Turn on display of file extensions

By default, Windows hides the .txt and .css file extensions. It is important to show them to make sure the files are named correctly. See this article for more info: https://www.bleepingcomputer.com/tutorials/how-to-show-file-extensions-in-windows/

chrome folder

The userChrome.css file needs to be created in a folder named chrome in your profile folder. Firefox doesn't create this folder, so you most likely need to create it yourself.

If you have the folder already, double-click into it.

If you do not have the folder, either (not sure about Mac)

• right-click a blank area and choose New then Folder
• click the New Folder button on the Windows Explorer toolbar

Name the new folder chrome (all lower case). After the folder appears (often at the bottom of the list), double-click into it.

userChrome.css file

The userChrome.css file is a plain text file you can create as follows:

right-click a blank area of the chrome folder, choose New, then Text Document, then change the name to userChrome.css. Make sure Windows doesn't sneak the .txt file extension on there. If it does, right-click Rename until the file name is precisely userChrome.css (with that capitalized C and all else lower case).

Editing userChrome.css

Unless you've created a web page before, your system may not have any program set to open .css files. You can assign them to Notepad or to your preferred text editor. Right-click userChrome.css and choose Open With. Then choose to find a program on your computer and select Notepad, for example.

AVOID using a word processor for this purpose, as it may inject formatting codes that corrupt the file. If you want a better text editor, consider:

https://notepad-plus-plus.org/

It does color coding of known file types which makes it a bit easier to read them.

Once the file is open, you can paste in your custom style rule(s):

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

Then save the file.

Firefox only reads userChrome.css at startup, so in order to test your change, you need to quit/exit out of Firefox and start it up again.

Success?

---

If you prefer:

• Install Stylish and restart Firefox when prompted: https://addons.mozilla.org/firefox/addon/stylish/
• Installable style: https://userstyles.org/styles/132844/soften-the-white-flash-back-color-while-loading

Thank you so much jscher2000. This has saved my eyes already :)

There may be some edge cases where you still get a "flash." There are a lot of additional suggestions in a Reddit thread today:

https://www.reddit.com/r/firefox/comments/6s2l0w/removing_the_white_flash_before_a_page_loads/