dark old reddit userscript

oldreddit_dark.user.js

// ==UserScript==
// @name        Old Reddit Dark Mode
// @namespace   wyatt8740.oldRedditDarkMode
// @description Dark mode for Old Reddit (old.reddit.com)
// @include     http://old.reddit.com/*
// @include     https://old.reddit.com/*
// @include     http://np.reddit.com/*
// @include     https://np.reddit.com/*
// @version     1
// @grant       UnsafeWindow
// ==/UserScript==

var s = document.createElement("style");
s.type = "text/css";
s.innerText = `
body {
/*  background-color: #2E3436; */
  background-color: #181818;
  color: #afafaf;
}
.roundfield textarea, .roundfield input[type="text"], .roundfield input[type="url"], .roundfield input[type="password"], .roundfield input[type="number"], #compose-message .roundfield select {
  background-color: #181818;
  color: #afafaf;
}

.reddit-infobar {
  background-color: #282000;
}
.reddit-infobar .md {
  color: #9a7d2e;
}
.message.recipient > .entry {
  color: #afafaf;
}
.message.message-reply.recipient > .entry .head, .message.message-parent.recipient > .entry .head {
  color: grey;
}
.usertext.grayed .usertext-body {
  background-color: #2f2f2f;
}
.message .subject .correspondent {
  background-color: #181818;
}
.drop-choices {
  background-color: #181818;
}
.flair, .linkflairlabel {
  background-color: #181818;
  background: #181818;
}
.flairselector h2 {
  background-color: #282828;
}
.flairselector li {
  border: 1px solid black;
}
h2 {
  color: #afafaf;
}
.crosspost-preview {
  background-color: #282828;
  border: 1px solid grey;
}
.link .usertext-body .md {
  background-color: #141414;
  border: 1px solid grey;
}
.flair, .linkflairlabel {
  background-color: #282828;
  color: grey;
  border: 1px solid grey;
}
.roundfield {
  background-color: #282828;
}
.formtabs-content {
  border-top: 4px solid #383838;
}
.tabmenu.formtab .selected a {
  background-color: #383838;
}
.md blockquote, .md del {
  color: #999999;
}
.md blockquote {
  background-color: #343434;
}
.comment .child, .comment .showreplies {
  border-left: 1px dotted #9f9f9f;
}
.usertext .md {
  /* user comment text color */
  color: #bababa !important;
}
.new-comment .usertext-body {
  /* comment color for newly posted messages */
  background-color: #2f2f2f;
  border: solid 1px #2a2a2a;
}
.new-comment .md :not(pre) > code, .link .md :not(pre) > code, .usertext.border .md :not(pre) > code, .new-comment .md pre, .link .md pre, .usertext.border .md pre
{
  background-color: #282828;
  border: 1px solid #323232;
}
.md code, .md pre {
  background-color: #282828;
  border: 1px solid #323232;
}
body.with-listing-chooser .listing-chooser {
  background-color: #080808;
}
body.with-listing-chooser .listing-chooser .grippy {
  width: 6px;
  background: #000000;
  border-left: 1px solid #464646;
}
body.with-listing-chooser .listing-chooser .grippy::after {
  border-right: 1px dotted #6f6f6f;
}
.listing-chooser li, .listing-chooser li.selected {
  background: #181818;
  border: 1px solid #383838;
}
.listing-chooser .intro {
  background-color: #282820;
}
a, .thing .title {
  color: #3086ae;
}
p.title > a.title {
  font-weight: bold;
}
.pagename a {
  color: #afafaf;
}
.tabmenu li {
  border: 1px solid grey;
}
.tabmenu li a {
  background-color: #1d1d1d;
  color: grey;
}
.message.new > .entry {
  background-color: #181818;
}
.usertext.border .usertext-body {
  background-color: #282820;
}
.infobar {
  background-color: #32322a;
}
a:visited {
  color: #3086ae;
}
#header {
  background-color: #282828;
  border-bottom: 1px solid #afafaf;
}
#sr-header-area {
  background-color: #252525;
  color: 
}
.dropdown.srdrop .selected, .sr-bar a {
  color: #afafaf;
}
#sr-more-link {
  background-color: #0d0d0d;
  color: #afafaf;
}
#header-bottom-right {
  background-color: #000000;
}
#mail.havemail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAIAAADkeZOuAAAARUlEQVR4AWPY70gCglL6hABCNYSDXymQRKiGcPAoRajGlEATwaE6FV0zUAS7arAEwkOY4ki+TMXry1QkX+JRiuZI0mIHAKe3cdja4fUxAAAAAElFTkSuQmCC);
  background-position: 0px 0px;
}
#mail.nohavemail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKAQMAAABR1Za6AAAABlBMVEVgYGAvLy+FWzIyAAAAIUlEQVR4AWMAAvsfDPFfGPLfMJTfYSiew5CTA+QCBYEyAJHlCap+qtufAAAAAElFTkSuQmCC);
  background-position: 0px 0px;
}
.message-count {
  /* message count number is wrong color if I don't do this important: */
  color: #EEE !important;
  background-color: #bf4100 !important; /* darker orange */
}
#chat.active {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABjUlEQVR4AcVXpVatYRTc96KJF6BT8AoZL7hbpOMuBYe3IKL96AtAw90b7jKDw7eO/brXml+2zeciwYizXv47qyTdWS6jgNNZISvABcFv6mijD31Fp5AwGombgGMkfgkG9GUMY7WRVkoBEuwwmRYwljmCJ3TKPwQNaCRUwFzMGQzplBKsE8zpl9x/TfXX3Gef0sFMkEMZvcpAMgPk+DnaoWhWnMwjb/paHJR5aiLIRU7hakOFlSCncKmzmpicJHZqCJznCCXQdAsa4p3CRd5HX3QicSrff/Qz8kegn/UXqwCcJL5QDeL4s7A4fthyFGLo/Mcq+S9ouLGB+JyGQx/90AFbIt8hNzVjqiUBvu3+mtqrYXDMspYEv7UOrkk7phOJ02xZQCj4WbJ8yaTgp8HyTYKCqsdRace22ESD1QcBEi8qTmYffTjRVUcLDntQDvkJMu94C8Oqn8BH0w70cNpVyCpkDsjDCIzBuxW6I/1XGPVYWwTHUwStAz3o81jFp0/C4JcJvwnACxwAN3ouba+/IuQdj3qlKwAAAABJRU5ErkJggg==);
  background-position: 0px 0px;
  background-size: 15px 15px;
}
.sidebox .spacer {
  background-color: #181818;
  border-radius: 3px;
  padding: 5px 0 0 44px
}
.sidebox.create .spacer a {
/*   background-image: none; */
}
.trophy-area .content, .server-seconds {
  background-color: #181818;
/*  color: #afafaf;*/
  border-radius: 3px;
  padding: 4px;
}
.server-seconds em {
  color: grey;
}
.gold-accent.comment-visits-box {
  color: #947400;
}
.gold-accent {
  background-color: #282000;
}
.content.submit .info-notice {
  background-color: #20303b;
}
#newlink-with-image-upload .image-upload-drop-target {
  background-color: #282828;
}
.trophy-name {
  /* needs JS override apparently. ARGH */
  color: grey important;
}
.pinnable-content.pinned {
  /* also needs JS override */
  background-color: #181818 !important;
}
.side {
  background-color: #181818;
/*  color: #afafaf;*/
  border-radius: 3px;
  padding: 4px;
}
.titlebox h1 a {
  color: inherit;
}
.linkinfo {
  background-color: #0f0f0f;
  color: inherit;
  border: 1px solid #484848;
}
.morelink {
  background-image: none;
  border: 1px solid #484848;
}
.morelink a {
  background-color: #282828;
/*  color: #afafaf;*/
  color: #888888;
}
.nub {
  display: none;
}
#search input[type="text"] {
  background-color: #282828;
  color: #afafaf;
}
.titlebox form.toggle, .leavemoderator {
  background: #181818 none no-repeat scroll center left;
}
.md {
  color: #afafaf;
}
.linkinfo .shortlink input{
  background-color: #282828;
  color: inherit;
}
textarea {
  background-color: #282828;
  color: #afafaf;
  border-style: solid;
  border-color: #484848;
}
.usertext-buttons > button {
  background-color: #282828;
  color: #afafaf;
  border-style: solid;
  border-color: #484848;

}
.tabmenu li.selected a {
  background-color: #181818;
  color: #afafaf;
  border:  1px solid #484848;
}

/* one ad blocking rule */
.premium-banner-outer {
  display: none;
  border-radius: 3px;
  border-width: 1px;
}
.premium-banner {
  background-color: #282828;
}
.premium-banner::before {
  border: 1px solid #484848;
}
 .premium-banner__title {
  color: #afafaf;
}
.premium-banner__button {
/*  background-color: #bf4100;
  border: 4px solid #bf4100;*/
  background-color: #181818;
  border: 4px solid #181818;
  color: #afafaf;
  font-weight: normal;
}
/* new reddit annoying */
#sr-header-area .redesign-beta-optin {
  display: none;
}
`
document.head.appendChild(s);

