tghandbook/lib/darkmode.ts

interface ColorRGB {
  r: number;
  g: number;
  b: number;
}

interface ColorHSV {
  h: number;
  s: number;
  v: number;
}

export enum ColorFmt {
  RGB, // rgb(R,G,B)
  HEX, // #RRGGBB
}

function hsvToRgb({ h, s, v }: ColorHSV): ColorRGB {
  var r, g, b;

  var i = Math.floor(h * 6);
  var f = h * 6 - i;
  var p = v * (1 - s);
  var q = v * (1 - f * s);
  var t = v * (1 - (1 - f) * s);

  switch (i % 6) {
    case 0:
      (r = v), (g = t), (b = p);
      break;
    case 1:
      (r = q), (g = v), (b = p);
      break;
    case 2:
      (r = p), (g = v), (b = t);
      break;
    case 3:
      (r = p), (g = q), (b = v);
      break;
    case 4:
      (r = t), (g = p), (b = v);
      break;
    case 5:
      (r = v), (g = p), (b = q);
      break;
  }
  return { r, g, b };
}

function rgbToHsv({ r, g, b }: ColorRGB): ColorHSV {
  var max = Math.max(r, g, b),
    min = Math.min(r, g, b);
  var h,
    s,
    v = max;

  var d = max - min;
  s = max == 0 ? 0 : d / max;

  if (max == min) {
    h = 0; // achromatic
  } else {
    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 { h, s, v };
}

// Hacky way to get RGB values FOR SURE!
function nameToRGB(name: string): ColorRGB {
  // Create fake div
  let fakeDiv = document.createElement("div");
  fakeDiv.style.color = name;
  document.body.appendChild(fakeDiv);

  // Get color of div
  let cs = window.getComputedStyle(fakeDiv),
    pv = cs.getPropertyValue("color");

  // Remove div after obtaining desired color value
  document.body.removeChild(fakeDiv);

  return parseColor(pv);
}

// If you also wonder "What the fuck", go here:
// https://stackoverflow.com/questions/11068240/what-is-the-most-efficient-way-to-parse-a-css-color-in-javascript
function parseColor(input: string): ColorRGB {
  // Hex format
  if (input.substr(0, 1) == "#") {
    var collen = (input.length - 1) / 3;
    var fact = [17, 1, 0.062272][collen - 1];
    return {
      r: Math.round(parseInt(input.substr(1, collen), 16) * fact) / 256,
      g:
        Math.round(parseInt(input.substr(1 + collen, collen), 16) * fact) / 256,
      b:
        Math.round(parseInt(input.substr(1 + 2 * collen, collen), 16) * fact) /
        256,
    };
  }
  if (input.startsWith("rgb")) {
    // RGB() format
    const vals = input
      .split("(")[1]
      .split(")")[0]
      .split(",")
      .map((i) => parseInt(i, 10))
      .map(Math.round);
    return { r: vals[0] / 256, g: vals[1] / 256, b: vals[2] / 256 };
  }
  // Fuck, well.. normalize it and put it into an element and get back to me
  return nameToRGB(input);
}

function serializeColor(col: ColorRGB, format: ColorFmt): string {
  const r = Math.round(col.r * 255);
  const g = Math.round(col.g * 255);
  const b = Math.round(col.b * 255);
  switch (format) {
    case ColorFmt.RGB:
      return `rgb(${r}, ${g}, ${b})`;
    case ColorFmt.HEX: {
      const rhex = ("00" + r.toString(16)).slice(-2);
      const ghex = ("00" + g.toString(16)).slice(-2);
      const bhex = ("00" + b.toString(16)).slice(-2);
      return "#" + rhex + ghex + bhex;
    }
  }
}

export function darken(color: string, format: ColorFmt): string {
  const col = parseColor(color);
  const hsl = rgbToHsv(col);
  if (hsl.s < 0.15) {
    hsl.h = 0.6;
    hsl.s = 0.5;
    hsl.v = Math.max(0.2, 1 - hsl.v);
  } else {
    if (hsl.v > 0.5) {
      hsl.v = 0.4;
      if (hsl.s > 0.2) {
        hsl.s = Math.min(1, hsl.s + 0.2);
      }
    }
  }
  const out = hsvToRgb(hsl);
  return serializeColor(out, format);
}

export function lighten(color: string, format: ColorFmt): string {
  const col = parseColor(color);
  const hsl = rgbToHsv(col);
  if (hsl.v < 0.5) {
    hsl.v = 0.8;
  }
  if (hsl.s > 0.7) {
    hsl.s = Math.min(1, hsl.s - 0.3);
    hsl.v = 1;
  }
  // Blue is shit to read, make it cyan
  if (Math.abs(hsl.h - 0.666) < 0.1) {
    hsl.h -= 0.13;
    hsl.v = Math.min(1, hsl.v + 0.1);
  }
  const out = hsvToRgb(hsl);
  return serializeColor(out, format);
}