I use Darkreader to give any website a dark mode, which I highly recommend. Even with this plugin, there are breif moments when opening links, that the browser displays an entirely white screen. Thankfully, this can be mitigated!
- Enable
toolkit.legacyUserProfileCustomizations.stylesheets
inabout:config
- Create a folder,
/chrome/
, in your Firefox profile folder
- You can find the folder by going to
about:support
- On Windows:
C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>.default-release\chrome\userChrome.css
- Add the following
.css
files. - Restart Firefox
- Test it out by going to
about:blank
Note: You can edit the hex values to your liking. I used the background color of the new tab page.
userChrome.css
#browser vbox#appcontent tabbrowser, #content, #tabbrowser-tabpanels, browser[type=content-primary], browser[type=content] > html {
background: #2b2a33 !important;
}
userContent.css
@-moz-document url(about:blank), url(about:newtab) {
#newtab-window, html:not(#ublock0-epicker) {
background: #2b2a33 !important;
}
}
Sources: