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 :

@media (prefers-color-scheme: dark) {
  tabbrowser tabpanels {
    background-color: rgb(43,42,51) !important;
  }

  browser {
    background-color: #2b2a33 !important;
  }
}

• Then create another file userContent.css and paste the followind code in it :

@media (prefers-color-scheme: dark) {
  @-moz-document url-prefix(about:blank) {
    html > body:empty {
      background-color: rgb(43,42,51) !important;
    }
  }

  @-moz-document url(about:blank) {
    html > body:empty {
      background-color: rgb(43,42,51) !important;
    }
  }
}

• Completely quit and restart firefox

• Enjoy