15

I use to browse web in a dark room and would prefer if the backgrounds would be dark and text would be light instead of the opposite which is much more common. I suppose this can be achieved with some custom CSS or JS code applied but am not a web coder and am not sure about how to do this (especially to be applicable to all the web sites). Even more awesome it would be if there were an extension to install and get just the effect needed.

Any suggestions?

1

6 Answers 6

19

In WebKit based browsers, you can add the following style to achieve color inversion:

html { -webkit-filter: invert(); }

enter image description here

Sadly, we're currently waiting for the implementation in Firefox: https://developer.mozilla.org/en-US/docs/CSS/filter#Browser_compatibility

An equivalent in Firefox would look like:

html {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix type=\'matrix\' values=\'-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0\'/></filter></svg>#invert");
}

The results aren't anywhere near as nice though:

enter image description here

Bonus

Here's the bookmarklet for WebKit (requires jQuery to be loaded):

javascript:$("html").css("-webkit-filter","invert()")
1
  • In my case, the borders of the website is not inverted. Link. I guess I need to invert another tag as well, not just html. What should I do to invert borders as well?
    – Utku
    May 20, 2016 at 21:29
6

Make a bookmarklet with the following URL:

javascript:void(document.getElementsByTagName('html')[0].style.webkitFilter='invert()');
1
  • I took this idea and cranked it up a little (I'd never heard of bookmarklets before and wanted to play a bit...) Anyways, this worked pretty nicely for me in firefox: (in the bookmark uri): javascript:void(function(){ invert = 90; contrast = 120; brightness = 105; style=document.getElementsByTagName('html')[0].style; if (style.filter == '') { style.filter = `invert(${invert}%) contrast(${contrast}%) brightness(${brightness}%)`; } else { style.filter = ''; } }()); May 1, 2020 at 19:17
2

Try this .. Tools> Options> Click Contents tab then Click on Colors Button. Now Untick "Allow pages blah blah...." check box. Now select white color for text and black color for bacground. Hope it helps. I did it on ver24.0.

1

(Edit: Just realized the bookmarklet doesn't work in Firefox, because Mozilla decided not to support Invert. But there's a jQuery link on the page that will do the same thing.) You could use the bookmarklet on this page: http://lea.verou.me/2011/04/invert-a-whole-webpage-with-css-only/

Operating system? I have an app on my Mac, Nocturne, it inverts colors across the board. Similar to just pressing ctrl-option-cmd-F8. I don't know of a way to do it on Windows. Nocturne is a little nicer as it tweaks the colors, doesn't just invert them, to make viewing a little nicer at night or in dim lighting. Advantage here is that everything, not just Firefox pages, get switched, and you don't have to keep re-applying it every time you load a new page.

0

Check this Add-on if it's useful for you.

It has some more good options. here is a screenshot>>>

enter image description here

0

Inspired by @DerHochstapler answer, this is an update non dependant on jQuery that will work also with FFox.
You can copy the following code in Bookmarkleter and create a bookmarklet.

// this check is made to make sure CSS class declaration is injected only once per page
if(!document.getElementById('pageInvertedColors')) {
    // this HTML inject trick is inspired by 
    // https://css-tricks.com/snippets/javascript/inject-html-from-a-string-of-html/
    document.body.innerHTML += `
    <style id='pageInvertedColors'>
        .pageInvertedColorsToggle { filter: invert() }
    </style>`;
};

// FireFox does not invert the page background color if no color is set 
if (!document.querySelector('html').style.backgroundColor) {
    document.querySelector('html').style.backgroundColor = '#fff';
}

document.querySelector('html').classList.toggle('pageInvertedColorsToggle');

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .