Companion Script to GitHub Dark
// ==UserScript==
// @name GitHub Dark Script
// @version 0.1
// @description Companion Script to GitHub Dark
// @namespace https://github.com/StylishThemes
// @include http*github.com*
// @grant none
// ==/UserScript==
"use strict";
if (/\/issues\/\d/.test(document.location)) {
var comments = document.querySelectorAll(".js-discussion > .timeline-comment-wrapper > a"), authors = {};
for (var i = 0, len = comments.length; i < len; i++) {
var href = comments[i].getAttribute("href");
if (/^\//.test(href)) {
var author = href.substring(1);
if (!authors[author])
authors[author] = [];
authors[author].push(comments[i].nextElementSibling);
}
}
// TODO: Determine color for each author and apply the style to the comment box
}
var hsl, hslGradient, color,
colors = '',
styles = document.createElement('style');
for (author in authors) {
if (authors.hasOwnProperty(author)) {
hsl = colorFromString(author),
color = (hsl[2] > 50) ? '#000' : '#fff',
hslGradient = hsl[0] + ',' + hsl[1] + '%,' + (hsl[2] - 10) + '%';
hsl = hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%';
authors[author].forEach(function(){
// this works - but how to change the arrow color (.timeline-comment:before, .timeline-comment:after)?
// element.setAttribute('style', 'border-color: rgb(' + rgb + ') !important');
colors += 'a[href^="/' + author + '"] + div.timeline-comment { border-color: hsl(' + hsl + ') !important; }' +
'a[href^="/' + author + '"] + div.timeline-comment:before,' +
'a[href^="/' + author + '"] + div.timeline-comment:after { border-right-color: hsl(' + hsl + ') !important; }' +
'a[href^="/' + author + '"] + div.timeline-comment .timeline-comment-header { ' +
'background: linear-gradient(to bottom, hsl(' + hsl + '), hsl(' + hslGradient + ')) !important;' +
'border-color: hsl(' + hsl + ') !important;' +
'color: ' + color + ' !important; }' +
'a[href^="/' + author + '"] + div.timeline-comment .timeline-comment-header a { color: ' + color + ' !important; }'
});
}
}
styles.innerHTML = colors;
document.getElementsByTagName('body')[0].appendChild(styles);
// get RGB color values in the format [red,green,blue] for a given string
// based on : https://github.com/garycourt/murmurhash-js
// then convert RGB to HSL
function colorFromString(string) {
var remainder, bytes, h1, h1b, c1, c2, k1, i, r, g, b;
remainder = string.length & 3;
bytes = string.length - remainder;
h1 = 0; // Seed value
c1 = 0xcc9e2d51;
c2 = 0x1b873593;
i = 0;
while (i < bytes) {
k1 =
((string.charCodeAt(i) & 0xff)) |
((string.charCodeAt(++i) & 0xff) << 8) |
((string.charCodeAt(++i) & 0xff) << 16) |
((string.charCodeAt(++i) & 0xff) << 24);
++i;
k1 = ((((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16))) & 0xffffffff;
k1 = (k1 << 15) | (k1 >>> 17);
k1 = ((((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16))) & 0xffffffff;
h1 ^= k1;
h1 = (h1 << 13) | (h1 >>> 19);
h1b = ((((h1 & 0xffff) * 5) + ((((h1 >>> 16) * 5) & 0xffff) << 16))) & 0xffffffff;
h1 = (((h1b & 0xffff) + 0x6b64) + ((((h1b >>> 16) + 0xe654) & 0xffff) << 16));
}
k1 = 0;
switch (remainder) {
case 3: k1 ^= (string.charCodeAt(i + 2) & 0xff) << 16;
case 2: k1 ^= (string.charCodeAt(i + 1) & 0xff) << 8;
case 1: k1 ^= (string.charCodeAt(i) & 0xff);
k1 = (((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16)) & 0xffffffff;
k1 = (k1 << 15) | (k1 >>> 17);
k1 = (((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16)) & 0xffffffff;
h1 ^= k1;
}
h1 ^= string.length;
h1 ^= h1 >>> 16;
h1 = (((h1 & 0xffff) * 0x85ebca6b) + ((((h1 >>> 16) * 0x85ebca6b) & 0xffff) << 16)) & 0xffffffff;
h1 ^= h1 >>> 13;
h1 = ((((h1 & 0xffff) * 0xc2b2ae35) + ((((h1 >>> 16) * 0xc2b2ae35) & 0xffff) << 16))) & 0xffffffff;
h1 ^= h1 >>> 16;
var integer = h1 >>> 0;
var colors = [];
var j = 3;
while (j) {
colors[--j] = integer & (255);
integer = integer >> 8;
}
// convert rgb to hsl - from http://stackoverflow.com/a/2348659
r = colors[0];
g = colors[1];
b = colors[2];
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)];
}