Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

night mode?

  • 2
  • 8
  • 8 views
  • Nzaghachi ikpeazụ nke cor-el

more options

Is it possible to default firefox to the "night mode" -- i.e. black background and white/gray text?

If I manually set the background color to be black and the foreground color to be white, it often messes up webpages (e.g. new york times). I managed to achieve on a webpage-by-webpage basis using the following bookmarklet

javascript:(function(){N=document.createElement('link');S='*{background:black%20!important;color:lightgrey%20!important}:link,:link%20*{color:#ddddff%20!important}:visited,:visited%20*{color:#ddffdd%20!important}';N.rel='stylesheet';N.href='data:text/css,'+escape(S);document.getElementsByTagName('head')[0].appendChild(N)})()

but I need to redo this on every new page (e.g. if an article gets splitted into multiple pages). I would be great to be able to set this by default.

THANKS!

Is it possible to default firefox to the "night mode" -- i.e. black background and white/gray text? If I manually set the background color to be black and the foreground color to be white, it often messes up webpages (e.g. new york times). I managed to achieve on a webpage-by-webpage basis using the following bookmarklet javascript:(function(){N=document.createElement('link');S='*{background:black%20!important;color:lightgrey%20!important}:link,:link%20*{color:#ddddff%20!important}:visited,:visited%20*{color:#ddffdd%20!important}';N.rel='stylesheet';N.href='data:text/css,'+escape(S);document.getElementsByTagName('head')[0].appendChild(N)})() but I need to redo this on every new page (e.g. if an article gets splitted into multiple pages). I would be great to be able to set this by default. THANKS!

All Replies (2)

more options

You can create default style rules for web pages by saving them in a new file named userContent.css or by creating a rule using the Stylish extension. Stylish is a bit easier to use for development because you do not have to restart Firefox to see the change. On the other hand, if you don't plan to write any other rules, userContent.css involves less overhead.

https://addons.mozilla.org/en-US/firefox/addon/stylish/

For tips on userContent.css, try searching for past threads here.

more options

Add code to the userContent.css file.

The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the user profile folder.

I had a hard time with th link colors, so I changed them a bit:

*{background:black!important;color:lightgrey!important}
:link,:link *{color:#88f!important}
:visited,:visited *{color:#8f8!important}

javascript:(function(){N=document.createElement('link');S='*{background:black!important;color:lightgrey!important}:link,:link *{color:#88f!important}:visited,:visited *{color:#8f8!important}';N.rel='stylesheet';N.href='data:text/css,'+escape(S);document.head.appendChild(N)})()