Post Reply 
Website Background Color – Any reliable method to change it? [SOLVED]
Feb. 01, 2016, 09:53 PM (This post was last modified: Feb. 02, 2016 05:26 PM by Faxopita.)
Post: #1
Website Background Color – Any reliable method to change it? [SOLVED]
Any Userscript to help me solve this? Basically, I would like to swap the white background color found on most websites for something like gray. I'd be extremely thankful to our Greasemonkey specialist Cattleyavns if he could offer us a good solution as well.

I tried the following solution taken from here, but unfortunately with no effect for most of the websites I visit:
Code:
FILTER: GM_function
s@(^[^;]*?(?:<head[^>]*?>|<body[^>]*?>|<script[^>]*?>[^>]*?</script>))@<script src="https://greasyfork.org/en/scripts/9320-gm-function/code.user.js"></script>\n$1@i

FILTER: WebsiteBackground
s@(^[^;]*?(?:<head[^>]*?>|<body[^>]*?>|<script[^>]*?>[^>]*?</script>))@<script>\n\
(function () {\n\
    'use strict';\n\
    document.addEventListener('DOMContentLoaded', function (e) {\n\
    if (window.getComputedStyle(document.body, null).getPropertyValue("background-color") == "rgb(255, 255, 255)") {\n\
        console.log("Setting new background color...");\n\
        document.body.setAttribute("style", "background-color: \#98AFC7;");\n\
    }\n\
    });\n\
})()\n\
</script>\n$1@i

For example, the above script works fine for a site like MakeUseOf and only partially on a site like this one. Also, for some websites, change is only effective on the border zone.

I also visited this Userscript page, but again with nil result…
Add Thank You Quote this message in a reply
Feb. 02, 2016, 01:22 PM (This post was last modified: Feb. 02, 2016 01:23 PM by kik0s.)
Post: #2
RE: Website Background Color – Any reliable method to change it?
what ablit that one: https://greasyfork.org/en/scripts/2054-c...ound-color
and this one: https://greasyfork.org/en/scripts/15604-...html-pages

maybe the last one will help but needs a bit of modification?!
Add Thank You Quote this message in a reply
[-] The following 1 user says Thank You to kik0s for this post:
Faxopita
Feb. 02, 2016, 03:13 PM (This post was last modified: Feb. 02, 2016 03:18 PM by Faxopita.)
Post: #3
RE: Website Background Color – Any reliable method to change it?
I tried those scripts and nothing. So much energy into developing them and yet, none of them work. What a waste of time for those developers. I guess it's for the pleasure of coding. I'm amazed at how difficult it is to detect white areas and turn them into a color of our choice. In ideal world, it shouldn't be difficult. Unfortunately, I'm not skilled enough to do that. It's also a shame there's no built-in “dark” mode in today's browsers to keep our eyes safe in the night.
Add Thank You Quote this message in a reply
Feb. 02, 2016, 03:32 PM
Post: #4
RE: Website Background Color – Any reliable method to change it?
https://greasyfork.org/en/scripts/15675-...œé—´æ¨¡å¼

but i guess you should maybe reupload and renane it. it has some chinese (?!) figures in it. i cant test it right cause i am not at home Smile!
Add Thank You Quote this message in a reply
[-] The following 1 user says Thank You to kik0s for this post:
Faxopita
Feb. 02, 2016, 03:58 PM
Post: #5
RE: Website Background Color – Any reliable method to change it?
(Feb. 02, 2016 03:32 PM)kik0s Wrote:  https://greasyfork.org/en/scripts/15675-...œé—´æ¨¡å¼

Well, this link you provided works handsomely. Super thanks.
Add Thank You Quote this message in a reply
[-] The following 1 user says Thank You to Faxopita for this post:
kik0s
Feb. 02, 2016, 04:19 PM
Post: #6
RE: Website Background Color – Any reliable method to change it?
just tested it. yep. thats actually swesome Big Teeth
Add Thank You Quote this message in a reply
Feb. 02, 2016, 05:25 PM
Post: #7
RE: Website Background Color – Any reliable method to change it?
I use the Solarized palette. Here's my config then (taken from guohua zhong):
Code:
FILTER: DarkMode

