Custom client-side CSS to change background colours.

January 15, 2008 3:38 PM

CSS, greasemonkey, sunglasses? Is there a way to stop white web pages hurting my eyes (firefox, osx).

Even on the lowest brightness setting, I find, of an evening, that white-backgrounded web pages are too bright on my macbook. I suspect there's some way for me to have a local CSS file or something that I can turn on and off at will, to just swap white backgrounds for a more muted grey. Or something. Everything I see on google seems to be about blogs, but I want this on the client side. I suppose there could also be a greasemonkey way to do this, but greasemonkey scares me more than CSS. Corey Hart scares me more than both.

So, in question form: what is the simplest way to have a switchable setting to darken white backgrounds? (and/or: is there a good client-side CSS tutorial site which could teach me to work this out myself?)

posted by pompomtom to Computers & Internet (14 answers total)

If you don't want to mess around with css or Greasemonkey you might like to try a program like Nocturne which simply inverts the colours on your screen making it much nicer to look at under certain conditions.
posted by sveskemus at 3:44 PM on January 15, 2008

one approach for this on OS X is Ctrl+Alt+Apple+8. pressing all those keys at once throws the color scheme to the "negative," which will usually switch white backgrounds to black, then with white text.

i just wish there were a way to do this on the PC at work. grrr.
posted by garfy3 at 3:47 PM on January 15, 2008

@garfy3 there is hit alt-shift-print screen if what we are thinking of is the same thing
posted by DJWeezy at 4:13 PM on January 15, 2008 [1 favorite]

Another "not exactly helpful" solution is rgGamma. It's for using your Mac whenever night vision is critical. It shifts the screen gamma so everything turns monochrome red-black (or green-black or your-choice-black). I use it when hacking in the dark.

As for changing it via javascript: I'm guessing this shouldn't be to hard with a javascript bookmarklet. I don't think you'd need grease monkey at all though it has been many years since I used my Javascript fu for good (or evil).
posted by chairface at 4:16 PM on January 15, 2008

This bookmarklet will (sometimes) work. Doesn't work on mefi though.

Make Blue

Drag it to your toolbar and click. It should at least get you started.
posted by chairface at 4:39 PM on January 15, 2008

What you are looking for, I think, is accessibar. It does a ton of things like this, primarily for people with low vision who need high contrast stuff. I *think* you can make it so the only stuff that changes is the BG color, but you can mess with all the fonts through a series of pulldown menus. Easy peasy. Here's a screenshot of the AskMe simple style changed to a grey background. This will, imo, only do it per-site so if you're looking for something that changed all examples of white to grey, this will not help.
posted by jessamyn at 4:41 PM on January 15, 2008

By all means don't do the ALT+SHIFT+PRINTSCREEN thing....completely messed up my MSN Messenger and I couldn't revert it without a restart :P
posted by DMan at 4:49 PM on January 15, 2008

The Stylish Firefox add on will let you do this by site, although not to every white backgrounded site.
posted by MadamM at 5:04 PM on January 15, 2008

If you don't mind switching browsers, Opera does pretty much exactly what you want. There is an option under the View\Style menu which allows you to force one of a series of predefined CSS style sheets upon any unsuspecting website, including two "High Contrast" modes (black on white and white on black) and an "Accessibility Layout" which displays contents in a pleasing black on green colour combination.

I think you can also define your own style sheets, but I haven't played with it that much. If you're not totally tied to Firefox, I would recommend giving Opera a try, in any case - it really is a magnificent browser.
posted by doctorpiorno at 6:47 PM on January 15, 2008

you can make your own custom stylesheet, call it userContent.css and drop it in the chrome directory (~/Library/Application Support/Firefox/Profiles/<randomstring>.default/chrome/) and it should be used for every site you visit... there's a sample there already called userContent-example.css... I thought there was a way of just selecting a custom stylesheet in the UI (or at least the about:config interface) but I appear to be wrong about that...
posted by russm at 10:07 PM on January 15, 2008

or alternatively, make a bookmark where the URL is

javascript:var%20a=document.getElementsByTagName('body');a[0].style.background='black'

and use that to blackify the backgrounds of your pages as needed...

hmmm... works in Safari, but in FF it blacks the background then sets the page content to the text "black"... hitting the back button takes you back to the blackified page though... there's probably a way of fixing that...
posted by russm at 10:14 PM on January 15, 2008

Best answer: try this bookmarklet:

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); } })();
posted by T.D. Strange at 10:36 PM on January 15, 2008 [3 favorites]

Obvious point, but try to make your room bright so your pupils don't dilate much.
posted by TheophileEscargot at 10:57 PM on January 15, 2008

or you could get an older laptop where the backlight has faded with the years... I've got a dim-screened 15" G4 that I'd be willing to part with... :)
posted by russm at 12:02 AM on January 16, 2008