How to make the about:blank page black or any other color in Firefox?

Question

Is there a built-in way in Firefox to blacken or to colour the about:blank page?

Will I maybe save some energy by doing so?

Similar/Related: [Change the white background in webpages to another color](http://superuser.com/questions/181214/change-the-white-background-in-webpages-to-another-color?lq=1) — Ƭᴇcʜιᴇ007, Jun 03 '13 at 17:29

score 65 · Accepted Answer · answered Nov 04 '16 at 22:16

65

Under about:config, change browser.display.background_color from #ffffff to whatever hex value you want.

Changing screen space to a dark color (preferably black) will ONLY make a power difference when using AMOLED screens, most commonly found on phones. So if you're using a regular LCD, TFT or, IPS display, you won't see any battery life improvements, but your browser will be swagged out

answered Nov 04 '16 at 22:16

fredthefaillord

676
6
2

1

Did not work for me on Firefox 69 on Ubuntu Linux 18.04. Furthermore, as explained on http://kb.mozillazine.org/About:config_entries#Browser this setting can actually be changed in the regular user preference panel. – Stéphane Gourichon Oct 08 '19 at 12:09
8

To be more precise, this settings applies either "only to pages that don't specify a color" or "on all pages only when using a high contrast theme" or "on all pages". We don't want it "on all pages", only on new blank tab. – Stéphane Gourichon Oct 09 '19 at 06:51
4

This breaks the background color on pages like https://wolframalpha.com and many others, making them potentially unreadable. The accepted answer, or the one at https://gist.github.com/gmolveau/a802ded1320a7591a289fb7abd0d6c45, works correctly. – erb Jan 09 '20 at 15:15
Although this will break the background for any web page without default background, when using plugins like DarkReader to make all pages dark, it can work out well. – Sushruth Jan 30 '20 at 08:10
3

Do you know a way to do this on Google Chrome? – Jire Jun 10 '20 at 00:04

terdon · Answer 2 · 2014-04-20T12:03:26.033

37

Yes you can change the color. As explained here you should

Windows: go to %appdata%/mozilla/firefox/profiles and open the folder in there.

On Linux the equivalent is ~/.mozilla/firefox/RANDOM_TEXT.default/

On OSX it is /Library/Application Support/Firefox/Profiles/RANDOM_TEXT.default
look for the chrome folder. In that folder, find userContent-example.css and rename it to userContent.css.

The folder and file may not be there yet with newer Firefox versions. If so, simply create them manually.

Add this line to the file

@-moz-document url-prefix(about:blank) {*{background-color:#000000;}}

As to whether it will save energy, probably not:

On LCD displays, color may confer no benefit at all. In response to my inquiry, Steve Ryan, program manager for Energy Star’s power-management program, asked consulting firm Cadmus Group to run a quick test by loading Blackle, Google and the Web site of the New York Times (which is, like Google, mostly white on-screen) on two monitors — one CRT, one LCD — and connecting a power meter to both. “We found that the color on screen mattered very little to the energy color consumption of the LCD monitor,” said David Korn, principal at Cadmus, which specializes in energy and environment, and does work for the government. The changes were so slight as to be within the margin of error for the power meter. Tweaking brightness and contrast and settings had a bigger effect. The bulkier CRT screen did see savings with Blackle of between 5% and 20%. Mr. Korn emphasized that this was a quick test, not a rigorous study.

edited Apr 20 '14 at 12:03

answered Jun 03 '13 at 17:28

terdon

52,568
14
124
170

Woohoo :D It worked! Thank you very much! On my Mac it was /Library/Application Support/Firefox/Profiles/123xyz.default. I had to manually create the chrome folder and placed your CSS file in there, restart and it worked! Thanks! – leymannx Jun 03 '13 at 17:35
4

The disadvantage of setting the background-colour is, that especially on websites with text entry fields the background of the text will also appear in that background-colour... In other words: websites where no CSS background colour is set, the background colour is the Firefox background-colour. Makes typing/reading quite uncomfortable. So I set it back to default by deleting the userContent.css – leymannx Jul 03 '13 at 09:20
3

Easier way to open profile folder: open "about:support" page in Firefox and click the "Profile Folder" button. – ciastek Jan 03 '17 at 00:00
3

It works for Firefox 57 also, just chreate the chrome/userConent.css file if it doesn't exist. – tigerjack Nov 30 '17 at 20:45
Yo terdon, can you confirm and maybe incorporate the newest answer below? – leymannx Jan 31 '19 at 09:10
1

As far as I know, this trick no longer works on Firefox 67. – Mercury Platinum Jun 05 '19 at 20:43
For firefox version >= 67 use [this answer](https://superuser.com/a/1142572/848584) – kevinSpaceyIsKeyserSöze Oct 05 '19 at 13:02
1

Works fine in Firefox 76, just set `toolkit.legacyUserProfileCustomizations.stylesheets` to `true` first. – Vladimir Panteleev Jul 02 '20 at 17:00

user1306322 · Answer 3 · 2019-08-24T19:33:55.887

15

If you have Stylus extension installed, just create a new style with this exact code:

@-moz-document url-prefix(about:blank) {*{background-color:#000000;}}

_{credit goes to terdon's answer}

Update: Apparently, what Stylus says in its message about how this no longer works on special pages like about:blank, it actually still totally does! To add a script, you have to use the workaround proposed by mic in comments:

Open the Manage page of Stylus with the list of all scripts you have;
Press "Write new style" button;
Under the large "Mozilla format" header press the "Import" button, and a popup with a textbox will open, paste the entire script from this post into it, and press "overwrite style"
Don't forget to add a descriptive name for the script in the top left textbox;
Press "Save".

edited Aug 24 '19 at 19:33

answered Dec 31 '13 at 15:18

user1306322

4,736
14
50
88

3

+1 This should be up voted more. In v38 of Firefox it should be `about:newtab` – L84 May 04 '15 at 17:32
That is if you wish for your new tab to be `about:newtab`. I set it to `about:blank` myself. – user1306322 May 04 '15 at 18:41
True but my about:blank page and new tab are one and the same for me, at least with the way I use FF. => – L84 May 04 '15 at 20:37
I added both about:newtab and about:blank to have all of my tab start with black background: @-moz-document url-prefix(about:newtab) {*{background-color:#000000;}} @-moz-document url-prefix(about:blank) {*{background-color:#000000;}} – Kamran Bigdely May 13 '16 at 03:16
Please note that ["Stylish extension steals all your internet history"](https://www.reddit.com/r/netsec/comments/8vpljp/stylish_browser_extension_steals_all_your/) since it was bought by SimilarWeb. – Luc Aug 19 '18 at 13:54
@Luc changed it to Stylus – user1306322 Aug 20 '18 at 10:30
@user1306322 Thanks! This might be the first time I see an unnamed account still be active after a few months, let alone five years :) – Luc Aug 20 '18 at 15:00
@Luc I'm an exception but normally you'd want to just suggest an edit with sufficient explanation or post your own answer. But only after a while, of course. Sometimes the poster notices and edits their answer as in this case :) – user1306322 Aug 21 '18 at 12:16
as to be noted that the newest ff does not allow this in stylus anymore – ProtoAES256 Oct 08 '18 at 09:19
No longer possible. If you attempt to use stylus to do this, Firefox will show the following message: As a security precaution, the browser prohibits extensions from affecting its built-in pages (like chrome://version, the standard new tab page as of Chrome 61, about:addons, and so on) as well as other extensions' pages. Each browser also restricts access to its own extensions gallery (like Chrome Web Store or AMO). – Nick Painter Jul 02 '19 at 19:42
1

You can still use Stylus and write a style for about:blank and the style will work, despite the message from Stylus. You just have to go to Manage > Write > Import > [Paste in the code] Overwrite style, and name your style and save. (Firefox 68) – mic Jul 26 '19 at 11:38

score 8 · Answer 4 · answered Jan 31 '19 at 08:49

8

I know this is an old question, but in Firefox 64, the chrome folder doesn't exist anymore in the /Library/Application Support/Firefox/Profiles/RANDOM_TEXT.default location.

I did find a setting though under the about:config key browser.display.background_color, which you can set to any hex color code. This setting will probably save my eyes a couple dozen times a day.

HTH

answered Jan 31 '19 at 08:49

Stephanvs

181
1
3

Works great - thanks! Takes effect at the moment the about:config tab is closed. – jcoppens Jun 11 '19 at 05:30
You can just create the chrome folder and the userChrome.css file. – Casey Jones Jun 29 '19 at 03:11
chrome.css is apparently going to be disabled by default in the near future, but you can re-enable it via about:config settings https://bugzilla.mozilla.org/show_bug.cgi?id=1541233 – user1306322 Aug 24 '19 at 18:48
2

This isn't working for me on FF 68.0.2 (64-bit, Ubuntu 16.04). – TenLeftFingers Aug 24 '19 at 21:09
`background_color` is the settings mentioned in @fredthefaillord and doesn't work on recent firefox. – Stéphane Gourichon Oct 09 '19 at 06:53
It works for me on 69.0.2 under Ubuntu 18.04 – bartolo-otrit Oct 25 '19 at 08:57
Works for me on Windows 10, FF 92.0 – user3751385 Sep 24 '21 at 21:36

score 2 · Answer 5 · edited Sep 08 '19 at 00:21

2

Set browser.display.use_system_colors to true in about:config.

edited Sep 08 '19 at 00:21

I say Reinstate Monica

25,487
19
95
131

answered Sep 07 '19 at 23:10

sergio

245
1
6

Did not work for me on Firefox 69 on Ubuntu Linux 18.04. – Stéphane Gourichon Oct 09 '19 at 06:54
2

Your system theme should be dark of course. – sergio Oct 10 '19 at 10:24
Before writing here, I tried dark system theme with default firefox theme which follows it, then with firefox dark theme, did not work either. Thanks for mentioning this anyway. – Stéphane Gourichon Oct 10 '19 at 14:00

score 1 · Answer 6 · answered Apr 28 '20 at 13:54

1

In Linux, add the following file (or append to it, if it exists):

~/.config/gtk-3.0/settings.ini

[Settings]
gtk-application-prefer-dark-theme = true

(you might also find and toggle this option through your Linux distro settings manager)

answered Apr 28 '20 at 13:54

Ejez

111
1

How to make the about:blank page black or any other color in Firefox?

6 Answers6

Linked