Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I change the background of a empty window/tab before a page loads?

  • 4 replies
  • 1 has this problem
  • 3 views
  • Last reply by Player1

more options

First time posting here,

I am not sure about protocol for posts, but I am on macOS 10.12 (Sierra) and using Firefox 57.

Anyway, I would like to change the background of the default window/pane that appears before any content is loaded into the window. Currently, it is white and that is very jarring when working in low light conditions.

I've managed to change the background for new tabs by adding the following code in the userContent.css

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

But I also want to change the background color of the window/pane that is displayed before the content for the new tab is displayed or when switching from tab to tab and the page has to reload.

Any help with this will be greatly appreciated .

Thanks

First time posting here, I am not sure about protocol for posts, but I am on macOS 10.12 (Sierra) and using Firefox 57. Anyway, I would like to change the background of the default window/pane that appears before any content is loaded into the window. Currently, it is white and that is very jarring when working in low light conditions. I've managed to change the background for new tabs by adding the following code in the userContent.css @-moz-document url("about:newtab") { body { background-color: #303030 !important;} } But I also want to change the background color of the window/pane that is displayed before the content for the new tab is displayed or when switching from tab to tab and the page has to reload. Any help with this will be greatly appreciated . Thanks

Chosen solution

This was the most comprehensive treatment I bookmarked, but there may be newer/better ones out there by now:

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

(I generally search for white flash to find threads on this problem.)

As you can see, it adds a rule to a userChrome.css file to color in the frame that pages load into. The color, of course, is your call.

Read this answer in context 👍 1

All Replies (4)

more options
more options

Hi there,

Thanks for responding. Unfortunately, none of those articles provide info in what I'm looking for.

more options

Chosen Solution

This was the most comprehensive treatment I bookmarked, but there may be newer/better ones out there by now:

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

(I generally search for white flash to find threads on this problem.)

As you can see, it adds a rule to a userChrome.css file to color in the frame that pages load into. The color, of course, is your call.

more options

Thanks @jscher2000 !!

I found the solution in that reddit post.

This specifically worked, which I added to "userChrome.css"

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

  #main-window,
  browser[type="content-primary"],
  browser[type="content"],
  tabbrowser#content,
  #content,
  browser[type="content"] > html
  {
     background: #363636 !important;
  }

}

Modified by Player1