Useful snippets #4: setting Firefox background color in new tabs

When someone is using a dark(ish) desktop theme on Linux, it is very annoying when Firefox, while opening a new tab or window, slaps you in the face with a blindingly bright white page. But fear not, there are ways to counterattack!

It is easy to change the default background color for all pages by editing the property browser.display.background_color in about:config. However, this approach can cause serious problems on some websites; in the worst case you could end up with black fonts on a black background. It is quite surprising to notice how many websites actually leave the background color undefined; they could fix it very easily by just adding

background-color: #ffffff;

to the main css file. But even big media companies like BBC fail at this miserably…

The better way to counter the white flash would be to define the background color just for the new tabs and windows. The simplest way to do it is using a userContent.css file:

1. Enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config
2. Create in ~/.mozilla/firefox/<yourprofile>/chrome/ a file named userContent.css with the following content:
   

   1. @-moz-document url-prefix(about:newtab), url-prefix(about:blank), url-prefix(about:home) {

   2. body { background-color: #073642 !important; }

   3. }

   4. .browserContainer {

   5. background-color: #073642 !important;

   6. }

   Defining just the about:newtab did not seem to work everywhere, so I took a belt-and-braces approach and forced the new color to everything I could think of.

3. Restart Firefox.