Change Firefox new tab background

Question

I always use dark personas theme or the default compact dark theme that comes included with Firefox and I don't like the default background color being white when I open a new tab. There was an add on I used that let me customize new tabs but it's gone now with Firefox 57...

So, how can I do to change new tabs background?

Solution 1

I think this may interest others as well.

ANSWER UPDATE (as of 2020)

By now there's a lot of cool and interesting addons that do the job in great way, let me mention some of my favorite in a brief list:

1. Firefox Color This imho is really THE DEFINITIVE ONE and A MUST HAVE! Not only it lets you deeply customize almost everything of Firefox GUI the way you like it (including new tabs background of course), it also lets you share the theme you made if you want. If this isn't enough, let me add this addon is develope by Mozilla itself.

2. Tabliss This is a really nice one (I personally use and love it). It lets you customize the new tabs background not only choosing for a color but also beautiful background images and add widgets (like showing the time for instance). (As a last note here let me say Tabliss is like joining the features of New Tab Override, New Tab Wallpaper, Beauty Tab, New Tab Splash and Clock New Tab addons all togheter.)

3. There are also some addons that, despite background, lets you customize tiles on new tabs as well, I think you may like it and find the thing useful so I'll provide some worth a try imho: Infinity New Tab (Pro), nightTab, New Tab Tools.

That said, if you're looking for something minimalistic there are also addons that work straight forward and provide just the very basic feature to only change the new tabs background to something dark, for example Dark New Tab or even Black New Tab ...also, if you want, you can still juggle with CSS (see point 3 of original answer below).

ORIGINAL ANSWER

So far I know a couple of addons to achieve that and a way to do without addons (as it seems a lot of them are disappearing day by day), here we go then:

1. Customize about:newtab (please see point 3 below)

This is a specific add on for the task, it not only let's you change the background color but also choose a background image and also resize and align it as you like... nice!

2. Stylish (please see point 3 below)

Stylish is an add on with a broader spectrum of functionality; it lets you customize Firefox itself as long as manage/install themes and skins for lots of popular websites such as Google, Facebook, YouTube and many others... I think it's overkill if you only need it for the task we are dealing with here.

3. Neither of the above will work with Firefox 57 due to added restrictions. Stylus with Firefox 57's new tab page shows this message:

