☰

Darksite

browse the dark side

  1. // ==UserScript==
  2. // @name         Darksite
  3. // @namespace    www.tim-greller.tk
  4. // @version      1.2.2
  5. // @description  browse the dark side
  6. // @author       Tim L. Greller
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11.  
  12. // init const
  13. var PREF_COLOR = {
  14.     fg:"#c3c0b8",
  15.     bg:"#1d1511"
  16. }
  17.  
  18. // main function, executed at the end
  19. function main(){
  20.     document.querySelectorAll("*").forEach(adjustColor);
  21.  
  22.     if(window.location.host.includes("google")){
  23.         document.domain = "google.com";
  24.         //alert('execute `document.domain = "google.com";` in the console, to give Darksite.user.js permission to change the appearence of the google-site.');
  25.         window.setTimeout(function(){
  26.             applyPrefColors(window.top.document.querySelector("#main"));
  27.             applyPrefColors(window.top.document.querySelector("#hdtb-msb"));
  28.             applyPrefColors(window.top.document.querySelector("#topabar"));
  29.         },6000);
  30.     } else {
  31.         applyPrefColors(window.top.document.body);
  32.     }
  33. }
  34.  
  35. // apply preferred back- and foreground color to an element e
  36. function applyPrefColors(e) {
  37.     e.style.color = PREF_COLOR.fg;
  38.     e.style.backgroundColor = PREF_COLOR.bg;
  39. }
  40.  
  41. // reverse color of an element if it is bright
  42. function adjustColor(element) {
  43.     var style = window.getComputedStyle(element);
  44.     var background = new Color(style['background-color']);
  45.     var text = new Color(style['color']);
  46.     if (background.luma > 120) {
  47.         element.style.color = text.inverted.toString();
  48.         element.style.backgroundColor = background.inverted.toString();
  49.     } else if (text.luma < 100) {
  50.         element.style.color = text.inverted.toString();
  51.     }
  52. }
  53.  
  54. // helper class for color calculations
  55. var Color = (function () {
  56.     function toHex(num, padding) { return num.toString(16).padStart(padding || 2); }
  57.     function parsePart(value) {
  58.         var perc = value.lastIndexOf('%');
  59.         return perc < 0 ? value : value.substr(0, perc);
  60.     }
  61.     function Color(data) {
  62.         if (arguments.length > 1) {
  63.             this[0] = arguments[0];
  64.             this[1] = arguments[1];
  65.             this[2] = arguments[2];
  66.             if (arguments.length > 3) { this[3] = arguments[3]; }
  67.         } else if (data instanceof Color || Array.isArray(data)) {
  68.             this[0] = data[0];
  69.             this[1] = data[1];
  70.             this[2] = data[2];
  71.             this[3] = data[3];
  72.         } else if (typeof data === 'string') {
  73.             data = data.trim();
  74.             if (data[0] === "#") {
  75.                 switch (data.length) {
  76.                     case 4:
  77.                         this[0] = parseInt(data[1], 16); this[0] = (this[0] << 4) | this[0];
  78.                         this[1] = parseInt(data[2], 16); this[1] = (this[1] << 4) | this[1];
  79.                         this[2] = parseInt(data[3], 16); this[2] = (this[2] << 4) | this[2];
  80.                         break;
  81.                     case 9:
  82.                         this[3] = parseInt(data.substr(7, 2), 16);
  83.                     //Fall Through
  84.                     case 7:
  85.                         this[0] = parseInt(data.substr(1, 2), 16);
  86.                         this[1] = parseInt(data.substr(3, 2), 16);
  87.                         this[2] = parseInt(data.substr(5, 2), 16);
  88.                         break;
  89.                 }
  90.             } else if (data.startsWith("rgb")) {
  91.                 var parts = data.substr(data[3] === "a" ? 5 : 4, data.length - (data[3] === "a" ? 6 : 5)).split(',');
  92.                 this.r = parsePart(parts[0]);
  93.                 this.g = parsePart(parts[1]);
  94.                 this.b = parsePart(parts[2]);
  95.                 if (parts.length > 3) { this.a = parsePart(parts[3]); }
  96.             }
  97.         }
  98.     }
  99.     Color.prototype = {
  100.         constructor: Color,
  101.         0: 255,
  102.         1: 255,
  103.         2: 255,
  104.         3: 255,
  105.         get r() { return this[0]; },
  106.         set r(value) { this[0] = value == null ? 0 : Math.max(Math.min(parseInt(value), 255), 0); },
  107.         get g() { return this[1]; },
  108.         set g(value) { this[1] = value == null ? 0 : Math.max(Math.min(parseInt(value), 255), 0); },
  109.         get b() { return this[2]; },
  110.         set b(value) { this[2] = value == null ? 0 : Math.max(Math.min(parseInt(value), 255), 0); },
  111.         get a() { return this[3] / 255; },
  112.         set a(value) { this[3] = value == null ? 255 : Math.max(Math.min(value > 1 ? value : parseFloat(value) * 255, 255), 0); },
  113.         get luma() { return .299 * this.r + .587 * this.g + .114 * this.b; },
  114.         get inverted() { return new Color(255 - this[0], 255 - this[1], 255 - this[2], this[3]); },
  115.         toString: function (option) {
  116.             if (option === 16) {
  117.                 return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (this[3] === 255 ? '' : toHex(this[3]));
  118.             } else if (option === '%') {
  119.                 if (this.a !== 1) {
  120.                     return `rgba(${this.r / 255 * 100}%, ${this.b / 255 * 100}%, ${this.g / 255 * 100}%, ${this.a / 255})`;
  121.                 } else {
  122.                     return `rgb(${this.r / 255 * 100}%, ${this.b / 255 * 100}%, ${this.g / 255 * 100})%`;
  123.                 }
  124.             } else {
  125.                 if (this.a !== 1) {
  126.                     return `rgba(${this.r}, ${this.b}, ${this.g}, ${this.a})`;
  127.                 } else {
  128.                     return `rgb(${this.r}, ${this.b}, ${this.g})`;
  129.                 }
  130.             }
  131.         }
  132.     };
  133.  
  134.     return Color;
  135. }());
  136.  
  137.  
  138. main();