Discussions » Creation Requests

Global Dark Websites

§
Posted: 2017-04-24

Global Dark Websites

Hello Everyone,

Does anyone knows how to write javascript to turn all websites with white background dark? I want to target all white background and dark text over them and reverse their color. White background becomes black and black text becomes white. A good example of global back is "Chrome Global Black" but it failed to keep images and videos original. This is the only style that doesn't breaks any elements on all websites. I want to prevent it from tampering colors of images and videos. Please share your knowledge to help out others.

Thank You

§
Posted: 2017-04-24

There is no global solution. You can try your luck with this CSS code

* {
    background: black !important;
    color: white !important;
}

but most websites will need some tweaks.

It's better to use Stylish. You can find more info here.

§
Posted: 2017-04-25

Yes, there are a few global styles out there that works almost complete but breaks some minor elements. The best global style out there is called "Chrome Global Black" on userstyles.org. It doesn't breaks any elements but it slightly changes colors of images and videos, which I don't like. That is why I'm looking into javascript that can make it happens but I don't know how. I know how to code some css too.

§
Posted: 2017-04-25

Here is a global userscript which turns all websites black but it breaks some elements on many websites. I need it fine tuned though.

[code]
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}

addGlobalStyle('html,body,div { background:#161616 !important; color:#eee !important; }');
addGlobalStyle('a { color:#cbcbcb !important; }');
[/code]

You can use it with Tampermonkey, Violent monkey, or Adguard. I like to use userscript with Adguard because it works with ALL browsers which inject the code at the network level, not browser level. That is why it works with all web browsers out there.

§
Posted: 2017-04-25

"Chrome Global Black" has "Hue rotate filter" option. Change it to "Off" and update the style. I think that's the best you can have.

Post reply

Sign in to post a reply.