This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Este fío arquivouse. Faga unha nova pregunta se precisa axuda.

Change color of blank page before renderization

  • 2 respostas
  • 1 has this problem
  • 86 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
  }
}
Ler a resposta no contexto 👍 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
  }
}

cor-el modificouno o