Change Firefox new tab background
I always use dark personas theme or the default compact dark theme that comes included with Firefox and I don't like the default background color being white when I open a new tab.
There was an add on I used that let me customize new tabs but it's gone now with Firefox 57...
So, how can I do to change new tabs background?
firefox colors firefox-extensions themes firefox-57
add a comment |
I always use dark personas theme or the default compact dark theme that comes included with Firefox and I don't like the default background color being white when I open a new tab.
There was an add on I used that let me customize new tabs but it's gone now with Firefox 57...
So, how can I do to change new tabs background?
firefox colors firefox-extensions themes firefox-57
add a comment |
I always use dark personas theme or the default compact dark theme that comes included with Firefox and I don't like the default background color being white when I open a new tab.
There was an add on I used that let me customize new tabs but it's gone now with Firefox 57...
So, how can I do to change new tabs background?
firefox colors firefox-extensions themes firefox-57
I always use dark personas theme or the default compact dark theme that comes included with Firefox and I don't like the default background color being white when I open a new tab.
There was an add on I used that let me customize new tabs but it's gone now with Firefox 57...
So, how can I do to change new tabs background?
firefox colors firefox-extensions themes firefox-57
firefox colors firefox-extensions themes firefox-57
edited Nov 19 '17 at 17:02
Nemo
6801629
6801629
asked Jul 30 '17 at 22:17
danicotradanicotra
1,0992621
1,0992621
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
I think this may interest others as well.
So far I know a couple of addons to achieve that and a way to do without addons (as it seems a lot of them are disappearing day by day), here we go then:
Customize about:newtab (please see point 3 below)
This is a specific add on for the task, it not only let's you change the background color but also choose a background image and also resize and align it as you like... nice!
Stylish (please see point 3 below)
Stylish is an add on with a broader spectrum of functionality; it lets you customize Firefox itself as long as manage/install themes and skins for lots of popular websites such as Google, Facebook, YouTube and many others... I think it's overkill if you only need it for the task we are dealing with here.
Neither of the above will work with Firefox 57 due to added restrictions. Stylus with Firefox 57's new tab page shows this 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).
So, let's leave addons aside and get our hands dirty!
You may decide you don't want to use an addon for this, well in this case here's what to do:
write
about:profiles
in the Firefox address bar and select Open Folder in correspondence of the "Root Directory" of the user profile you want to customize (usually there's only one);by now the profile's root folder should have opened, create (if it is not present yet) a new folder named
chrome
;
create (if it is not present already) a new file named
userContent.css
inside thechrome
folder and put the following code in it:
@-moz-document url("about:newtab") {
body {
background-color: #000000 !important;
}
}
If you can juggle with CSS, you may also add some code to set a background image if you like (I suggest to eventually put the images in the same folder with the CSS).
You may need to restart Firefox to make customization being applied.
Credits for this last point goes to DIENER_
1
For doing the same thing with Firefoxabout:blank
page you can refer to this other Q&A: superuser.com/questions/603218/…
– danicotra
Jul 30 '17 at 22:22
3
Bonus points(if I could) for the Firefox 57+ compatible method.
– japzone
Nov 17 '17 at 6:44
Update-comment: Make sure you don't miss this new and awesome Firefox extension: Tabliss works great! (Available for Chrome as well)
– danicotra
Jun 24 '18 at 21:34
Another good WebExtension for FF to achieve the purpose here: New Tab Override
– danicotra
Jun 27 '18 at 18:34
Thanks! just made this to match breeze dark plasma 5 theme colors gitlab.com/snippets/1781039
– isalgueiro
Nov 20 '18 at 12:49
add a comment |
Well, I must say the solution given by @danicotra does work for new tab, even with Firefox 57. However, during loading of a page, a blank flash will still systematically burn your eyes.
Here is an other proposal of content for your ~/.mozilla/firefox/xxxxxxxx.default/chrome/userContent.css
, which does darken a few more places, but won't resolve the blank flash on load.
/* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab */
/* https://userstyles.org/styles/142191/remove-new-tab-flash */
@-moz-document url-prefix(about:preferences), url-prefix(about:blank), url-prefix(about:newtab) {
html, body, #newtab-customize-overlay {
background: #303030 !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(chrome://browser/content/browser.xul)
{
browser[type="content-primary"]
{
background: #303030 !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(chrome://browser/content/browser.xul)
{
browser[type="content-primary"], tabbrowser tabpanels, #appcontent > #content
{
background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(about:blank),
url(about:preferences),
url(about:config),
url(about:newtab)
{
#newtab-window,
html,
body,
#newtab-customize-overlay
{
background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
color: #b2b2b2 !important;
}
}
html>body {
background: #303030 !important;
color: #b2b2b2 !important;
}
1
An almost working solution for blank flash reddit.com/r/firefox/comments/6s2l0w/… but some white elements might still flash while loading page.
– psychoslave
Nov 21 '17 at 21:47
add a comment |
Open about:config
and change the value browser.display.background_color
to the color of your choice. I'm using #595959 (neutral gray).
This works with blank tab or "Firefox Home".
Sadly, opening tab quickly or when the browser is on heavy load will still result of a white flash.
If you don't know how to use about:config please read https://support.mozilla.org/en-US/kb/about-config-editor-firefox
add a comment |
I like psychoslave's option but if u do not want to change the google background or those sites background what use the browser default background change the last three line like this:
#root{ background: #303030 !important; color: #b2b2b2 !important; }
And here is the full code, copyed from psychoslave's answer.
> /* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab
> */ /* https://userstyles.org/styles/142191/remove-new-tab-flash */ @-moz-document url-prefix(about:preferences), url-prefix(about:blank),
> url-prefix(about:newtab) { html, body, #newtab-customize-overlay {
> background: #303030 !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> browser[type="content-primary"] {
> background: #303030 !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> browser[type="content-primary"], tabbrowser tabpanels, #appcontent >
> #content {
> background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed
> !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(about:blank),
> url(about:preferences),
> url(about:config),
> url(about:newtab) { #newtab-window, html, body, #newtab-customize-overlay {
> background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
> color: #b2b2b2 !important; } }
>
> #root { background: #303030 !important; color: #b2b2b2 !important; }
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "3"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f1235975%2fchange-firefox-new-tab-background%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think this may interest others as well.
So far I know a couple of addons to achieve that and a way to do without addons (as it seems a lot of them are disappearing day by day), here we go then:
Customize about:newtab (please see point 3 below)
This is a specific add on for the task, it not only let's you change the background color but also choose a background image and also resize and align it as you like... nice!
Stylish (please see point 3 below)
Stylish is an add on with a broader spectrum of functionality; it lets you customize Firefox itself as long as manage/install themes and skins for lots of popular websites such as Google, Facebook, YouTube and many others... I think it's overkill if you only need it for the task we are dealing with here.
Neither of the above will work with Firefox 57 due to added restrictions. Stylus with Firefox 57's new tab page shows this 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).
So, let's leave addons aside and get our hands dirty!
You may decide you don't want to use an addon for this, well in this case here's what to do:
write
about:profiles
in the Firefox address bar and select Open Folder in correspondence of the "Root Directory" of the user profile you want to customize (usually there's only one);by now the profile's root folder should have opened, create (if it is not present yet) a new folder named
chrome
;
create (if it is not present already) a new file named
userContent.css
inside thechrome
folder and put the following code in it:
@-moz-document url("about:newtab") {
body {
background-color: #000000 !important;
}
}
If you can juggle with CSS, you may also add some code to set a background image if you like (I suggest to eventually put the images in the same folder with the CSS).
You may need to restart Firefox to make customization being applied.
Credits for this last point goes to DIENER_
1
For doing the same thing with Firefoxabout:blank
page you can refer to this other Q&A: superuser.com/questions/603218/…
– danicotra
Jul 30 '17 at 22:22
3
Bonus points(if I could) for the Firefox 57+ compatible method.
– japzone
Nov 17 '17 at 6:44
Update-comment: Make sure you don't miss this new and awesome Firefox extension: Tabliss works great! (Available for Chrome as well)
– danicotra
Jun 24 '18 at 21:34
Another good WebExtension for FF to achieve the purpose here: New Tab Override
– danicotra
Jun 27 '18 at 18:34
Thanks! just made this to match breeze dark plasma 5 theme colors gitlab.com/snippets/1781039
– isalgueiro
Nov 20 '18 at 12:49
add a comment |
I think this may interest others as well.
So far I know a couple of addons to achieve that and a way to do without addons (as it seems a lot of them are disappearing day by day), here we go then:
Customize about:newtab (please see point 3 below)
This is a specific add on for the task, it not only let's you change the background color but also choose a background image and also resize and align it as you like... nice!
Stylish (please see point 3 below)
Stylish is an add on with a broader spectrum of functionality; it lets you customize Firefox itself as long as manage/install themes and skins for lots of popular websites such as Google, Facebook, YouTube and many others... I think it's overkill if you only need it for the task we are dealing with here.
Neither of the above will work with Firefox 57 due to added restrictions. Stylus with Firefox 57's new tab page shows this 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).
So, let's leave addons aside and get our hands dirty!
You may decide you don't want to use an addon for this, well in this case here's what to do:
write
about:profiles
in the Firefox address bar and select Open Folder in correspondence of the "Root Directory" of the user profile you want to customize (usually there's only one);by now the profile's root folder should have opened, create (if it is not present yet) a new folder named
chrome
;
create (if it is not present already) a new file named
userContent.css
inside thechrome
folder and put the following code in it:
@-moz-document url("about:newtab") {
body {
background-color: #000000 !important;
}
}
If you can juggle with CSS, you may also add some code to set a background image if you like (I suggest to eventually put the images in the same folder with the CSS).
You may need to restart Firefox to make customization being applied.
Credits for this last point goes to DIENER_
1
For doing the same thing with Firefoxabout:blank
page you can refer to this other Q&A: superuser.com/questions/603218/…
– danicotra
Jul 30 '17 at 22:22
3
Bonus points(if I could) for the Firefox 57+ compatible method.
– japzone
Nov 17 '17 at 6:44
Update-comment: Make sure you don't miss this new and awesome Firefox extension: Tabliss works great! (Available for Chrome as well)
– danicotra
Jun 24 '18 at 21:34
Another good WebExtension for FF to achieve the purpose here: New Tab Override
– danicotra
Jun 27 '18 at 18:34
Thanks! just made this to match breeze dark plasma 5 theme colors gitlab.com/snippets/1781039
– isalgueiro
Nov 20 '18 at 12:49
add a comment |
I think this may interest others as well.
So far I know a couple of addons to achieve that and a way to do without addons (as it seems a lot of them are disappearing day by day), here we go then:
Customize about:newtab (please see point 3 below)
This is a specific add on for the task, it not only let's you change the background color but also choose a background image and also resize and align it as you like... nice!
Stylish (please see point 3 below)
Stylish is an add on with a broader spectrum of functionality; it lets you customize Firefox itself as long as manage/install themes and skins for lots of popular websites such as Google, Facebook, YouTube and many others... I think it's overkill if you only need it for the task we are dealing with here.
Neither of the above will work with Firefox 57 due to added restrictions. Stylus with Firefox 57's new tab page shows this 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).
So, let's leave addons aside and get our hands dirty!
You may decide you don't want to use an addon for this, well in this case here's what to do:
write
about:profiles
in the Firefox address bar and select Open Folder in correspondence of the "Root Directory" of the user profile you want to customize (usually there's only one);by now the profile's root folder should have opened, create (if it is not present yet) a new folder named
chrome
;
create (if it is not present already) a new file named
userContent.css
inside thechrome
folder and put the following code in it:
@-moz-document url("about:newtab") {
body {
background-color: #000000 !important;
}
}
If you can juggle with CSS, you may also add some code to set a background image if you like (I suggest to eventually put the images in the same folder with the CSS).
You may need to restart Firefox to make customization being applied.
Credits for this last point goes to DIENER_
I think this may interest others as well.
So far I know a couple of addons to achieve that and a way to do without addons (as it seems a lot of them are disappearing day by day), here we go then:
Customize about:newtab (please see point 3 below)
This is a specific add on for the task, it not only let's you change the background color but also choose a background image and also resize and align it as you like... nice!
Stylish (please see point 3 below)
Stylish is an add on with a broader spectrum of functionality; it lets you customize Firefox itself as long as manage/install themes and skins for lots of popular websites such as Google, Facebook, YouTube and many others... I think it's overkill if you only need it for the task we are dealing with here.
Neither of the above will work with Firefox 57 due to added restrictions. Stylus with Firefox 57's new tab page shows this 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).
So, let's leave addons aside and get our hands dirty!
You may decide you don't want to use an addon for this, well in this case here's what to do:
write
about:profiles
in the Firefox address bar and select Open Folder in correspondence of the "Root Directory" of the user profile you want to customize (usually there's only one);by now the profile's root folder should have opened, create (if it is not present yet) a new folder named
chrome
;
create (if it is not present already) a new file named
userContent.css
inside thechrome
folder and put the following code in it:
@-moz-document url("about:newtab") {
body {
background-color: #000000 !important;
}
}
If you can juggle with CSS, you may also add some code to set a background image if you like (I suggest to eventually put the images in the same folder with the CSS).
You may need to restart Firefox to make customization being applied.
Credits for this last point goes to DIENER_
edited Feb 7 at 9:14
bertieb
5,662112542
5,662112542
answered Jul 30 '17 at 22:17
danicotradanicotra
1,0992621
1,0992621
1
For doing the same thing with Firefoxabout:blank
page you can refer to this other Q&A: superuser.com/questions/603218/…
– danicotra
Jul 30 '17 at 22:22
3
Bonus points(if I could) for the Firefox 57+ compatible method.
– japzone
Nov 17 '17 at 6:44
Update-comment: Make sure you don't miss this new and awesome Firefox extension: Tabliss works great! (Available for Chrome as well)
– danicotra
Jun 24 '18 at 21:34
Another good WebExtension for FF to achieve the purpose here: New Tab Override
– danicotra
Jun 27 '18 at 18:34
Thanks! just made this to match breeze dark plasma 5 theme colors gitlab.com/snippets/1781039
– isalgueiro
Nov 20 '18 at 12:49
add a comment |
1
For doing the same thing with Firefoxabout:blank
page you can refer to this other Q&A: superuser.com/questions/603218/…
– danicotra
Jul 30 '17 at 22:22
3
Bonus points(if I could) for the Firefox 57+ compatible method.
– japzone
Nov 17 '17 at 6:44
Update-comment: Make sure you don't miss this new and awesome Firefox extension: Tabliss works great! (Available for Chrome as well)
– danicotra
Jun 24 '18 at 21:34
Another good WebExtension for FF to achieve the purpose here: New Tab Override
– danicotra
Jun 27 '18 at 18:34
Thanks! just made this to match breeze dark plasma 5 theme colors gitlab.com/snippets/1781039
– isalgueiro
Nov 20 '18 at 12:49
1
1
For doing the same thing with Firefox
about:blank
page you can refer to this other Q&A: superuser.com/questions/603218/…– danicotra
Jul 30 '17 at 22:22
For doing the same thing with Firefox
about:blank
page you can refer to this other Q&A: superuser.com/questions/603218/…– danicotra
Jul 30 '17 at 22:22
3
3
Bonus points(if I could) for the Firefox 57+ compatible method.
– japzone
Nov 17 '17 at 6:44
Bonus points(if I could) for the Firefox 57+ compatible method.
– japzone
Nov 17 '17 at 6:44
Update-comment: Make sure you don't miss this new and awesome Firefox extension: Tabliss works great! (Available for Chrome as well)
– danicotra
Jun 24 '18 at 21:34
Update-comment: Make sure you don't miss this new and awesome Firefox extension: Tabliss works great! (Available for Chrome as well)
– danicotra
Jun 24 '18 at 21:34
Another good WebExtension for FF to achieve the purpose here: New Tab Override
– danicotra
Jun 27 '18 at 18:34
Another good WebExtension for FF to achieve the purpose here: New Tab Override
– danicotra
Jun 27 '18 at 18:34
Thanks! just made this to match breeze dark plasma 5 theme colors gitlab.com/snippets/1781039
– isalgueiro
Nov 20 '18 at 12:49
Thanks! just made this to match breeze dark plasma 5 theme colors gitlab.com/snippets/1781039
– isalgueiro
Nov 20 '18 at 12:49
add a comment |
Well, I must say the solution given by @danicotra does work for new tab, even with Firefox 57. However, during loading of a page, a blank flash will still systematically burn your eyes.
Here is an other proposal of content for your ~/.mozilla/firefox/xxxxxxxx.default/chrome/userContent.css
, which does darken a few more places, but won't resolve the blank flash on load.
/* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab */
/* https://userstyles.org/styles/142191/remove-new-tab-flash */
@-moz-document url-prefix(about:preferences), url-prefix(about:blank), url-prefix(about:newtab) {
html, body, #newtab-customize-overlay {
background: #303030 !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(chrome://browser/content/browser.xul)
{
browser[type="content-primary"]
{
background: #303030 !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(chrome://browser/content/browser.xul)
{
browser[type="content-primary"], tabbrowser tabpanels, #appcontent > #content
{
background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(about:blank),
url(about:preferences),
url(about:config),
url(about:newtab)
{
#newtab-window,
html,
body,
#newtab-customize-overlay
{
background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
color: #b2b2b2 !important;
}
}
html>body {
background: #303030 !important;
color: #b2b2b2 !important;
}
1
An almost working solution for blank flash reddit.com/r/firefox/comments/6s2l0w/… but some white elements might still flash while loading page.
– psychoslave
Nov 21 '17 at 21:47
add a comment |
Well, I must say the solution given by @danicotra does work for new tab, even with Firefox 57. However, during loading of a page, a blank flash will still systematically burn your eyes.
Here is an other proposal of content for your ~/.mozilla/firefox/xxxxxxxx.default/chrome/userContent.css
, which does darken a few more places, but won't resolve the blank flash on load.
/* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab */
/* https://userstyles.org/styles/142191/remove-new-tab-flash */
@-moz-document url-prefix(about:preferences), url-prefix(about:blank), url-prefix(about:newtab) {
html, body, #newtab-customize-overlay {
background: #303030 !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(chrome://browser/content/browser.xul)
{
browser[type="content-primary"]
{
background: #303030 !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(chrome://browser/content/browser.xul)
{
browser[type="content-primary"], tabbrowser tabpanels, #appcontent > #content
{
background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(about:blank),
url(about:preferences),
url(about:config),
url(about:newtab)
{
#newtab-window,
html,
body,
#newtab-customize-overlay
{
background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
color: #b2b2b2 !important;
}
}
html>body {
background: #303030 !important;
color: #b2b2b2 !important;
}
1
An almost working solution for blank flash reddit.com/r/firefox/comments/6s2l0w/… but some white elements might still flash while loading page.
– psychoslave
Nov 21 '17 at 21:47
add a comment |
Well, I must say the solution given by @danicotra does work for new tab, even with Firefox 57. However, during loading of a page, a blank flash will still systematically burn your eyes.
Here is an other proposal of content for your ~/.mozilla/firefox/xxxxxxxx.default/chrome/userContent.css
, which does darken a few more places, but won't resolve the blank flash on load.
/* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab */
/* https://userstyles.org/styles/142191/remove-new-tab-flash */
@-moz-document url-prefix(about:preferences), url-prefix(about:blank), url-prefix(about:newtab) {
html, body, #newtab-customize-overlay {
background: #303030 !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(chrome://browser/content/browser.xul)
{
browser[type="content-primary"]
{
background: #303030 !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(chrome://browser/content/browser.xul)
{
browser[type="content-primary"], tabbrowser tabpanels, #appcontent > #content
{
background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(about:blank),
url(about:preferences),
url(about:config),
url(about:newtab)
{
#newtab-window,
html,
body,
#newtab-customize-overlay
{
background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
color: #b2b2b2 !important;
}
}
html>body {
background: #303030 !important;
color: #b2b2b2 !important;
}
Well, I must say the solution given by @danicotra does work for new tab, even with Firefox 57. However, during loading of a page, a blank flash will still systematically burn your eyes.
Here is an other proposal of content for your ~/.mozilla/firefox/xxxxxxxx.default/chrome/userContent.css
, which does darken a few more places, but won't resolve the blank flash on load.
/* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab */
/* https://userstyles.org/styles/142191/remove-new-tab-flash */
@-moz-document url-prefix(about:preferences), url-prefix(about:blank), url-prefix(about:newtab) {
html, body, #newtab-customize-overlay {
background: #303030 !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(chrome://browser/content/browser.xul)
{
browser[type="content-primary"]
{
background: #303030 !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(chrome://browser/content/browser.xul)
{
browser[type="content-primary"], tabbrowser tabpanels, #appcontent > #content
{
background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed !important;
color: #b2b2b2 !important;
}
}
@-moz-document url(about:blank),
url(about:preferences),
url(about:config),
url(about:newtab)
{
#newtab-window,
html,
body,
#newtab-customize-overlay
{
background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
color: #b2b2b2 !important;
}
}
html>body {
background: #303030 !important;
color: #b2b2b2 !important;
}
answered Nov 21 '17 at 21:18
psychoslavepsychoslave
358212
358212
1
An almost working solution for blank flash reddit.com/r/firefox/comments/6s2l0w/… but some white elements might still flash while loading page.
– psychoslave
Nov 21 '17 at 21:47
add a comment |
1
An almost working solution for blank flash reddit.com/r/firefox/comments/6s2l0w/… but some white elements might still flash while loading page.
– psychoslave
Nov 21 '17 at 21:47
1
1
An almost working solution for blank flash reddit.com/r/firefox/comments/6s2l0w/… but some white elements might still flash while loading page.
– psychoslave
Nov 21 '17 at 21:47
An almost working solution for blank flash reddit.com/r/firefox/comments/6s2l0w/… but some white elements might still flash while loading page.
– psychoslave
Nov 21 '17 at 21:47
add a comment |
Open about:config
and change the value browser.display.background_color
to the color of your choice. I'm using #595959 (neutral gray).
This works with blank tab or "Firefox Home".
Sadly, opening tab quickly or when the browser is on heavy load will still result of a white flash.
If you don't know how to use about:config please read https://support.mozilla.org/en-US/kb/about-config-editor-firefox
add a comment |
Open about:config
and change the value browser.display.background_color
to the color of your choice. I'm using #595959 (neutral gray).
This works with blank tab or "Firefox Home".
Sadly, opening tab quickly or when the browser is on heavy load will still result of a white flash.
If you don't know how to use about:config please read https://support.mozilla.org/en-US/kb/about-config-editor-firefox
add a comment |
Open about:config
and change the value browser.display.background_color
to the color of your choice. I'm using #595959 (neutral gray).
This works with blank tab or "Firefox Home".
Sadly, opening tab quickly or when the browser is on heavy load will still result of a white flash.
If you don't know how to use about:config please read https://support.mozilla.org/en-US/kb/about-config-editor-firefox
Open about:config
and change the value browser.display.background_color
to the color of your choice. I'm using #595959 (neutral gray).
This works with blank tab or "Firefox Home".
Sadly, opening tab quickly or when the browser is on heavy load will still result of a white flash.
If you don't know how to use about:config please read https://support.mozilla.org/en-US/kb/about-config-editor-firefox
answered Oct 26 '18 at 22:44
gagarinegagarine
5821519
5821519
add a comment |
add a comment |
I like psychoslave's option but if u do not want to change the google background or those sites background what use the browser default background change the last three line like this:
#root{ background: #303030 !important; color: #b2b2b2 !important; }
And here is the full code, copyed from psychoslave's answer.
> /* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab
> */ /* https://userstyles.org/styles/142191/remove-new-tab-flash */ @-moz-document url-prefix(about:preferences), url-prefix(about:blank),
> url-prefix(about:newtab) { html, body, #newtab-customize-overlay {
> background: #303030 !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> browser[type="content-primary"] {
> background: #303030 !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> browser[type="content-primary"], tabbrowser tabpanels, #appcontent >
> #content {
> background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed
> !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(about:blank),
> url(about:preferences),
> url(about:config),
> url(about:newtab) { #newtab-window, html, body, #newtab-customize-overlay {
> background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
> color: #b2b2b2 !important; } }
>
> #root { background: #303030 !important; color: #b2b2b2 !important; }
add a comment |
I like psychoslave's option but if u do not want to change the google background or those sites background what use the browser default background change the last three line like this:
#root{ background: #303030 !important; color: #b2b2b2 !important; }
And here is the full code, copyed from psychoslave's answer.
> /* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab
> */ /* https://userstyles.org/styles/142191/remove-new-tab-flash */ @-moz-document url-prefix(about:preferences), url-prefix(about:blank),
> url-prefix(about:newtab) { html, body, #newtab-customize-overlay {
> background: #303030 !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> browser[type="content-primary"] {
> background: #303030 !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> browser[type="content-primary"], tabbrowser tabpanels, #appcontent >
> #content {
> background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed
> !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(about:blank),
> url(about:preferences),
> url(about:config),
> url(about:newtab) { #newtab-window, html, body, #newtab-customize-overlay {
> background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
> color: #b2b2b2 !important; } }
>
> #root { background: #303030 !important; color: #b2b2b2 !important; }
add a comment |
I like psychoslave's option but if u do not want to change the google background or those sites background what use the browser default background change the last three line like this:
#root{ background: #303030 !important; color: #b2b2b2 !important; }
And here is the full code, copyed from psychoslave's answer.
> /* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab
> */ /* https://userstyles.org/styles/142191/remove-new-tab-flash */ @-moz-document url-prefix(about:preferences), url-prefix(about:blank),
> url-prefix(about:newtab) { html, body, #newtab-customize-overlay {
> background: #303030 !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> browser[type="content-primary"] {
> background: #303030 !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> browser[type="content-primary"], tabbrowser tabpanels, #appcontent >
> #content {
> background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed
> !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(about:blank),
> url(about:preferences),
> url(about:config),
> url(about:newtab) { #newtab-window, html, body, #newtab-customize-overlay {
> background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
> color: #b2b2b2 !important; } }
>
> #root { background: #303030 !important; color: #b2b2b2 !important; }
I like psychoslave's option but if u do not want to change the google background or those sites background what use the browser default background change the last three line like this:
#root{ background: #303030 !important; color: #b2b2b2 !important; }
And here is the full code, copyed from psychoslave's answer.
> /* https://userstyles.org/styles/90565/firefox-adjust-white-flash-when-opening-new-tab
> */ /* https://userstyles.org/styles/142191/remove-new-tab-flash */ @-moz-document url-prefix(about:preferences), url-prefix(about:blank),
> url-prefix(about:newtab) { html, body, #newtab-customize-overlay {
> background: #303030 !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> browser[type="content-primary"] {
> background: #303030 !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(chrome://browser/content/browser.xul) {
>
> browser[type="content-primary"], tabbrowser tabpanels, #appcontent >
> #content {
> background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed
> !important;
> color: #b2b2b2 !important; } }
>
> @-moz-document url(about:blank),
> url(about:preferences),
> url(about:config),
> url(about:newtab) { #newtab-window, html, body, #newtab-customize-overlay {
> background: #1B1B1B url("chrome://global/skin/media/imagedoc-darknoise.png") repeat fixed;
> color: #b2b2b2 !important; } }
>
> #root { background: #303030 !important; color: #b2b2b2 !important; }
answered Nov 23 '17 at 19:06
Szemes ErikSzemes Erik
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Super User!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f1235975%2fchange-firefox-new-tab-background%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown