tghandbook/lib/darkmode.ts

194 lines
4.2 KiB
TypeScript

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 {
let r, g, b;
const i = Math.floor(h * 6);
const f = h * 6 - i;
const p = v * (1 - s);
const q = v * (1 - f * s);
const 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;
default:
throw new Error("unreacheable");
}
return { r, g, b };
}
function rgbToHsv({ r, g, b }: ColorRGB): ColorHSV {
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const v = max;
const d = max - min;
const s = max === 0 ? 0 : d / max;
let h;
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;
default:
throw new Error("unreacheable");
}
h /= 6;
}
return { h, s, v };
}
// Hacky way to get RGB values FOR SURE!
function nameToRGB(name: string): ColorRGB {
// Create fake div
const fakeDiv = document.createElement("div");
fakeDiv.style.color = name;
document.body.appendChild(fakeDiv);
// Get color of div
const cs = window.getComputedStyle(fakeDiv);
const 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) === "#") {
const collen = (input.length - 1) / 3;
const 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}`;
}
default:
return "#000";
}
}
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);
}