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>
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";
}
}
})();
Wow sorry this comment editor removes all the text formatting upon sending, it was not my intention to send you this chaos. Try this instead:
https://pastebin.com/6U2ws146