Firefox dark background / theme for new tab and loading screen

firefox_dark_background.md

Firefox Dark Background

• How to change the background on Firefox to a dark one on new tab / loading screen ?

Procedure

• Type about:config in the URL bar
• Search toolkit.legacyUserProfileCustomizations.stylesheets and double-click the field to set it to true
• Type about:support in the URL bar
• Look for Profile folder field and click on the open button next to it.
• Create a folder with the name chrome
• Inside this folder, create a file userChrome.css and paste the following code inside it :

tabbrowser tabpanels { background-color: rgb(19,19,20) !important; }
browser { background-color: #131314 !important; }

• Then create another file userContent.css and paste the followind code in it :

@-moz-document url-prefix(about:blank) {
    html > body:empty {
        background-color: rgb(19,19,20) !important;
    }
}
@-moz-document url(about:blank) {
    html > body:empty {
        background-color: rgb(19,19,20) !important;
    }
}

• Completely quit and restart firefox

• Enjoy

Deleted my previous comment, because I found a solution and wanted to tried it out on different devices and OS's. So, in my case the white flashes reappeared on some computers, although all the settings were still there. This helped:

Menu -> Help -> Troubleshoot mode

after it restarts in troubleshoot mode, go back to normal mode

Menu -> Help -> Turn Troubleshoot Mode off

It's still flashing, but with the color which set with "browser.display.background_color" parameter, which can be set in Settings, actually:

about:preferences#general -> Manage Colors -> background

However, I hate doing this dance on every machine I use

Works great with latest Firefox 122.0 - thank you :)!

I have never been able to completely get rid of the white flash, because it feels like it happens randomly, but I noticed just now that I can make it happen consistently when loading certain websites, e.g. Startpage.com. Since Startpage has its own dark theme, I tried disabling the Dark Reader extension, and voila! No more flash before Startpage loads. I suspect it has something to do with some very early background style that Startpage is loading, which for some reason gets inverted by Dark Reader.

Thanks bro! I have a script which automatically sets my OS theme to dark when sunset occurs, so I wrapped the CSS from your gist into a media query prefers-color-scheme to detect the OS theme change:

userChrome.css file

@media (prefers-color-scheme: dark) {
  tabbrowser tabpanels {
    background-color: rgb(19,19,20) !important;
  }

  browser {
    background-color: #131314 !important;
  }
}

userContent.css file

@media (prefers-color-scheme: dark) {
  @-moz-document url-prefix(about:blank) {
    html > body:empty {
      background-color: rgb(19,19,20) !important;
    }
  }

  @-moz-document url(about:blank) {
    html > body:empty {
      background-color: rgb(19,19,20) !important;
    }
  }
}

tried and instantly worked on firefox 134! Thanks a lot!

It doesn't work on Zen though (1.10.3b (Firefox 136.0.4) (aarch64))...