Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

On Youtube, there is this nice button (easy to overlook - top left of the video) which lets one "turn off the lights": the site background changes from white to black, the text color changes from black to grey. There is an unrelated plug-in for Firefox called "Turned Off The Lights", which has a very similar functionality.

This makes websites so much easier to read. However, both technologies only work on YouTube. Is there anything to achive the same effect for all websites? Preferably with Firefox?

I.e.: I want to have very dark background and light text color on all websites viewed with Firefox, how can I do that?

share|improve this question
    
This makes websites so much easier to read is placebo. Black on white has a higher contrast than grey on black which makes black on white easier to read. If you have issues reading black on white then that is because the back light, brightness or contrast settings of your monitor or OS are incorrectly configured. Purely inverted colors could work, though... –  Tom Wijsman Mar 31 '12 at 15:44
add comment

3 Answers

This user script will invert colors for selected websites. To invert colors on all websites, you would simply add * to the // @include list. I've just tested it, and it'll work fine for most sites, however sites that rely heavily on background images may not work so well. The script can be set to exclude those sites.

If you don't know what user scripts are, then you need a primer.

share|improve this answer
add comment

The Turn Off the Lights browser (Chrome, Safari, Opera, IE) extension supports all websites (video or no video). With one click it makes the page dark and there is an option to change the opacity (to 100% or less)

A bonus, I read there is an option for "Eye Protection" that it will automatically turn the lights off at a chosen time (example when it's night).

If you need a new feature just report it on their code project page.

share|improve this answer
add comment

User style sheets.
CSS means cascading style sheets. The 'cascade' is the order in which they are applied.

All web presentation (shapes colors fonts, positioning, layout) is supposed to be handled by stylesheets now, although some websites may still use HTML styling, it is a big no-no for best practices, and deprecated.

At the top is external style sheets, which may be linked by any page on the server. The next down is embedded stylesheets (at the top above the HTML in the page document normally), then inline stylsheets (so you can have a sitewide stylsheet, overrule certain things for a particular page with embedded styles or have multiple external stylesheets linked above the HTML (lower ones (on lower lines) overrule higher ones) and then override particular things on an element with an inline style, perhaps if you want to make ONE paragraph on the site bright red, bold and floating over the scroll activity.

User stylesheets as part of the accessibility standards come last and overrule all else, if you want all your text to be size 36 or all backgrounds to be black and text to be grey, eg.

I've never done this, but I guess you just add CSS for backgrounds and restart the browser.

body { background-color:#b0c4de; }

Is a CSS tag for background color (black is eiether ffffff or 000000, i forget). An external stylesheet has no headers, just tags.

example 1 (qualtrics), example 2 (w3schools)

So yours would look something like:

body p h1 h2 { background-color: 000000; }
p h1 h2 a { text-color: 818181; }
share|improve this answer
    
Could you do a little more explanation instead of making the link do all the talking? –  MBraedley Mar 31 '12 at 12:18
    
One moment ..... –  conspiritech Mar 31 '12 at 12:24
    
also added example code there at the end –  conspiritech Mar 31 '12 at 12:40
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.