Hey Antonio,
I will try to give you a direction:
This is your code:
<script>
var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
if(obj.slug == "frontpage"){
var ix = getRandomInt(0, colors.length);
var color = colors[ix];
jQuery('body').css('background-color', color);
}
});
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// Returns a random integer between min (included) and max (excluded)
// Using Math.round() will give you a non-uniform distribution!
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
</script>
I would create a second array of colours which have exactly the inverted colours.
To demonstrate I reduced your array of colours to two colours. You can keep your array with the many values.
var colors = ['black', 'white'];
var colors_invert = ['white', 'black']
And then I would make a new variable which gets exactly the same random number like your color variable.
var color = colors[ix];
var color_invert = colors_invert[ix];
Then I would assign that new variable to another object
jQuery('body').css('background-color', color);
jQuery('object').css('color', color_invert);
In total it will look like this:
<script>
var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
var colors_invert = [HERE YOU HAVE THE INVERT VALUES IN THE SAME ORDER LIKE ABOVE]
Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){
if(obj.slug == "frontpage"){
var ix = getRandomInt(0, colors.length);
var color = colors[ix];
var color_invert = color_invert[ix];
jQuery('body').css('background-color', color);
jQuery('NEW_OBJECT').css('color', colors_invert);
}
});
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// Returns a random integer between min (included) and max (excluded)
// Using Math.round() will give you a non-uniform distribution!
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
</script>
I hope that helped :-)
All the best!
Marius