Burying Firefox's White Tab of Death

3 minute read Updated

How to change the Firefox New Tab page for suitable display in low-light.

I don’t know about you but I really like dark interfaces. Dark interfaces use less battery on AMOLED screens, reduce eye strain at night, and help protect you from shoulder surfers and nosy bar flies. Plus they just look good.

Which is why I was a bit miffed after installing ghacks-user.js to lock-down security in Firefox Quantum. I finished setup right before bed, opened the browser and – WHAM – my entire room illuminated with New Tab page:

White New Tab page
New Tab page in Firefox Quantum. Sunglasses not included.

Positive I wasn’t the only Firefox user concerned about eye strain I turned to the Web for answers only to try a bunch of things that didn’t work. Determined not to lead my neighbors believe I was tack welding in my room at night I kept searching. And with some persistence found the root cause of the issue.

Digging in I was able to conclude the WTOD was a security feature and has existed since Firefox 41 was released more than three years ago. I imagined the squinty eyes of hundreds of thousands of poor saps as they hastily shot their fingers towards the dimmer switch on their laptops. Oof!

And though there there's a request to revive reinstate the custom tab URL introduced in Firefox 13 don’t hold your breath. Meanwhile, here’s how you can effectively bury the Firefox white tab of death on dark interfaces.

Update 2019-07-09: Since time of writing a reader has made me aware of a dark theme for Firefox called ShadowFox which is definately worth checking out.

Hack 1: Custom User Agent Styling

A similar solution is already documented on SuperUser with 12,000 views and 22 upvotes at time of writing. My solution is better as I’ll explain below:

~/.mozilla/firefox/profile.default/chrome/userContent.css
body:empty {
  background: black;
}

Add the above CSS to a file called userContent.css inside a folder called chrome in the root of your Firefox profile as provided by about:profiles.

The reason I consider my solution is “better” is because it uses the standard :empty pseudo-class, doesn’t rely on vendor prefixing and will work for any page which might leave you staring into a white tundra due to an empty body.

When the setting takes effect about:newtab will now look like this:

Black New Tab page
New Tab page in Firefox Quantum. Sunglasses not necessary.

This hack may not work if you’ve secured Firefox to bypass telemetry and start directly from about:blank or about:newtab. In Linux Manjaro, for instance, Firefox disregards the user styles unless opening a second tab. To work around the WTOD showing when the browser starts see Hack 2.

Hack 2: Start From Filesystem URL

If you’re starting Firefox directly to a New Tab page you may still see the WTOD as explained in Hack 1. To fix this all you need to do is start the browser using a styled page saved to your local filesystem as shown here:

Page from filesystem
Styled page from filesystem in Firefox Quantum.

To create the HTML for this page drop the following data URI into your browser address bar, and save the page somewhere on your filesystem:

data:text/html,<html style="background:black">

Then use the -new-window flag when starting Firefox, i.e.:

/usr/bin/firefox -new-window file:///home/dekjos/goblack.html

Combined with Hack 1 you will have effectively buried the Firefox WTOD. There is, unfortunately, still sometimes a flash of white before the browser applies styling. But that’s another issue.