Created
October 4, 2023 22:13
-
-
Save Adjective-Object/c5c371693a30b50d7a52ce32ce1428ca to your computer and use it in GitHub Desktop.
Tampermonkey extension for github tab color coding
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name Github tab-dependent icon colour | |
// @namespace http://tampermonkey.net/ | |
// @version 0.1 | |
// @description Recolor the github favicon depending on the page category | |
// @author Maxwell Huang-Hobbs | |
// @match https://github.com/orgs/*/projects/* | |
// @match https://github.com/*/*/pull* | |
// @match https://github.com/*/*/issue* | |
// @icon https://github.githubassets.com/favicons/favicon-dark.png | |
// @grant none | |
// ==/UserScript== | |
window.addEventListener('load', function() { | |
function findPalleteFromUrl() { | |
palettes = [ | |
{ | |
match:["projects"], | |
palette: [ | |
"#FCFF6C", | |
"#FFC43D", | |
"#EF8B34", | |
"#F06449", | |
], | |
}, | |
{ | |
match:["issue", "issues"], | |
palette: [ | |
"#D0E1D4", | |
"#6CA3EF", | |
"#6EB9EB", | |
"#1D6BD7", | |
"#3F84E5", | |
], | |
}, | |
] | |
for (let p of palettes) { | |
for (let k of p.match) { | |
if (window.location.href.match(new RegExp(`/${k}[/?$]`))) { | |
return p.palette | |
} | |
} | |
} | |
return null | |
} | |
var icon = document.querySelector('link[rel="icon"]'); | |
var copy = icon.cloneNode(!0); | |
var stops = [] | |
var mkstop = (color, offset) => `<stop stop-color="${color}" offset="${offset}" />` | |
var start = 0.05 | |
var stop = 0.9 | |
var pal = findPalleteFromUrl() | |
console.log("selected palette", pal) | |
if (pal == null) { | |
return | |
} | |
stops.push(mkstop(pal[0], 0)) | |
stops.push(mkstop(pal[0], start)) | |
var step = (stop-start) / (pal.length - 1) | |
for (let i=1; i<pal.length; i++) { | |
stops.push(mkstop(pal[i], start + i * step)) | |
} | |
var svgRaw = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16 0 0 7.16 0 16C0 23.08 4.58 29.06 10.94 31.18C11.74 31.32 12.04 30.84 12.04 30.42C12.04 30.04 12.02 28.78 12.02 27.44C8 28.18 6.96 26.46 6.64 25.56C6.46 25.1 5.68 23.68 5 23.3C4.44 23 3.64 22.26 4.98 22.24C6.24 22.22 7.14 23.4 7.44 23.88C8.88 26.3 11.18 25.62 12.1 25.2C12.24 24.16 12.66 23.46 13.12 23.06C9.56 22.66 5.84 21.28 5.84 15.16C5.84 13.42 6.46 11.98 7.48 10.86C7.32 10.46 6.76 8.82 7.64 6.62C7.64 6.62 8.98 6.2 12.04 8.26C13.32 7.9 14.68 7.72 16.04 7.72C17.4 7.72 18.76 7.9 20.04 8.26C23.1 6.18 24.44 6.62 24.44 6.62C25.32 8.82 24.76 10.46 24.6 10.86C25.62 11.98 26.24 13.4 26.24 15.16C26.24 21.3 22.5 22.66 18.94 23.06C19.52 23.56 20.02 24.52 20.02 26.02C20.02 28.16 20 29.88 20 30.42C20 30.84 20.3 31.34 21.1 31.18C27.42 29.06 32 23.06 32 16C32 7.16 24.84 0 16 0V0Z" fill="url(#grad)"/> | |
<radialGradient id="grad" r="150%" cx="30%" cy="107%"> | |
${stops.join("\n ")} | |
</radialGradient> | |
</svg>` | |
console.log(svgRaw) | |
copy.href = "data:image/svg+xml;base64," + btoa(svgRaw); | |
icon.type="image/svg+xml" | |
console.log(copy) | |
icon.parentNode.removeChild(icon); | |
document.head.appendChild(copy); | |
}, false); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This script helps to differentiate the issues / projects from other tabs. I use Projects heavily at work and always have issues recognizing which of my 2 dozen github tabs is my project board.