gmolveau/firefox_dark_background.md

Last active June 26, 2025 20:32

Star (125) You must be signed in to star a gist
Fork (10) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/gmolveau/a802ded1320a7591a289fb7abd0d6c45.js"></script>
Save gmolveau/a802ded1320a7591a289fb7abd0d6c45 to your computer and use it in GitHub Desktop.

Download ZIP

Firefox dark background / theme for new tab and loading screen

Raw

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

PaperNick commented Dec 28, 2024

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