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

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

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))...

doesnt work for now