I was having a hard time coming up with a color scheme that I liked. Sasha helped me settle on this green. But I’m still not 100% about it. So I wrote some JavaScript that I inserted into the page, with a WordPress plugin called Header, Footer and Injections, that changes the color, and also generates an inverse color, and then applies them to the appropriate areas in the page with a generated style tag. You can use it yourself by clicking the footer at the bottom of the page. It works well enough in some areas, but, isn’t 100%. Color generating code is from this post on StackOverflow. The hex inversion code is too, but I can’t find that page in my history for some reason. I may have searched in an incognito window while testing.

<script type="text/javascript">
let eleFooter = document.getElementsByClassName("site-footer")[0];

function getColorCode() {
  var makeColorCode = '0123456789ABCDEF';
  var code = '#';
  for (var count = 0; count < 6; count++) {
     code = code + makeColorCode[Math.floor(Math.random() * 16)];
  }
  return code;
}

function ChangeSiteColors() {
  // Get random color
  randColor = getColorCode();
  // get inverse color
  inverseColor = inv(randColor);
  // apply to various places
  let newInnerHTML = `a {
		color: ${inverseColor};
	}

	header.site-header {
		background: ${randColor};
	}

	h2.site-description {
		color: ${inverseColor};
	}

	main article header a:link, main article header a:visited {
		color: ${randColor};
	}

	ul#menu-mainmenu {
		color: ${inverseColor};
	}

	ul#menu-mainmenu li:before {
		color: ${inverseColor};
	}

	ul#menu-mainmenu a {
		color: ${inverseColor};
	}

	.widget-title {
		border-bottom-color: ${inverseColor};
	}

	footer.site-footer {
		background: ${randColor};
		color: ${inverseColor};
	}

	footer.site-footer a {
		color: ${inverseColor};
	}

	div.entry-meta span:before {
		color: ${inverseColor};
	}

	#secondary .widget {
		background: ${randColor};
	}

	main article header a:link, main article header a:visited {
		color: ${inverseColor};
	}`;

	if (document.querySelector("#colorchangerscript")) {
		let existingScript = document.querySelector("#colorchangerscript");
		existingScript.innerHTML = newInnerHTML;
	} else {
		let newStyle = document.createElement("style");
		newStyle.id = "colorchangerscript";
		newStyle.innerHTML = newInnerHTML;
		document.body.appendChild(newStyle);
	}
}

const inv = (hex) => '#' + hex.match(/[a-f0-9]{2}/ig).map(e => (255 - parseInt(e, 16) | 0).toString(16).replace(/^([a-f0-9])$/, '0$1')).join('');

eleFooter.addEventListener("click", ChangeSiteColors);
</script>