Need help trying to "automatically" change colors on a website with UserScript

Question

I'm trying to replace all colors I set with a different set of colors, right now I have it console.log'ing all the colors of the elements in the page my UserScript loads on so I know that it's getting the colors correctly, but for some reason it isn't changing the colors!

Help figuring out how to change the colors without having to get the class name of each individual element and manually changing it would be greatly appreciated, thanks!

(And I know I'm "connecting to the website" correctly, I started off manually changing the elements colors before I decided this would be a lot easier)

// ==UserScript==
// @name         My Name Here
// @namespace    http://tampermonkey.net/
// @version      1
// @description  My Description
// @author       iLordOfAviation
// @match        Website I want to change
// @grant        none
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==
/' jshint -W097 '/
'use strict';
$(document).ready(function() {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
        var element = all[i];
        console.log($(element).css('color'));
        if ($(element).css('color') === 'rgb(32, 50, 67)') {
            $(element).css('color', 'rgb(33, 33, 33)')
        } else {
            if ($(element).css('color') === 'rgb(238, 244, 247)') {
                $(element).css('color', 'rgb(250, 250, 250)')
            } else {
                if ($(element).css('color') === 'rgb(65, 99, 118)') {
                    $(element).css('color', 'rgb(211, 47, 47)')
                } else {
                    if ($(element).css('color') === 'rgb(134, 189, 219)') {
                        $(element).css('color', 'rgb(211, 47, 47)')
                    }
                }
            }
        }
    }
});

rgb(32, 50, 67)
rgb(33, 33, 33)
rgb(88, 134, 160)
rgb(33, 33, 33)
rgb(65, 99, 118)
rgb(211, 47, 47)
rgb(255, 255, 255)
rgb(116, 153, 189)
rgb(33, 33, 33)
rgb(32, 50, 67)
rgb(33, 33, 33)
rgb(32, 50, 67)

^ Console example, this is just a few, there's hundreds or thousands of elements it's printing for

give an example of **exactly** what's logged to the console - because your code *"should work™"* — Jaromanda X, Jul 30 '18 at 05:42
hint: to avoid nasty indentation like that, `} else { if ... {}}` => `} else if { ...}` — Jaromanda X, Jul 30 '18 at 05:47
show some HTML you think this should work on ... see this [simplified version so colors are obvious](https://jsfiddle.net/dhj1ysa5/) — Jaromanda X, Jul 30 '18 at 05:48
*oh* I found out it's because I was looking at something I was expecting to change the background-color of when I was telling it to check color... I guess I should make it check for both background-color and color — ilord ofaviation, Jul 30 '18 at 05:53
This is a very painful, brittle, and CPU intensive way to try to change colors! **The smart thing to do is to override, or create, CSS styles.** See https://stackoverflow.com/questions/19385698/how-to-change-a-class-css-with-a-greasemonkey-tampermonkey-script. — Brock Adams, Jul 30 '18 at 07:43

graphemecluster · Answer 1 · 2018-07-30T07:35:19.383

Warning: this code runs $(element).css('color') many times and it is slow. You can write like this: (for both background color and color)

function changeColor(index, old) {
    if (old === 'rgb(32, 50, 67)') return 'rgb(33, 33, 33)';
    if (old === 'rgb(238, 244, 247)') return 'rgb(250, 250, 250)';
    // ...
}
$(element).css('color', changeColor);
$(element).css('background-color', changeColor);

If you have plenty of colors, though, I suggest you store in an array like:

var colors = [
    [[32, 50, 67], [33, 33, 33]],
    [[238, 244, 247], [250, 250, 250]]
];
colors = colors.map(function(arr) {
    return ['rgb(' + arr[0].join(', ') + ')', 'rgb(' + arr[1].join(', ') + ')'];
});
function changeColor(index, old) {
    return (colors.find(function(arr) {
        return arr[0] === old;
    }) || ['', old])[1];
}

Edit: Actually you can just write $('*') to select all the elements and change it once like $('*').css('color', changeColor).css('background-color', changeColor);. Seems like $('*').css({color: changeColor, backgroundColor: changeColor}); works too but I'm not sure.

Need help trying to "automatically" change colors on a website with UserScript

1 Answers1