Support Forum

night mode?

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

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!

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.

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.

Add code to the userContent.css file.
*http://kb.mozillazine.org/userContent.css
The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the user profile folder.
*http://kb.mozillazine.org/Editing_configuration
I had a hard time with th link colors, so I changed them a bit:
<pre><nowiki>*{background:black!important;color:lightgrey!important}
:link,:link *{color:#88f!important}
:visited,:visited *{color:#8f8!important}
</nowiki></pre>
----
<pre><nowiki>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)})()
</nowiki></pre>