Question

Is there any way to invert every color set within a parent div or will I just need to build a new style sheet for it?

Thanks!

Answer 1

By “every color set within a parent div“, I assume that child nodes are wanted too. Also that both foreground and background colors are to be switched (with border colors an easy mod).

See the live demo at jsFiddle.

Invert all colors like:

var Container   = $("#Container");
invertElementColors (Container);

//--- Now invert all children.
Container.find ('*'). each (function () {
    invertElementColors ( $(this) );
} );

Given:

function invertElementColors (jNode) {
    jNode.css ( {
        'color' :               function (J, oldColor) {
            return invertRGB_ColorStr (oldColor);
        },
        'background-color' :    function (J, oldColor) {
            return invertRGB_ColorStr (oldColor);
        }
        //--- Add other color properties, like border, as desired.
    } );
}

function invertRGB_ColorStr (oldColorStr) {
    //--- Special case
    if (oldColorStr == 'transparent')   oldColorStr = 'rgb(255, 255, 255)';

    //--- Color is text in RGB format.  EG: rgb(1, 22, 255)
    var colorArray  = oldColorStr.match (/\((\d+),\s?(\d+),\s?(\d+)\)/);

    var newColorStr = $.map (colorArray, function (byte, J) {
                            if (!J) return null;

                            //--- Invert a decimal byte.
                            return Math.abs (255 - parseInt (byte) );
                        }
                    ).join (',');

    return 'rgb(' + newColorStr + ')';
}