How to Make the New Tab Page Dark Themed in Firefox

From Paritybit.ca Wiki

This tutorial is known to apply to Firefox 68.x.x-esr. It may not apply to later Firefox versions.

Difficulty: Beginner

All of my desktop environments use the Arc-Dark theme. It's not too dark and it also feels way easier on my eyes than most of the light themes out there. Firefox does a good job of using my system theme to colour its UI except for the New Tab page which remains blindingly white.

Here is how you can change the background of the New Tab page:

  1. Navigate to your Firefox profile directory:
    1. Go to about:support using the address bar
    2. Click "Open Directory" next to the item in the table labelled "Profile Directory"
  2. Create the directory chrome in your Firefox profile directory if it doesn't exist.
  3. In the chrome directory, create the userContent.css file and populate it with the following:
@-moz-document url("about:newtab") {
    body {
        background-color: <colour> !important;
    }
}

Replace <colour> with your desired colour. I configure my Firefox with #383c4a because it's one of the colours that Arc-Dark features heavily so it meshes well with my system theme.

You may also want to set this for "about:blank" if you use a blank page as the first page that opens when Firefox launches.