function changeImportantProperty(selector, attribute, value) {
  var trophy=document.querySelectorAll(selector);
  if(trophy) {
    trophy.forEach((item) => {
      if(item) {
        try{item.style.removeProperty(attribute);
            item.style.setProperty(attribute, value, "important");
           }
        catch(e){}
      }
    })
  }
}

function changeInline(selector, attribute, value, important=false) {
    var trophy=document.querySelectorAll(selector);
  if(trophy) {
    trophy.forEach((item) => {
      if(item) {
        try{item.style.removeProperty(attribute);
            item.style.setProperty(attribute, value, important ? "important" : null);
           }
        catch(e){}
      }
    })
  }
}


function RGBtoHSP(R,G,B){
  const  Pr=0.299;
  const  Pg=0.587;
  const  Pb=0.114;
  var H;
  var S;
  var P;
  
  //  Calculate the Perceived brightness.
  P=Math.round(Math.sqrt(R*R*Pr+G*G*Pg+B*B*Pb));

  //  Calculate the Hue and Saturation.  (This part works
  //  the same way as in the HSV/B and HSL systems???.)
  if (R===G && R===B) {
    H=0;
    S=0;
    return([H,S,P]);
  }
  if      (R>=G && R>=B) {   //  R is largest
    if    (B>=G) {
      H=(6.0/6.0)-(1.0/6.0)*((B-G)/(R-G));
      S=1.0-(G/R); }
    else         {
      H=(0.0/6.0)+(1.0/6.0)*((G-B)/(R-B));
      S=1.0-(B/R); }}
  else if (G>=R && G>=B) {   //  G is largest
    if    (R>=B) {
      H=(2.0/6.0)-(1.0/6.0)*((R-B)/(G-B));
      S=1.0-(B/G); }
    else         {
      H=(2.0/6.0)+(1.0/6.0)*((B-R)/(G-R));
      S=1.0-(R/G); }}
  else                   {   //  B is largest
    if    (G>=R) {
      H=(4.0/6.0)-(1.0/6.0)*((G-R)/(B-R));
      S=1.0-(R/B); }
    else         {
      H=(4.0/6.0)+(1.0/6.0)*((R-G)/(B-G));
      S=1.0-(G/B); }}

  return [H,S,parseInt(P)]; // i hate this
}