As a security precaution, the browser prohibits extensions from affecting its built-in pages (like chrome://version, the standard new tab page as of Chrome 61, about:addons, and so on) as well as other extensions' pages. Each browser also restricts access to its own extensions gallery (like Chrome Web Store or AMO).

So, let's leave addons aside and get our hands dirty!

You may decide you don't want to use an addon for this, well in this case here's what to do:

• write about:profiles in the Firefox address bar and select Open Folder in correspondence of the "Root Directory" of the user profile you want to customize (usually there's only one);

• by now the profile's root folder should have opened, create (if it is not present yet) a new folder named chrome;

• create (if it is not present already) a new file named userContent.css inside the chrome folder and put the following code in it:

        @-moz-document url("about:newtab") {  
            body {
                background-color: #000000 !important;
            }
        }
  

If you can juggle with CSS, you may also add some code to set a background image if you like (I suggest to eventually put the images in the same folder with the CSS).

You may need to restart Firefox to make customization being applied.

Credits for this last point goes to DIENER_

Solution 2

Open about:config and change the value browser.display.background_color to the color of your choice. I'm using #595959 (neutral gray).

This works with blank tab or "Firefox Home".

Sadly, opening tab quickly or when the browser is on heavy load will still result of a white flash.

If you don't know how to use about:config please read https://support.mozilla.org/en-US/kb/about-config-editor-firefox

Solution 3

Well, I must say the solution given by @danicotra does work for new tab, even with Firefox 57. However, during loading of a page, a blank flash will still systematically burn your eyes.

Here is an other proposal of content for your ~/.mozilla/firefox/xxxxxxxx.default/chrome/userContent.css, which does darken a few more places, but won't resolve the blank flash on load.

/* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab */
/* https://userstyles.org/styles/142191/remove-new-tab-flash */
@-moz-document url-prefix(about:preferences), url-prefix(about:blank), url-prefix(about:newtab) {
  html, body, #newtab-customize-overlay {
    background: #303030 !important;
    color: #b2b2b2 !important;
  } 
}

@-moz-document url(chrome://browser/content/browser.xul)
{

  browser[type="content-primary"]
  {
    background: #303030 !important;
    color: #b2b2b2 !important;
  }
}

@-moz-document url(chrome://browser/content/browser.xul)
{

  browser[type="content-primary"], tabbrowser tabpanels, #appcontent > #content
  {
    background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed !important;
    color: #b2b2b2 !important;
  }
}

@-moz-document url(about:blank),
               url(about:preferences),
               url(about:config),
               url(about:newtab)
{
  #newtab-window,
  html,
  body, 
  #newtab-customize-overlay 
  {
    background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
    color: #b2b2b2 !important;
  }
}

html>body {
  background: #303030 !important;
  color: #b2b2b2 !important;
}

Solution 4

OK, based on the answers from psychoslave and danicotra, I figured out a solution that works for me (my goal was to have a background image on the new tab page which I have set to about:blank). psychoslave's solution changes basically every Firefox's page which I don't want to but thanks to the beginning of his code I was able to figure out there are the url-prefix parts which make the whole thing apparently possible.

Note: For just a background color on new tab, open about:config, search for browser.display.background_color update its value with hex color code and you can drop this altogether.

1. Find your profile root folder in about:profiles.
2. Create a folder named chrome in your profile root.
3. Create userContent.css with this content:

   /* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab */
   /* https://userstyles.org/styles/142191/remove-new-tab-flash */
   @-moz-document url-prefix(about:blank), url-prefix(about:newtab) {
     html, body, #newtab-customize-overlay {
       background: url("konachan-steins-gate-s.jpg") no-repeat center center fixed !important; 
       background-size: cover !important;
     } 
   }
   

4. Copy the image right next to the userContent.css file (FF didn't take any absolute paths elsewhere for me).
5. In about:config, set toolkit.legacyUserProfileCustomizations.stylesheets to true so FF actually allows this customization.
6. Restart your Firefox for the changes to take effect.

I confirm this works on Windows 10, Ubuntu and Xubuntu; Firefox 72.0.2, 73.0.

A big thanks to the other contributors mentioned above and to this thread on Reddit.

View more solutions

Comments

[danicotra]

For doing the same thing with Firefox about:blank page you can refer to this other Q&A: superuser.com/questions/603218/…

[japzone]

Bonus points(if I could) for the Firefox 57+ compatible method.

[psychoslave]

An almost working solution for blank flash reddit.com/r/firefox/comments/6s2l0w/… but some white elements might still flash while loading page.

[danicotra]

Update-comment: Make sure you don't miss this new and awesome Firefox extension: Tabliss works great! (Available for Chrome as well)

[danicotra]

Another good WebExtension for FF to achieve the purpose here: New Tab Override

[isalgueiro]

Thanks! just made this to match breeze dark plasma 5 theme colors gitlab.com/snippets/1781039

[Vladimir Jovanović]

Doesn't work in Firefox 67

[Vladimir Jovanović]

Doesn't work in Firefox 67

[H. Ferrer]

This does work for me on Firefox 67.0.4 (64-bit) on Arch Linux. However, the solution is not ideal due to the white flash, as described in the answer.

[Edwin]

Works in Firefox 71

[Jamo]

Doesn't work in Firefox 76.0.1 on Manjaro.

[danicotra]

@VladimirJovanović I updated the answer, check it out :)

[danicotra]

As a side note about "CSS juggling" to put a wallpaper image you can simply add a line: background-image: url(...) !important; ( also have a look at this other Q/A here on superuser )

[Sigmatics]

Works with Firefox 81 on Windows. By far the simplest answer.

[brother-bilo]

You can change firefox home background color under Preferences (not advanced) > General > Fonts and Colors > Color > Background Color NOTE this will work if your new tab default is "blank page"

[brother-bilo]

this solution also changes background for certain webpages - for example drewdevault.com so it is sub-optimal