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

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