Table of Contents
If you have recently changed your Firefox theme and are now looking for a way to make the background of the New Tab and about:blank pages match, this article will show you how to do so. As an example, we will change the background from white to dark grey, however, you can change it to any colour you like.
How to Turn Off Quick Find on Firefox 63. (Disable Quick Find on Firefox)
As we recently wrote an article showing you how to create your own custom Firefox browser themes, it seemed like a good idea to follow that article up with one showing you how to change the colour of the New Tab and about:blank pages as well. Although this generally isn’t considered part of a Firefox theme, I personally think it is just as important a part of the theming process, though sadly, a little more complicated than the process shown in our first article. Which you can find a link to below.
How to Create Your Own Custom Firefox Themes.
Although the process for changing the New Tab and about:blank page colour on Firefox isn’t as easy as changing your theme, it’s not as hard as you might think. It will be even easier if you are simply trying to change it to a dark theme, as you will be able to copy and paste all of the following code without making any changes. So without further adieu let’s begin.
Note: If you would like to use the Custom Firefox Color theme I am using, you can find it here.
How Do You Change the New Tab and about:blank Page Colour on Firefox?
To kick-start the process of changing the New Tab page colour on Firefox, open Firefox into the main window, then click the Hamburger icon in the top right-hand corner and select Help
Next click Troubleshooting Information.
Now on this page click Open Folder, next to Profile Folder. This will take you straight to your Firefox profile folder and save you a ton of time searching for it using File Explorer.
Once you have this folder open, right-click and create a New Folder called chrome.
For the next step enter the newly created chrome folder and create a new Text Document, called userChrome.css you will need to replace .txt with .css for the file format to change. (This will require you to accept a warning prompt)
Note: If you can’t view or change the file type, click View at the top of File Explorer and make sure File Name Extensions is ticked.
Now that you have a file called userChrome.css, double-click on it to open Notepad, then paste the following text into the open note:
.browserContainer {
background-color: #3d3d3d !important;
}
In the short code above, #3d3d3d is the colour of the background that will be used and is a simple colour hex code. You can find colour hex codes all over the Internet and in programs like Photoshop. You can also find colour hex codes on the Firefox Color webpage, linked in the article about theming Firefox above.
If you are just looking to replicate the dark theme I am using in the images, feel free to leave the code unchanged. Once you have decided on a colour code, click File and Save the notepad file. Next, create another Text Document called userContent.css and paste the following code into the notepad document.
@-moz-document url-prefix(about:blank), url-prefix(about:newtab) {
html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
background: #3d3d3d !important;
}
}
@-moz-document url(about:newtab),
url(about:home) {
body{
background-color:#3d3d3d!important;
color:#D1D1D1!important;
}
.card,
.prefs-pane .sidebar {
background-color:#202020!important;
}
#snippets,
.section-title,
.snippetContainer {
color: #AEAEAE!important;
}
.contentSearchSuggestionTable,
.contentSearchSuggestionsList{
color:black!important;
}
.display-item {color: #D1D1D1!important;}
#aboutMozilla::before {filter:invert(100%)!important;}
#searchText{
background:#474749!important;
border-radius: 4px;
border: 1px solid #3d3d3d;
box-shadow: none;
}
#searchSubmit,
#launcher {display:none!important;}
}
Again you will see quite a few different Hex colour codes in the above text. If you are just wanting to clone the style I have, you can leave the codes unchanged. However, if you want to use different colours you will need to change these codes to the codes for your chosen colour. It may take a little trial and error to figure out which section the code will affect so make the changes gradually.
Once you have finished making any changes, save the file and open Firefox. If you had Firefox open during the changes, restart it. If you have done everything correctly, your Firefox New Tab page should look exactly like the images shown. Unless of course you have made your own colour changes. If you would like to use the Firefox Color theme I am using, you can find it here.
If you want to go even further and don't mind installing some software, you can head on over to ShadowFox and download the full Firefox dark theme. It is by far the most comprehensive dark theme available for Firefox and comes highly recommended by users on Github and Reddit. You can check out an example here.
