How to Make New Tabs in Firefox Dark Mode Friendly

If you love dark mode for eye-friendly late-night browsing, and you also love Mozilla Firefox, you’ve probably encountered a problem: opening new tabs and loading new pages blinds you. How to make new tabs suitable for dark mode.

Dark mode is great, but the white “flash” isn’t

There is an issue with Firefox’s dark mode that persists despite various fixes over the past few years. If you are not a devoted dark mode user, you may not be aware of this issue. If so – and I certainly am – you’re probably thrilled that there’s a simple fix that works whether the error is fully squashed or not.

The problem? Even if you have Firefox in dark mode, it’s blindingly white when you open a new empty tab.

Worse, even when you load a webpage that supports dark mode, there’s a brief “flash” where the default white background throws bright white light at you before the page loads.

That might not seem like the end of the world, but when you’ve carefully tuned your workspace to avoid having your very bright monitor shoot you in the face with bright white light, it’s a bit jarring.

So forget about getting scared late at night while working peacefully in dark mode. Let’s provide a simple solution to ensure these high lumen sneak attacks are a thing of the past.

Forget browser extensions, change your Chrome instead

When it comes to your web browser, it’s always best if you can solve something in the easiest way and with the least amount of risk. Browser extensions are a security and privacy nightmare.

While you don’t have to avoid them completely, it’s wise to only stick to addons and extensions that have been properly reviewed and verified. It’s always a safe bet to avoid random extensions from unknown authors.

With that in mind, we were really happy to have found an incredibly simple way to solve our problem without having to find (and check the code of) an extension coded specifically for the task.

The solution? Take advantage of a handy little browser modification tool built right into Firefox, the userChrome.css and userContent.css files.

If you pick apart that first filename, you’ll get a clue as to what we’re going to do, it’s a user-supplied stylesheet for the browser’s Chrome. (The Chrome web browser is actually named after the Chrome browser, and that’s a bit of a joke.) We’ll change that too, in the name of thoroughness userContent.css to.

Enable support for legacy styles

Before anything else, we need to enable a configuration setting for our little tweak to actually take effect. If you don’t do this step, you’ll be tearing your hair out in frustration when none of the changes we’ve made work.

Start Firefox and enter about:config in the address bar. Discard the warning if it appears. Use the search box to search toolkit.legacyUserProfileCustomizations.stylesheets . The default is false, double-click the entry to set it to true.

Find your profile directory

First we need to find out where the configuration files are located for your particular Firefox installation. Start Firefox and enter about:profiles in the address bar. This will list all of your Firefox browser profiles and provide a handy direct link to the root of your profile.

Select the profile for which you want to perform this dark mode adjustment and click the “Open Folder” button next to the “Root Directory” list entry.

For Windows users, this directory looks something like this C:\Users\[YourUserName]\AppData\Roaming\Mozilla\Firefox\Profiles\[ProfileName] where YourUserName is your Windows username and ProfileName is an alphanumeric string generated by Firefox like fxxd088p.default-release .

Create Chrome directory and style files

If you’re looking for stylesheet solutions to this particular problem, there are several variations, some of which are unnecessarily complex, but we use and recommend the very simple code snippets shared by Github user gmolveau for years with great success you to do this same.

In the profile directory, create a new subdirectory named chrome. We will create two style sheet files in this directory.

Create a new empty text document in that directory and paste the following code into it:

tabbrowser tabpanels { background-color: rgb(19,19,20) !important; }
browser { background-color: #131314 !important; }

Save the file as userChrome.css. This code bit fixes the bright white flickering that occurs between page loads.

Create another blank text document and paste this code:

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

Save the file as userContent.css. This piece of code ensures that blank tabs are a very dark muted gray and not a bright white.

You can replace the muted gray with any color you want using appropriate RGB and hex codes. For example, if you want jet black, you can replace each instance of 19,19,20 above with 0,0,0 and each instance of #131314 with #0A0A0A.

Or, if you wanted to vote for total anarchy, you could opt for neon green: 117,225,51 #75FF33 . Whatever your color desires, you can use a simple RGB picker to choose the right codes.

After creating the files, simply restart Firefox for the changes to take effect (if they don’t take effect, make sure you have enabled legacy support as described in the first step).

Now you can test it. You can check what color the blank tab is in your Firefox installation by typing about:blank in the address bar.

Testing the “Flash” pageload is a bit trickier. The easiest way to test it is to visit a web page and open some links from that page in new tabs.

It’s hard to see at times, especially on a fast connection to an optimized webpage, but if you load a few you should be able to see the color change – in the screenshot above you can see the flash of color loading between pages is no longer white, but the muted gray we chose.

If you really have dark mode in mind after all of this, now is the perfect time to enable dark mode everywhere.