Dark Reader mode

[jornmo]

I've recently come across Dark Reader for Chrome, and I must say this is a really good feature that would have been awesome in Qupzilla!

it uses special intellectual way to transform bright blinding stuff into eye relaxing, high contrast, deluminated, dark themed and just smart looking web-pages which are easy to read at night. Use this extension to take care of your eyes.

[jamesqf]

It's possible to do this for most things with a user stylesheet. There are a few things I haven't figured out how to take care of yet - Google Maps being the most notable - but it's fairly easy to switch.

I do wish qupzilla had a way to keep a list of frequently-used stylesheets, though, so I wouldn't have to type the name each time.

[Dax89]

If can be useful, I have created this user defined javascript for my mobile browser, feel free to use it: https://github.com/Dax89/harbour-webpirate/blob/master/harbour-webpirate/qml/js/helpers/NightMode.js

It contains some extra code, but it can be adapted easily! :) I have tested with QtWebKit only, maybe it needs some changes in order to use it with QtWebEngine

It can be converted as CSS as well:

html.__nightmode__ { -webkit-filter: contrast(68%) brightness(108%) invert(); }
html.__nightmode__ iframe { -webkit-filter: invert(); } // Keep iframes normal
html.__nightmode__ object { -webkit-filter: invert(); }" + // Keep Flash items normal
html.__nightmode__ embed { -webkit-filter: invert(); }" +  // Keep Flash items normal (HTML5)
html.__nightmode__ video { -webkit-filter: invert(); }" +  // Keep HTML5 Videos normal
html.__nightmode__ img { -webkit-filter: invert(); }" ;    // Keep images normal

[jornmo]

Stylesheets and inverting colours is a good start, but I think that algorithms to detect darker colours that should not be inverted would be a good addition. Take arstechnica for an example. Simply inverting it would not do any good as it is already black.

[jamesqf]

The arstechnica site seems to work ok with my CSS. I didn't know about it already having a black background, since I've been using various versions of the CSS since... well, just about forever. Pretty much everything shows up as white text on black, and in my preferred font.

But the point of the CSS (as far as I understand it - I'm no expert) is that it doesn't use algorithms to detect colors &c, it DICTATES what will be used. I don't really see how a user could incorporate algorithm-level function into qupzilla? It'd even be helpful to vary the CSS per web site, so I could for instance not turn off background images in Google Maps, where they are the map (I think).

[Dax89]

Color detection and Blacklisting can be done with a user defined Javascript, the CSS should be applied from there too

[jamesqf]

How would you get qupzilla to use a user-defined Javascript? I can select a user CSS from the Preferences->Other menu, but I haven't noticed any equivalent for Javascript. (But then, my Javascript knowledge is pretty much nonexistent.)

[Dax89]

You can enable GreaseMonkey extension from settings and define a new userscript for there

[jornmo]

It would be really nice if there was a preconfigured button (/extension) for this, and not that everyone has to "hack" with CSS and JS to get it to work :)

[GreenLunar]

I have posted a plugin request at https://github.com/QupZilla/qupzilla-plugins/issues/58

I am in favor of such feature as plugin.

I know many people, especially people who are working in offices, who are still using Mozilla browsers just because of ~~a single Reader extension~~ its Reader View.

[ghost]

Yes, really that chromium extension so far works and works beautifully contrary to all the other darkish userstyles I've tried which do not work and are ugly hacks. I wish this work was part of QupZilla itself. Here's its GitHub page: https://github.com/alexanderby/darkreader