Link directory

How to Create New Tabs in Firefox Dark Mode

Halfpoint/Shutterstock.com

If you love dark mode for nighttime browsing, and you also love Mozilla Firefox, you’ve probably run into a problem: opening new tabs and loading new pages blinds you. Here’s how to make new tabs compatible with dark mode.

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

There’s a problem with Firefox’s dark mode that persists, despite various bug fixes over the past few years. If you’re not a dedicated dark mode user, you might not be familiar with this problem. If you are – and I certainly am – you’re probably glad to find that there’s a simple fix that works whether or not the bug is completely squashed.

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

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

It might not seem like the end of the world, but when you’ve carefully set your workspace specifically to prevent your super-bright monitor from blasting you in the face with bright white light, it’s a little shocking.

So forget about being surprised late at night while you work peacefully in dark mode. Let’s deploy a simple solution to make sure those high-brightness sneak attacks are a thing of the past.

Forget browser extensions, tweak your Chrome instead

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

While you don’t have to avoid them altogether, it’s wise to only stick to add-ons and extensions that are 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 find an incredibly easy way to solve our problem without having to search (and review code) for a custom extension coded for the task.

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

If you break that first filename apart, you get a clue what we’re about to do, it’s a user-provided stylesheet for browser chrome. (The Chrome web browser is actually named chrome browser, and it’s a bit of a joke, at that.) We’ll also, in the name of rigor, modify the userContent.css too.

Enable support for legacy styles

First and foremost, we need to toggle a configuration setting for our little tweak to actually take effect. If you don’t follow this step, you’ll be tearing your hair out in frustration when none of the changes we make will do anything.

Launch Firefox and type about:config in the address bar. Ignore 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.

Locate your profile directory

First, we need to locate where the configuration files for your particular Firefox installation are located. Launch Firefox and type about:profiles in the address bar. This will list all of your Firefox browser profiles and provide a convenient direct link to your profile root directory.

Select the profile you want to make this dark mode tweak on and click the “Open Folder” button next to the list entry for “Root Directory.”

For Windows users, this directory will look something like C:Users[YourUserName]AppDataRoamingMozillaFirefoxProfiles[ProfileName] where YourUserName is your Windows username and ProfileName is an alphanumeric string generated by Firefox like fxxd088p.default-release .

Create a Chrome directory and styling files

If you’re looking for stylesheet solutions to this particular problem, there are several floating variations – some unnecessarily complex – but we’re using the very simple code snippets shared by github user gmolveau for years with great success and you recommend doing the same.

In the profile directory, create a new subdirectory called chrome. We will create two stylesheet files in this directory.

Create a new blank text document in this 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 piece of code will fix the bright white flicker 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 will ensure that the blank tabs are a very dark gray and not a bright white.

You can change the muted gray to any color you want using the appropriate RGB and hex codes. If you wanted jet black, for example, you could 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, we guess you could opt for neon green: 117,225,51 #75FF33 . Whatever color you fancy, you can use a simple RGB picker to select the right codes.

Once you’ve created the files, simply restart Firefox for the changes to take effect (if they don’t take effect, make sure you’ve enabled legacy support as shown in step one).

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

Testing the “flash” page load is a little trickier. The easiest way to test it is to visit a web page and open a few links from that page in new tabs.

Sometimes it’s hard to catch, especially on a fast connection to an optimized webpage, but if you load a few you should be able to catch the color change. In the screenshot above you can see how the color flash between page loads is no longer white but the muted gray we selected.

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