function HSPtoRGB(H,S,P){
  const  Pr=0.299;
  const  Pg=0.587;
  const  Pb=0.114;
  var R;
  var G;
  var B;
  var part;
  var minOverMax=1.0-S;

  if (minOverMax>0.0) {
    if      ( H<1.0/6.0) {   //  R>G>B
      H= 6.0*( H-0.0/6.0);
      part=1.0+H*(1.0/minOverMax-1.0);
      B=P/Math.sqrt(Pr/minOverMax/minOverMax+Pg*part*part+Pb);
      R=B/minOverMax;
      G=B+H*(R-B); }
    else if ( H<2.0/6.0) {   //  G>R>B
      H= 6.0*(-H+2.0/6.0); part=1.0+H*(1.0/minOverMax-1.0);
      B=P/Math.sqrt(Pg/minOverMax/minOverMax+Pr*part*part+Pb);
      G=B/minOverMax;
      R=B+H*(G-B); }
    else if ( H<3.0/6.0) {   //  G>B>R
      H= 6.0*( H-2.0/6.0); part=1.0+H*(1.0/minOverMax-1.0);
      R=P/Math.sqrt(Pg/minOverMax/minOverMax+Pb*part*part+Pr);
      G=R/minOverMax; B=R+H*(G-R); }
    else if ( H<4.0/6.0) {   //  B>G>R
      H= 6.0*(-H+4.0/6.0); part=1.0+H*(1.0/minOverMax-1.0);
      R=P/Math.sqrt(Pb/minOverMax/minOverMax+Pg*part*part+Pr);
      B=R/minOverMax; G=R+H*(B-R); }
    else if ( H<5.0/6.0) {   //  B>R>G
      H= 6.0*( H-4.0/6.0); part=1.0+H*(1.0/minOverMax-1.0);
      G=P/Math.sqrt(Pb/minOverMax/minOverMax+Pr*part*part+Pg);
      B=G/minOverMax; R=G+H*(B-G); }
    else               {   //  R>B>G
      H= 6.0*(-H+6.0/6.0); part=1.0+H*(1.0/minOverMax-1.0);
      G=P/Math.sqrt(Pr/minOverMax/minOverMax+Pb*part*part+Pg);
      R=G/minOverMax; B=G+H*(R-G); }
    return [Math.floor(R),Math.floor(G),Math.floor(B)];
  }
  else {
    if      ( H<1.0/6.0) {   //  R>G>B
      H= 6.0*( H-0.0/6.0); R=Math.sqrt(P*P/(Pr+Pg*H*H)); G=R*H; B=0.0; }
    else if ( H<2.0/6.0) {   //  G>R>B
      H= 6.0*(-H+2.0/6.0); G=Math.sqrt(P*P/(Pg+Pr*H*H)); R=G*H; B=0.0; }
    else if ( H<3.0/6.0) {   //  G>B>R
      H= 6.0*( H-2.0/6.0); G=Math.sqrt(P*P/(Pg+Pb*H*H)); B=G*H; R=0.0; }
    else if ( H<4.0/6.0) {   //  B>G>R
      H= 6.0*(-H+4.0/6.0); B=Math.sqrt(P*P/(Pb+Pg*H*H)); G=B*H; R=0.0; }
    else if ( H<5.0/6.0) {   //  B>R>G
      H= 6.0*( H-4.0/6.0); B=Math.sqrt(P*P/(Pb+Pr*H*H)); R=B*H; G=0.0; }
    else               {   //  R>B>G
      H= 6.0*(-H+6.0/6.0); R=Math.sqrt(P*P/(Pr+Pb*H*H)); B=R*H; G=0.0; }
    return [parseInt(R),parseInt(G),parseInt(B)];
  }
}





