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.

2 thoughts on “Safari 15 Header Color

  1. Any idea how to do that with a user script to change the header color of a website that is not yours?

    I tried this but it doesn’t seem to do anything:

    // ==UserScript==
    // @name Change theme-color
    // @include *://github.com/*
    // @grant none
    // @run-at document-start
    // ==/UserScript==

    var meta = document.getElementsByTagName(‘meta’);
    var i;
    for (i=0; i<metas.length; i++) {
    if (meta[i].name == "theme-color") {
    meta[i].content = "#1e2327";
    }
    }
    document.getElementsByTagName('body')[0].addEventListener("gesturestart", gestureStart, false);

    (function gestureStart() {
    for (i=0; i<meta.length; i++) {
    if (meta[i].name == "theme-color") {
    meta[i].content = "#ffffff";
    }
    }
    })();

Leave a Reply

Your email address will not be published.