☰

GitHub Dark Script

Companion Script to GitHub Dark

As of 2015-12-26. See the latest version.

  1. // ==UserScript==
  2. // @name         GitHub Dark Script
  3. // @version      0.1
  4. // @description  Companion Script to GitHub Dark
  5. // @namespace    https://github.com/StylishThemes
  6. // @include      http*github.com*
  7. // @grant        none
  8. // ==/UserScript==
  9.  
  10. "use strict";
  11.  
  12. if (/\/issues\/\d/.test(document.location)) {
  13.     var comments = document.querySelectorAll(".js-discussion > .timeline-comment-wrapper > a"), authors = {};
  14.     for (var i = 0, len = comments.length; i < len; i++) {
  15.         var href = comments[i].getAttribute("href");
  16.         if (/^\//.test(href)) {
  17.             var author = href.substring(1);
  18.             if (!authors[author])
  19.                 authors[author] = [];
  20.             authors[author].push(comments[i].nextElementSibling);
  21.         }
  22.     }
  23.     // TODO: Determine color for each author and apply the style to the comment box
  24. }
  25.  
  26. var hsl, hslGradient, color,
  27.     colors = '',
  28.     styles = document.createElement('style');
  29. for (author in authors) {
  30.     if (authors.hasOwnProperty(author)) {
  31.         hsl = colorFromString(author),
  32.         color = (hsl[2] > 50) ? '#000' : '#fff',
  33.         hslGradient = hsl[0] + ',' + hsl[1] + '%,' + (hsl[2] - 10) + '%';
  34.         hsl = hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%';
  35.         authors[author].forEach(function(){
  36.             // this works - but how to change the arrow color (.timeline-comment:before, .timeline-comment:after)?
  37.             // element.setAttribute('style', 'border-color: rgb(' + rgb + ') !important');
  38.             colors += 'a[href^="/' + author + '"] + div.timeline-comment { border-color: hsl(' + hsl + ') !important; }' +
  39.                 'a[href^="/' + author + '"] + div.timeline-comment:before,' +
  40.                 'a[href^="/' + author + '"] + div.timeline-comment:after { border-right-color: hsl(' + hsl + ') !important; }' + 
  41.                 'a[href^="/' + author + '"] + div.timeline-comment .timeline-comment-header { ' +
  42.                     'background: linear-gradient(to bottom, hsl(' + hsl + '), hsl(' + hslGradient + ')) !important;' +
  43.                     'border-color: hsl(' + hsl + ') !important;' +
  44.                     'color: ' + color + ' !important; }' +
  45.                 'a[href^="/' + author + '"] + div.timeline-comment .timeline-comment-header a { color: ' + color + ' !important; }'
  46.         });
  47.     }
  48. }
  49. styles.innerHTML = colors;
  50. document.getElementsByTagName('body')[0].appendChild(styles);
  51.  
  52. // get RGB color values in the format [red,green,blue] for a given string
  53. // based on : https://github.com/garycourt/murmurhash-js
  54. // then convert RGB to HSL
  55. function colorFromString(string) {
  56.     var remainder, bytes, h1, h1b, c1, c2, k1, i, r, g, b;
  57.     remainder = string.length & 3;
  58.     bytes = string.length - remainder;
  59.     h1 = 0; // Seed value
  60.     c1 = 0xcc9e2d51;
  61.     c2 = 0x1b873593;
  62.     i = 0;
  63.  
  64.     while (i < bytes) {
  65.         k1 =
  66.           ((string.charCodeAt(i) & 0xff)) |
  67.           ((string.charCodeAt(++i) & 0xff) << 8) |
  68.           ((string.charCodeAt(++i) & 0xff) << 16) |
  69.           ((string.charCodeAt(++i) & 0xff) << 24);
  70.         ++i;
  71.  
  72.         k1 = ((((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16))) & 0xffffffff;
  73.         k1 = (k1 << 15) | (k1 >>> 17);
  74.         k1 = ((((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16))) & 0xffffffff;
  75.  
  76.         h1 ^= k1;
  77.         h1 = (h1 << 13) | (h1 >>> 19);
  78.         h1b = ((((h1 & 0xffff) * 5) + ((((h1 >>> 16) * 5) & 0xffff) << 16))) & 0xffffffff;
  79.         h1 = (((h1b & 0xffff) + 0x6b64) + ((((h1b >>> 16) + 0xe654) & 0xffff) << 16));
  80.     }
  81.  
  82.     k1 = 0;
  83.  
  84.     switch (remainder) {
  85.         case 3: k1 ^= (string.charCodeAt(i + 2) & 0xff) << 16;
  86.         case 2: k1 ^= (string.charCodeAt(i + 1) & 0xff) << 8;
  87.         case 1: k1 ^= (string.charCodeAt(i) & 0xff);
  88.  
  89.         k1 = (((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16)) & 0xffffffff;
  90.         k1 = (k1 << 15) | (k1 >>> 17);
  91.         k1 = (((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16)) & 0xffffffff;
  92.         h1 ^= k1;
  93.     }
  94.  
  95.     h1 ^= string.length;
  96.  
  97.     h1 ^= h1 >>> 16;
  98.     h1 = (((h1 & 0xffff) * 0x85ebca6b) + ((((h1 >>> 16) * 0x85ebca6b) & 0xffff) << 16)) & 0xffffffff;
  99.     h1 ^= h1 >>> 13;
  100.     h1 = ((((h1 & 0xffff) * 0xc2b2ae35) + ((((h1 >>> 16) * 0xc2b2ae35) & 0xffff) << 16))) & 0xffffffff;
  101.     h1 ^= h1 >>> 16;
  102.  
  103.     var integer = h1 >>> 0;
  104.     var colors = [];
  105.  
  106.     var j = 3;
  107.     while (j) {
  108.         colors[--j] = integer & (255);
  109.         integer = integer >> 8;
  110.     }
  111.  
  112.     // convert rgb to hsl - from http://stackoverflow.com/a/2348659
  113.     r = colors[0];
  114.     g = colors[1];
  115.     b = colors[2];
  116.  
  117.     r /= 255, g /= 255, b /= 255;
  118.     var max = Math.max(r, g, b), min = Math.min(r, g, b);
  119.     var h, s, l = (max + min) / 2;
  120.  
  121.     if(max == min){
  122.         h = s = 0; // achromatic
  123.     } else {
  124.         var d = max - min;
  125.         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  126.         switch(max){
  127.             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
  128.             case g: h = (b - r) / d + 2; break;
  129.             case b: h = (r - g) / d + 4; break;
  130.         }
  131.         h /= 6;
  132.     }
  133.  
  134.     return [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)];
  135. }