[ad_1]
If you love dark mode for late night browsing and you also love Mozilla Firefox, chances are you’ve 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 is an issue with Firefox’s dark mode that persists, despite several bug fixes over the years. If you are not a devoted dark mode user, you may not be familiar with this issue. If so, and I certainly am, you’ll probably be delighted to discover that there is a simple solution that works, whether or not the error is completely removed.
The problem? Even if you have Firefox in dark mode, every time you open a new blank tab, it’s blinding white.
Worse yet, even when you’re loading a web page that supports dark mode, there’s a brief “flash” where the default white background casts a bright white light towards you before the page loads.
It might not seem like the end of the world, but when you’ve carefully adjusted your workspace specifically to prevent your very bright monitor from throwing you in the face with bright white light, it’s a bit jarring.
So forget about late-night frights while you work quietly in dark mode. Let’s implement a simple solution to ensure those high lumen sneak attacks are a thing of the past.
When it comes to your web browser, if you can solve something in the simplest way possible with the least amount of risk, then it’s always for the best. Browser extensions are a security and privacy nightmare.
While you don’t have to avoid them entirely, it’s wise to stick only to plugins and extensions that are properly reviewed and verified. It is always a safe bet to avoid random extensions from unknown authors.
With that in mind, we were very happy to find an incredibly simple way to solve our problem without having to search for (and review the code) a custom-coded extension for the task.
The solution? Leveraging a handy little browser tweaking tool built right into Firefox, the userChrome.css Y userContent.css records
If you break out that first filename, you get a hint of what we’re about to do, it’s a user-provided style sheet for the browser’s Chrome. (The Chrome web browser is actually named after the Chrome browser, and it’s a bit of a joke, too.) Also, in the name of thoroughness, we will modify the userContent.css also.
Enable legacy style support
First of all, we need to activate a configuration setting for our little tweak to take effect. If you don’t do this step, you’ll tear your hair out in frustration when none of the changes we make do anything.
Start Firefox and type about:config in the address bar. Dismiss the warning if it appears. Use the search box to search toolkit.legacyUserProfileCustomizations.stylesheets . The default value is false, double click the entry to set it to true.
Locate your profile directory
First, we need to locate where the configuration files are for your particular installation of Firefox. Start Firefox and type about:profiles in the address bar. This will list all the profiles in your Firefox browser and provide a handy direct link to the root directory of your profile.
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 Chrome directory and style files
If you’re looking for style sheet solutions to this particular problem, there are several variations floating around, some unnecessarily complex, but we’ve been using very simple code snippets shared by github user gmolveau for years with great success and we recommend you do the following . same.
Inside the profile directory, create a new subdirectory called chrome. We will create two style sheet files within that directory.
Create a new blank 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 snippet 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 with the name userContent.css. This code snippet will ensure that the blank tabs are a very dark dull gray and not a bright white.
You can replace the dull gray with any color you like using the appropriate RGB and hex codes. If you wanted a 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 suppose you could opt for neon green: 117,225,51 #75FF33 . Whatever your color desire is, you can use a simple RGB picker to select the correct codes.
Once you’ve created the files, simply restart Firefox for the changes to take effect (if they don’t, make sure to enable legacy support as described in the first step).
Now you can try it. You can check what color the blank tab is in your Firefox installation by typing about:blank in the address bar.
Testing the page by loading “flash” is a bit more complicated. 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 catch sometimes, especially on a fast connection to an optimized web page, but if you load a few you should be able to catch the color change – in the screenshot above you can see the color flash loading between pages . it is no longer white but the dull gray that we selected.
If, after all this, you really have dark mode on your mind, now is the perfect time to enable dark mode everywhere.
[ad_2]
