Dark background in Firefox 64's new tabs without a white flash

Since I tend to program on the bus at night, and I can’t lower my laptop’s brightness to a decent level, I have made most things have a dark background. In particular, I use XFCE’s X-Arc-Shadow theme and Firefox’s Dark Reader extension (FOSS, customizable, per-site, sepia whites).

Then something bothered me yesterday as I was blinded by the brightness of opening a new tab on Firefox. So I’ve tried to get my Firefox 64.0 (Quantum) to display new tabs with a dark background.

Many superfluous extensions (e.g New Tab Override) try to do it just as well as userContent.css advices that are all over the Internet. Or even better, you can get the same result just by going to about:config and editing browser.display.background_color to an acceptable color.

But this all leaves a blinding white flash for half a second before Firefox loads the edited background color.

Eventually, I found a solution on a Reddit thread using code from ShadowFox, which aims to be a dark retheme of Firefox, in particular this file.

To sum it all up, the complete process is this:

  • In about:config, change browser.display.background_color to the color of your choice,
  • head to Firefox’s profile folder by finding it in about:profiles under “Root Directory”,
  • go to the chrome subfolder, open/create userChrome.css and append the following CSS (replacing #1D1B19 by the color of your choice): 
    1
    2
    3
    4
    #browser vbox#appcontent tabbrowser, #content, #tabbrowser-tabpanels, 
    browser[type=content-primary],browser[type=content] > html {
        background: #1D1B19 !important
    }