// return array of [r,g,b,a] from any valid color. if failed returns undefined
function colorValues(color)
{
    if (color === '')
      return;
  //console.log(color.toString());
    if (color.toLowerCase() === 'transparent')
        return [0, 0, 0, 0];
    if (color[0] === '#')
    {
        if (color.length < 7)
        {
            // convert #RGB and #RGBA to #RRGGBB and #RRGGBBAA
            color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3] + (color.length > 4 ? color[4] + color[4] : '');
        }
        return [parseInt(color.substr(1, 2), 16),
            parseInt(color.substr(3, 2), 16),
            parseInt(color.substr(5, 2), 16),
            color.length > 7 ? parseInt(color.substr(7, 2), 16)/255 : 1];
    }
    if (color.indexOf('rgb') === -1)
    {
        // convert named colors
        var temp_elem = document.body.appendChild(document.createElement('fictum')); // intentionally use unknown tag to lower chances of css rule override with !important
        var flag = 'rgb(1, 2, 3)'; // this flag tested on chrome 59, ff 53, ie9, ie10, ie11, edge 14
        temp_elem.style.color = flag;
        if (temp_elem.style.color !== flag)
            return; // color set failed - some monstrous css rule is probably taking over the color of our object
        temp_elem.style.color = color;
        if (temp_elem.style.color === flag || temp_elem.style.color === '')
            return; // color parse failed
        color = getComputedStyle(temp_elem).color;
        document.body.removeChild(temp_elem);
    }
    if (color.indexOf('rgb') === 0)
    {
        if (color.indexOf('rgba') === -1)
            color += ',1'; // convert 'rgb(R,G,B)' to 'rgb(R,G,B)A' which looks awful but will pass the regxep below
        return color.match(/[\.\d]+/g).map(function (a)
        {
            return +a
        });
    }
}

function arrToRGB(colorArray) {
  return  'rgba(' + colorArray[0] + ','+ colorArray[1] + ','+ colorArray[2] + ','+ colorArray[3] + ')'
}

function nameToRgba(name) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.fillStyle = name;
    context.fillRect(0,0,1,1);
    return context.getImageData(0,0,1,1).data;
}

