Avatar for Username

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

This thread was archived. Please ask a new question if you need help.

Change color of blank page before renderization

  • 2 replies
  • 1 has this problem
  • 179 views
  • Last reply by rgomes

rgomes
rgomes
more options

I spend 12+ hours a day in front of a computer and blank pages hurt my eyes. I use dark mode wherever possible.

I've changed the background color of about:blank already and it works as I expected.

However, when a request is fired to load a web page, there's a quick transition which may paint the canvas totally blank before starting rendering the requested page. Since this transition may take a couple of seconds sometimes in my environment, the screen flashes blank onto my face, really hurting my eyes used to most of things dark most of the time.

Is there a way to configure the color of this transitioning blank page, please?

Thanks a lot in advance. :-)

I spend 12+ hours a day in front of a computer and blank pages hurt my eyes. I use dark mode wherever possible. I've changed the background color of about:blank already and it works as I expected. However, when a request is fired to load a web page, there's a quick transition which may paint the canvas totally blank before starting rendering the requested page. Since this transition may take a couple of seconds sometimes in my environment, the screen flashes blank onto my face, really hurting my eyes used to most of things dark most of the time. Is there a way to configure the color of this transitioning blank page, please? Thanks a lot in advance. :-)

Chosen solution

Answering my own question:

I've created userChrome.css like this: 

@-moz-document url(chrome://browser/content/browser.xhtml)
{
  #main-window,
  browser[type="content-primary"],
  browser[type="content"],
  tabbrowser#content,
  #content,
  browser[type="content"] > html
  {
     background: #202020 !important;
  }
}

and I've created userContent.css like this: 

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

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

@-moz-document url(chrome://browser/content/browser.xhtml) {
  browser[type="content-primary"] {
    background: #202020 !important
  }
}
Read this answer in context 👍 0

All Replies (2)

rgomes
rgomes Question owner
more options

Duplicate of https://support.mozilla.org/en-US/questions/1269392

rgomes
rgomes Question owner
more options

Chosen Solution

Answering my own question:

I've created userChrome.css like this: 

@-moz-document url(chrome://browser/content/browser.xhtml)
{
  #main-window,
  browser[type="content-primary"],
  browser[type="content"],
  tabbrowser#content,
  #content,
  browser[type="content"] > html
  {
     background: #202020 !important;
  }
}

and I've created userContent.css like this: 

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

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

@-moz-document url(chrome://browser/content/browser.xhtml) {
  browser[type="content-primary"] {
    background: #202020 !important
  }
}

Modified by cor-el