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

Is this mod still necessary? I thought missing a Dark theme feature and white flash on page loading problem as already been fixed in some previous release.

barl0g commented on 2 Dec 2020
Solution: https://fedidat.com/640-dark-newtab-firefox/

Thank you! This worked, but not until I set toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config (the instructions in the link doesn't mention to do it).

Edit: Some websites seem to using browser.display.background_color. Startpage.com for example changes according to what you set it as, which is a shame.

Thanks bruv!

Is this mod still necessary? I thought missing a Dark theme feature and white flash on page loading problem as already been fixed in some previous release.

Yep, it's already fixed in Firefox.

Unfortunately, this is back in 95.0.2 - win7 🙁 Short white flash only when starting firefox.

Is there a non tech savvy solution to this? I remember Zigboom Designs had an extension for this but it doesn't work anymore.

Is there a non tech savvy solution to this? I remember Zigboom Designs had an extension for this but it doesn't work anymore.

I'm running Windows 10 and Firefox 99.0.1 and there no more white flashing for me. I don't have about:config edited or have userChrome.css in my profile folder anymore either. Are you using a dark theme?
Another note is that I used to use the extension "New Tab Homepage" by Ben Basson and when I uninstalled it the flashing stopped. I have since installed "New Tab Home" by Ylor instead. I also use Dark Reader but not sure if that's relevant.

Is there a non tech savvy solution to this? I remember Zigboom Designs had an extension for this but it doesn't work anymore.

I'm running Windows 10 and Firefox 99.0.1 and there no more white flashing for me. I don't have about:config edited or have userChrome.css in my profile folder anymore either. Are you using a dark theme? Another note is that I used to use the extension "New Tab Homepage" by Ben Basson and when I uninstalled it the flashing stopped. I have since installed "New Tab Home" by Ylor instead. I also use Dark Reader but not sure if that's relevant.

I'm running windows 7 on Firefox 99.0.1 (64-bit). I have never edited about:config or userChrome.css. I am using dark theme and color fox. I do not have "New Tab Homepage" by Ben Basson or "New Tab Home" by Ylor or Dark Reader (on my desktop browser anyway). Hope this info helps any.

@lothar-cell How come it's already fixed?
I'm using Firefox ver. 101.0.1, running on Linux Pop!_OS 22.04, and I'm still getting a white loading screen.

I'm already using a dark theme, dark reader, Tabliss for new (nice and dark) tab.
The only thing missing is a dark loading screen (that might be present for 1sec while the page is loaded).

Anyone any hint, please?

Firefox 107.0 (64 bits) with Dark Reader, Works 100%. No more flashbang !

@Surfingnet I'm also on Firefox 107.0 (64 bit) and with Dark Reader on, but if I access a site whose loading time takes more than 1 sec, like a Confluence page, I am still getting that temporary white screen. 😞
Not sure if you tested it trying to access some website that's not that speedy, or it is also a distro specific behavior. I'm on Linux (Pop_OS 22.04).

@dxps

I do not get the white light on loading of pages, there are extensions which offer more custom possibility regarding font/background colors unlike darkreader, try Dark Background and Light Text on FF.(i'm on kubuntu btw)

@joomlafun Thanks for the suggestion. Taking that path of evaluating the alternatives to Dark Reader, I tested Dark Background and Light Text (indeed no intermediate white splash), and I eventually ended up using Midnight Lizard since it better renders all the elements in various color schemes, specifics per website and so on.

This worked for me for years, and then all of a sudden today the new tab page has a bright white background again. Does anyone know why this could have been? The userChrome and userContent files are still present in the same way.

Worked for me on the first attempt. Thanks!

Is there a solution for Chrome? Because I use Chrome mostly, I'm going crazy with this white flicker.......

thanks so much for this it worked perfectly

I've tried every fix in this thread, and a few other ones, all with no success. Firefox loads with a blank white page for a fraction of a second. I do have Dark Reader installed.

@e-t-l try making some crazy obvious css changes in your usercontent and userchrome css files so you can verify they're actually taking effect.

@Arian04 That's reasonable troubleshooting advice, but I already use userchrome.css and usercontent.css, so I can definitely tell that they're working. And I don't see any styles in there that would obviously conflict with the code here, either.

@e-t-l hmm, just to rule out anything in your entire profile causing problems, maybe try this change on a fresh Firefox profile and see if it works there?

edit: by the way, which sites do you notice this behavior in? bc I've noticed it with Pearson's sites and I think it's because the site loads an intentionally white page before the content loads (and somehow dark reader isn't catching it) because I have noticeable black loading screens on all other sites.

I notice that when I left click a link that opens in a new tab, the white flash happens. Sometimes left click opens the link in the current tab, but sometimes it's into a new tab (such as links from a Google search). However if I press ctrl+click to purposely open links into a new tab then there is no white flash. This is with dark mode enabled, and it's been tested on a fresh install of Firefox. So try use ctrl+click as often as possible until there's a proper fix I reckon.
Edit. Regular left click doesn't seem to cause a white flash for me anymore.

Actually in order to avoid seeing the flash, if I can't prevent it from happening, I've set the following prefs (for Firefox) to true:

• browser.tabs.loadInBackground
• browser.tabs.loadBookmarksInBackground
• browser.tabs.loadDivertedInBackground

As long as I wait at least one second before switching to the new tab, I won't see the white flash.

It's great, and the latest version (119.0.1) on Windows works. Thanks also to e-t-l(@e-t-l ) for the additional notes. Totally black looks good on the eyes.

"Dark Background and Light Text" add-on helps me. Maybe you can try it.

…

On Mon, Jan 15, 2024 at 6:23 AM parMaster ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Unfortunately, none of the above helped, I can still consistently reproduce (for almost a year now) white flash on multiple os/devices/versions. I even changed background color (about:preferences > Colors > Background) to grey - the flash is shorter, but it's still there - completely blinding, seizure inducing, white background before it turns grey. It happens 100% times when I click on a link in google search results page, when it loads the blank page which redirects you to the url. — Reply to this email directly, view it on GitHub <https://gist.github.com/gmolveau/a802ded1320a7591a289fb7abd0d6c45#gistcomment-4831713> or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQEGBYM3XJH6NTYXGBLYBQ3YOUNVZBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVA4TINRRGY2DOONHORZGSZ3HMVZKMY3SMVQXIZI> . You are receiving this email because you are subscribed to this thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

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;
    }
  }
}