/* do note that this does not have any gamma correction, so the numbers are not really "40% as bright." */
function darkenBackgroundSelector(selector, multiplier=0.2, important=null) {
  var trophy=document.querySelectorAll(selector);
  var str=' '
  if(trophy) {
    trophy.forEach((item) => {
      if(item) {
        var attribute='background-color';
        var bgcolor=colorValues(arrToRGB(nameToRgba(item.style[attribute])));
        var hspbg=RGBtoHSP(bgcolor[0],bgcolor[1],bgcolor[2]);
        var hspbg2=hspbg[2]*multiplier;
        var bgcolor2=[];
        bgcolor2=HSPtoRGB(hspbg[0],hspbg[1],hspbg2);
        var i=0;
        while(i<3) { // preserve alpha by inserting back
          if(bgcolor){
            bgcolor[i]=bgcolor2[i];
          }
          i++;
        }
/*
        var fgcolor=colorValues(arrToRGB(nameToRgba(item.style['color'])));
        console.log(fgcolor.toString())
        console.log*
        var hspfg=RGBtoHSP(fgcolor[0],fgcolor[1],fgcolor[2]);
        var hspfg2=hspfg[2]/(1/multiplier);
        var fgcolor2=HSPtoRGB(hspfg[0],hspfg[1],hspfg2);
        console.log(fgColor2.toString())
        var i=0;
        while(i<3) { // preserve alpha by inserting back
          if(fgcolor){
            fgcolor[i]=fgcolor2[i];
          }
          i++;
          }*/

        
        var myrgb='';
/*        
        i=0;
        var myrgb='';
        while(i<3) {
          if(bgcolor){
            bgcolor2[i]=Math.floor(bgcolor[i] * multiplier);
          }
          i++;
        }
        bgcolor2[3]=bgcolor[3];
        i=0;
        while(i<3) {
          if(fgcolor)
            fgcolor2[i]=Math.floor((multiplier * (1/ fgcolor[i])));
          i++;
        }
        fgcolor2[3]=fgcolor[3];*/
        try{
          item.style.removeProperty(attribute);
          myrgb=arrToRGB(bgcolor);
          item.style.setProperty(attribute, myrgb, important ? "important" : null);
        }
        catch(e){
          console.err(e);
        }
/*        try{
          item.style.removeProperty('color');
          myrgb=arrToRGB(fgcolor);
          item.style.setProperty('color', myrgb, important ? "important" : null);
        }
        catch(e){
          console.err(e);
        }*/
      }
    });
  }
}


/* do note that this does not have any gamma correction, so the numbers are not really "40% as bright." */
function darkenBorderSelector(selector, multiplier=0.2, important=null) {
  var trophy=document.querySelectorAll(selector);
  var str=' '
  if(trophy) {
    trophy.forEach((item) => {
      if(item) {
        var attribute='border-color';
        var bgcolor=colorValues(arrToRGB(nameToRgba(item.style[attribute])));
        var hspbg=RGBtoHSP(bgcolor[0],bgcolor[1],bgcolor[2]);
        var hspbg2=hspbg[2]*(multiplier);
        var bgcolor2=[];
        bgcolor2=HSPtoRGB(hspbg[0],hspbg[1],hspbg2);
        var i=0;
        while(i<3) { // preserve alpha by inserting back
          if(bgcolor){
            bgcolor[i]=bgcolor2[i];
          }
          i++;
        }
/*
        var fgcolor=colorValues(arrToRGB(nameToRgba(item.style['color'])));
        console.log(fgcolor.toString())
        console.log*
        var hspfg=RGBtoHSP(fgcolor[0],fgcolor[1],fgcolor[2]);
        var hspfg2=hspfg[2]/(1/multiplier);
        var fgcolor2=HSPtoRGB(hspfg[0],hspfg[1],hspfg2);
        console.log(fgColor2.toString())
        var i=0;
        while(i<3) { // preserve alpha by inserting back
          if(fgcolor){
            fgcolor[i]=fgcolor2[i];
          }
          i++;
          }*/

        
        var myrgb='';
/*        
        i=0;
        var myrgb='';
        while(i<3) {
          if(bgcolor){
            bgcolor2[i]=Math.floor(bgcolor[i] * multiplier);
          }
          i++;
        }
        bgcolor2[3]=bgcolor[3];
        i=0;
        while(i<3) {
          if(fgcolor)
            fgcolor2[i]=Math.floor((multiplier * (1/ fgcolor[i])));
          i++;
        }
        fgcolor2[3]=fgcolor[3];*/
        try{
          item.style.removeProperty(attribute);
          myrgb=arrToRGB(bgcolor);
          item.style.setProperty(attribute, myrgb, important ? "important" : null);
        }
        catch(e){
          console.err(e);
        }
/*        try{
          item.style.removeProperty('color');
          myrgb=arrToRGB(fgcolor);
          item.style.setProperty('color', myrgb, important ? "important" : null);
        }
        catch(e){
          console.err(e);
        }*/
      }
    });
  }
}


darkenBackgroundSelector('.flairrichtext', 0.3, null);
darkenBorderSelector('.linkflairlabel', 0.45, null);
/*lightenForegroundSelector('.linkflairlabel', 0.4, null);*/
/*darkenBackgroundSelector('.linkflairlabel', 0.8, null);*/
changeInline(".trophy-name", "color", "grey", true);
changeInline(".pinnable-content.pinned", "background-color", "#181818", true);