s@(^[^;]*?(?:<head[^>]*?>|<body[^>]*?>|<script[^>]*?>[^>]*?</script>))@<script>\n\
(function () {\n\
    'use strict';\n\
    document.addEventListener('DOMContentLoaded', function (e) {\n\
    GM_addStyle('html * {background: transparent !important; color: \#819090 !important;} a:link {color: \#FCF4DC !important;} a:visited {color: yellow !important;} a:hover {color: \#A57706 !important;}');\n\
GM_addStyle('html body {background: \#0A2933 !important;}');\n\
    });\n\
})()\n\
</script>\n$1@i

Thanks again for your support.
Add Thank You Quote this message in a reply
[-] The following 1 user says Thank You to Faxopita for this post:
kik0s
Feb. 02, 2016, 05:28 PM (This post was last modified: Feb. 02, 2016 05:35 PM by cattleyavns.)
Post: #8
RE: Website Background Color – Any reliable method to change it?
I have a filter like that, but it change only white background to tan background instead of gray or black, I name it "savemyeyes":

Screenshot: http://prntscr.com/9y559s

Code:
FILTER: savemyeyes
s@(^[^;]*?(?:<head[^>]*?>|<body[^>]*?>|<script[^>]*?>[^>]*?</script>))@\n<script>\n\
window.addEventListener("load", Greasemonkey_main, false);\n\
function Greasemonkey_main ()\n\
{\n\
    function getRGBColor(node, prop) {\n\
        var rgb = getComputedStyle(node, null).getPropertyValue(prop);\n\
        var r, g, b;\n\
        if (/rgb\\((\\d+),\\s(\\d+),\\s(\\d+)\\)/.exec(rgb)) {\n\
            r = parseInt(RegExp.\$1, 10);\n\
            g = parseInt(RegExp.\$2, 10);\n\
            b = parseInt(RegExp.\$3, 10);\n\
            return [r / 255, g / 255, b / 255];\n\
        }\n\
        return rgb;\n\
    }\n\
    R(document.documentElement);\n\
window.setInterval(function()\n\
{\n\
    R(document.documentElement);\n\
}, 20000);\n\
\n\
    function R(n) {\n\
        var i, x, color;\n\
        if (n.nodeType == Node.ELEMENT_NODE && n.tagName.toLowerCase() != "input" && n.tagName.toLowerCase() != "select" && n.tagName.toLowerCase != "textarea") {\n\
            for (i = 0; x = n.childNodes[i]; ++i) R(x);\n\
            color = getRGBColor(n, "background-color");\n\
            if ((typeof(color) != "string" && color[0] + color[1] + color[2] >= 2.8) || (n == document.documentElement && color == "transparent")) {\n\
                n.style.backgroundColor = "\#CCCCCC"; /*Moz 1.0*/\n\
                n.style.setProperty("background-color", "tan", "important"); /*Moz 1.4 after zap colors*/\n\
            }\n\
        }\n\
    }\n\
}\n\
</script>\n$1@i

Another version (not as good as the above version, use a transparent and black div instead try to analyze webpage and change white color to tan):

Code:
FILTER: savemyeyes2
s@(^[^;]*?(?:<head[^>]*?>|<body[^>]*?>|<script[^>]*?>[^>]*?</script>))@\n\
<div id="overlay" style="opacity: 0.4; display: block; pointer-events: none;background: none repeat scroll 0% 0% rgb(0, 0, 0);position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index:99999999;"></div>\n\
$1@i

Screenshot: Sorry because I don't have screenshot of this version.
Add Thank You Quote this message in a reply
[-] The following 2 users say Thank You to cattleyavns for this post:
kik0s, Faxopita
Feb. 02, 2016, 05:34 PM
Post: #9
RE: Website Background Color – Any reliable method to change it? [SOLVED]
going to test this one later. it seems more intelligent Smile!
Add Thank You Quote this message in a reply
Feb. 03, 2016, 11:48 AM (This post was last modified: Feb. 03, 2016 05:07 PM by Faxopita.)
Post: #10
RE: Website Background Color – Any reliable method to change it? [SOLVED]
(Feb. 02, 2016 05:28 PM)cattleyavns Wrote:  I have a filter like that, but it change only white background to tan background instead of gray or black, I name it "savemyeyes"

I like both of them. Now, I have the choice. Thanks again for sharing your scripts.

Edit: In the end, I chose the first script offered by Cattleyavns, because it does not cause the minor glitches that result from the use of guohua zhong's script, which are the overzealous use of transparency; for example, website menus or ribbon bars could end up transparent… The tan color seems to be well suited for a vast majority of websites. So, this script is a Thumbs Up!
Add Thank You Quote this message in a reply
Post Reply 


Forum Jump: