13

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?

22

I think this may interest others as well. 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_

  • 1
    For doing the same thing with Firefox about:blank page you can refer to this other Q&A: superuser.com/questions/603218/… – danicotra Jul 30 '17 at 22:22
  • 3
    Bonus points(if I could) for the Firefox 57+ compatible method. – japzone Nov 17 '17 at 6:44
  • Update-comment: Make sure you don't miss this new and awesome Firefox extension: Tabliss works great! (Available for Chrome as well) – danicotra Jun 24 '18 at 21:34
  • Another good WebExtension for FF to achieve the purpose here: New Tab Override – danicotra Jun 27 '18 at 18:34
  • Thanks! just made this to match breeze dark plasma 5 theme colors gitlab.com/snippets/1781039 – isalgueiro Nov 20 '18 at 12:49
2

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;
}
1

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

0

Style rules in userContent.css may not be applied if you open directly to about:blank or about:newtab to in order to bypass telemetry. You'll still end up looking at a stark white page.

A workaround is to add -new-window CLI flag when starting Firefox and use it to display a page from your local filesystem. For example, if you want a black background you can:

  1. Create and save an HTML page using the following Data URI:

    data:text/html,<html style="background:black">
    
  2. Open the saved file in a new window when starting Firefox:

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

If you're interested in more background please check out the source provided.

Source: Burying Firefox's White Tab of Death

-1

I like psychoslave's option but if u do not want to change the google background or those sites background what use the browser default background change the last three line like this:

#root{   background: #303030 !important;   color: #b2b2b2 !important; } 

And here is the full code, copyed from psychoslave's answer.

>     /* 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;   } }
> 
> #root {   background: #303030 !important;   color: #b2b2b2 !important; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.