How can I over-ride website themes to surf with a 'dark' theme

Question

e.g. black background, grey text. surely there must be a firefox extension for this?

Answer 1

Stylish is what you're looking for. There is a collection of pre-made styles at UserStyles.

Answer 2

You can change the default text and background colors in Firefox's preferences (the Content tab, then the Colors button). If you uncheck the checkbox in the Colors dialog, it will force these colors onto websites that define their own colors.

For specific websites (Gmail, for example) you can install the Greasemonkey extension which can dynamically change things like the colors on the page—given that you have a script written for that particular website.

Answer 3

You could turn down the brightness on your monitor :)

Answer 4

This works for me.

javascript:(function(){var newSS, styles='* { background: #1A2424 ! important; 
color: cyan !important } :link, :link * { color: #66FF99 !important } 
:visited, :visited * { color: #9966CC !important }'; 
if( document.createStyleSheet) { 
document.createStyleSheet(%22javascript:'%22+styles+%22'%22); } else { 
newSS=document.createElement('link'); newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles); 
document.getElementsByTagName(%22head%22)[0].appendChild(newSS); } })();

(Formatted to remove horizontal scrolling. You can format to have it all on the one line.)

From Custom client-side CSS to change background colours at Ask.MeFi.

Answer 5

A better option than stylish is Blank Your Monitor It lets you switch between modes via a hotkey and it works better across more sites.

Answer 6

I made a stylish script that i sometimes use at night when white backgrounds are too dark. see if you like it.

@namespace url(http://www.w3.org/1999/xhtml);
*{  background:#000000 !important; 
    color:#CCCCCC !important;}
a {color:#FFCC66 !important;}
a:hover {   color:#FFFFCC !important;}
a:visited { color:#FFB720 !important;}