I would like to add code in to detect if the portfolio and showcase background image is light or dark to change the hero title, magic cursors and burger menu colour to be seen better.

So if the hero is dark then white is used for the hero title, magic cursors and burger menu. 

If the hero is a light colour then the hero title, magic cursors and burger menu  will be black.

Which file would need to be edited to achieve this?

Thanks for your reply.

This is what I had in mind, the below links are automatically detecting the image colour brightness and is adjusting the various elements accordingly. 

• Jquery Check BG Colour 
• Image Brightness

Is this possible to add? and would it be the same functions as mentioned before?

In firstLoad() i added

        function getImageLightness(imageSrc,callback) {
            var img = document.createElement("img");
            img.src = imageSrc;
            img.style.display = "none";
            document.body.appendChild(img);
            var colorSum = 0;
            img.onload = function() {
                // create canvas
                var canvas = document.createElement("canvas");
                canvas.width = this.width;
                canvas.height = this.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(this,0,0);
                var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
                var data = imageData.data;
                var r,g,b,avg;
                for(var x = 0, len = data.length; x < len; x+=4) {
                    r = data[x];
                    g = data[x+1];
                    b = data[x+2];
                    avg = Math.floor((r+g+b)/3);
                    colorSum += avg;
                }
                //brightness will be between 0 (Dark) - 255 (Light)
                var brightness = Math.floor(colorSum / (this.width*this.height));
                callback(brightness);
            }
        }
$('.section-image').each(function() {
            var image = $(this).data('src');    
            $(this).css({'background-image': 'url(' + image + ')'});
            getImageLightness( image ,function(brightness){
                if(brightness < 127.5){
                    console.log('Img is Dark ' + brightness);
                    $('#magic-cursor').addClass('light-content');
                    $('.title').css('color', 'white');
                }else{
                    console.log('Img is Light ' + brightness);
                    $('.title').css('color', 'black');
                }
            });
        });

My aim is to get the logo, magic cursor and the burger menu to switch colours based on the image below it's brightness.