Safari 15 Header Color

Safari 15, shipped with macOS Monterey, enables changing the color of the browser chrome (if you’re not using Safari 15 on Monterey, see this Youtube video).

Here is the code for this page:

<html><head>

	<meta id="themeColor" name="theme-color" content="">

</head><body><script>

	var delay = 50;
	var increment = 5;
	var current = 0 - increment;

	function setHeaderColor(){

		current += increment;
		if (current > 360) current = 0;

		var colorStr = 'hsl('+current+',100%,50%)';
		themeColor.content = colorStr;
		textBlock.style.color = colorStr;
	}

	setInterval(setHeaderColor, delay);

</script><pre id="textBlock" style="font-size:30px;">

  Needs Safari 15

</pre></body></html>

Stack Overflow question.

Leave a Reply

Your email address will not be published. Required fields are marked *