Comments on: Custom client-side CSS to change background colours.

Question: Custom client-side CSS to change background colours.

pompomtom — Tue, 15 Jan 2008 15:38:44 -0800

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?)

By: sveskemus

sveskemus — Tue, 15 Jan 2008 15:44:46 -0800

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.

By: garfy3

garfy3 — Tue, 15 Jan 2008 15:47:27 -0800

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.

By: DJWeezy

DJWeezy — Tue, 15 Jan 2008 16:13:43 -0800

@garfy3 there is hit alt-shift-print screen if what we are thinking of is the same thing

By: chairface

chairface — Tue, 15 Jan 2008 16:16:02 -0800

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).

By: chairface

chairface — Tue, 15 Jan 2008 16:39:26 -0800

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.

By: jessamyn

jessamyn — Tue, 15 Jan 2008 16:41:04 -0800

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.

By: DMan

DMan — Tue, 15 Jan 2008 16:49:59 -0800

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

By: MadamM

MadamM — Tue, 15 Jan 2008 17:04:22 -0800

The Stylish Firefox add on will let you do this by site, although not to every white backgrounded site.

By: doctorpiorno

doctorpiorno — Tue, 15 Jan 2008 18:47:02 -0800

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.

By: russm

russm — Tue, 15 Jan 2008 22:07:21 -0800

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...

By: russm

russm — Tue, 15 Jan 2008 22:14:46 -0800

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...

By: T.D. Strange

T.D. Strange — Tue, 15 Jan 2008 22:36:29 -0800

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); } })();

By: TheophileEscargot

TheophileEscargot — Tue, 15 Jan 2008 22:57:11 -0800

Obvious point, but try to make your room bright so your pupils don't dilate much.

By: russm

russm — Wed, 16 Jan 2008 00:02:29 -0800

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... :)