This repository has been archived on 2022-05-10. You can view files and clone it, but cannot push or open issues or pull requests.
tghandbook/src/darkmode.ts

348 lines
8.4 KiB
TypeScript
Raw Normal View History

2020-06-20 15:13:49 +00:00
import { nextAnimationFrame } from "./utils";
2020-06-16 09:32:48 +00:00
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
}
2020-06-20 15:13:49 +00:00
/* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
$$('#colors_table tbody tr')
.map((row) => {
const [name, hex] = Array.from(row.children).slice(-3);
return [name.innerText.trim().replace(/\s.+/g, ''), hex.innerText.trim()];
}).sort((a, b) => [a[0], b[0]].sort()[0] === a[0] ? -1 : 1)
.map(([name, hex]) => `${name} : '${hex}',`)
.join('\n')
*/
const namedColors = {
aliceblue : '#f0f8ff',
antiquewhite : '#faebd7',
aqua : '#00ffff',
aquamarine : '#7fffd4',
azure : '#f0ffff',
beige : '#f5f5dc',
bisque : '#ffe4c4',
black : '#000000',
blanchedalmond : '#ffebcd',
blue : '#0000ff',
blueviolet : '#8a2be2',
brown : '#a52a2a',
burlywood : '#deb887',
cadetblue : '#5f9ea0',
chartreuse : '#7fff00',
chocolate : '#d2691e',
coral : '#ff7f50',
cornflowerblue : '#6495ed',
cornsilk : '#fff8dc',
crimson : '#dc143c',
cyan : '#00ffff',
darkblue : '#00008b',
darkcyan : '#008b8b',
darkgoldenrod : '#b8860b',
darkgray : '#a9a9a9',
darkgreen : '#006400',
darkgrey : '#a9a9a9',
darkkhaki : '#bdb76b',
darkmagenta : '#8b008b',
darkolivegreen : '#556b2f',
darkorange : '#ff8c00',
darkorchid : '#9932cc',
darkred : '#8b0000',
darksalmon : '#e9967a',
darkseagreen : '#8fbc8f',
darkslateblue : '#483d8b',
darkslategray : '#2f4f4f',
darkslategrey : '#2f4f4f',
darkturquoise : '#00ced1',
darkviolet : '#9400d3',
deeppink : '#ff1493',
deepskyblue : '#00bfff',
dimgray : '#696969',
dimgrey : '#696969',
dodgerblue : '#1e90ff',
firebrick : '#b22222',
floralwhite : '#fffaf0',
forestgreen : '#228b22',
fuchsia : '#ff00ff',
gainsboro : '#dcdcdc',
ghostwhite : '#f8f8ff',
gold : '#ffd700',
goldenrod : '#daa520',
gray : '#808080',
green : '#008000',
greenyellow : '#adff2f',
grey : '#808080',
honeydew : '#f0fff0',
hotpink : '#ff69b4',
indianred : '#cd5c5c',
indigo : '#4b0082',
ivory : '#fffff0',
khaki : '#f0e68c',
lavender : '#e6e6fa',
lavenderblush : '#fff0f5',
lawngreen : '#7cfc00',
lemonchiffon : '#fffacd',
lightblue : '#add8e6',
lightcoral : '#f08080',
lightcyan : '#e0ffff',
lightgoldenrodyellow : '#fafad2',
lightgray : '#d3d3d3',
lightgreen : '#90ee90',
lightgrey : '#d3d3d3',
lightpink : '#ffb6c1',
lightsalmon : '#ffa07a',
lightseagreen : '#20b2aa',
lightskyblue : '#87cefa',
lightslategray : '#778899',
lightslategrey : '#778899',
lightsteelblue : '#b0c4de',
lightyellow : '#ffffe0',
lime : '#00ff00',
limegreen : '#32cd32',
linen : '#faf0e6',
magenta : '#ff00ff',
maroon : '#800000',
mediumaquamarine : '#66cdaa',
mediumblue : '#0000cd',
mediumorchid : '#ba55d3',
mediumpurple : '#9370db',
mediumseagreen : '#3cb371',
mediumslateblue : '#7b68ee',
mediumspringgreen : '#00fa9a',
mediumturquoise : '#48d1cc',
mediumvioletred : '#c71585',
midnightblue : '#191970',
mintcream : '#f5fffa',
mistyrose : '#ffe4e1',
moccasin : '#ffe4b5',
navajowhite : '#ffdead',
navy : '#000080',
oldlace : '#fdf5e6',
olive : '#808000',
olivedrab : '#6b8e23',
orange : '#ffa500',
orangered : '#ff4500',
orchid : '#da70d6',
palegoldenrod : '#eee8aa',
palegreen : '#98fb98',
paleturquoise : '#afeeee',
palevioletred : '#db7093',
papayawhip : '#ffefd5',
peachpuff : '#ffdab9',
peru : '#cd853f',
pink : '#ffc0cb',
plum : '#dda0dd',
powderblue : '#b0e0e6',
purple : '#800080',
rebeccapurple : '#663399',
red : '#ff0000',
rosybrown : '#bc8f8f',
royalblue : '#4169e1',
saddlebrown : '#8b4513',
salmon : '#fa8072',
sandybrown : '#f4a460',
seagreen : '#2e8b57',
seashell : '#fff5ee',
sienna : '#a0522d',
silver : '#c0c0c0',
skyblue : '#87ceeb',
slateblue : '#6a5acd',
slategray : '#708090',
slategrey : '#708090',
snow : '#fffafa',
springgreen : '#00ff7f',
steelblue : '#4682b4',
tan : '#d2b48c',
teal : '#008080',
thistle : '#d8bfd8',
tomato : '#ff6347',
turquoise : '#40e0d0',
violet : '#ee82ee',
wheat : '#f5deb3',
white : '#ffffff',
whitesmoke : '#f5f5f5',
yellow : '#ffff00',
yellowgreen : '#9acd32',
}
2020-06-16 09:32:48 +00:00
function hsvToRgb({ h, s, v }: ColorHSV): ColorRGB {
2020-06-17 13:16:54 +00:00
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);
2020-06-16 09:32:48 +00:00
switch (i % 6) {
case 0:
2020-06-17 15:44:50 +00:00
return { r: v, g: t, b: p };
2020-06-16 09:32:48 +00:00
case 1:
2020-06-17 15:44:50 +00:00
return { r: q, g: v, b: p };
2020-06-16 09:32:48 +00:00
case 2:
2020-06-17 15:44:50 +00:00
return { r: p, g: v, b: t };
2020-06-16 09:32:48 +00:00
case 3:
2020-06-17 15:44:50 +00:00
return { r: p, g: q, b: v };
2020-06-16 09:32:48 +00:00
case 4:
2020-06-17 15:44:50 +00:00
return { r: t, g: p, b: v };
2020-06-16 09:32:48 +00:00
case 5:
2020-06-17 15:44:50 +00:00
return { r: v, g: p, b: q };
2020-06-17 13:16:54 +00:00
default:
throw new Error("unreacheable");
2020-06-16 09:32:48 +00:00
}
}
function rgbToHsv({ r, g, b }: ColorRGB): ColorHSV {
2020-06-17 13:16:54 +00:00
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const v = max;
2020-06-16 09:32:48 +00:00
2020-06-17 13:16:54 +00:00
const d = max - min;
const s = max === 0 ? 0 : d / max;
2020-06-16 09:32:48 +00:00
2020-06-17 13:16:54 +00:00
let h;
if (max === min) {
2020-06-16 09:32:48 +00:00
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;
2020-06-17 13:16:54 +00:00
default:
throw new Error("unreacheable");
2020-06-16 09:32:48 +00:00
}
h /= 6;
}
return { h, s, v };
}
// Hacky way to get RGB values FOR SURE!
2020-06-20 15:13:49 +00:00
const nameToRGB = function self(name: string): ColorRGB {
if ( namedColors[name] ) {
return parseColor(namedColors[name]);
}
2020-06-16 09:32:48 +00:00
// Create fake div
2020-06-20 15:13:49 +00:00
self.fakeDiv = self.fakeDiv || (() => {
const tmp = document.createElement("div");
Object.assign(tmp.style, {
position: 'fixed';
height: 0;
width: 0;
top: -99;
left: -99;
});
document.body.appendChild(tmp);
return tmp;
})();
2020-06-16 09:32:48 +00:00
2020-06-20 15:13:49 +00:00
self.fakeDiv.style.color = name;
2020-06-16 09:32:48 +00:00
2020-06-20 15:13:49 +00:00
// Get color of div
const cs = window.getComputedStyle(self.fakeDiv);
const pv = cs.color; //TODO slow
2020-06-16 09:32:48 +00:00
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
2020-06-20 15:13:49 +00:00
if (input[0] === "#") {
2020-06-17 13:16:54 +00:00
const collen = (input.length - 1) / 3;
const fact = [17, 1, 0.062272][collen - 1];
2020-06-20 15:13:49 +00:00
return { //TODO refactor with substring
2020-06-16 09:32:48 +00:00
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: {
2020-06-17 13:16:54 +00:00
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}`;
2020-06-16 09:32:48 +00:00
}
2020-06-17 13:16:54 +00:00
default:
return "#000";
2020-06-16 09:32:48 +00:00
}
}
export function darken(color: string, format: ColorFmt): string {
const col = parseColor(color);
const hsl = rgbToHsv(col);
if (hsl.s < 0.15) {
2020-06-16 10:51:24 +00:00
hsl.h = 0.6;
2020-06-16 09:32:48 +00:00
hsl.s = 0.5;
hsl.v = Math.max(0.2, 1 - hsl.v);
2020-06-17 13:16:54 +00:00
} else if (hsl.v > 0.5) {
hsl.v = 0.4;
if (hsl.s > 0.2) {
hsl.s = Math.min(1, hsl.s + 0.2);
2020-06-16 09:32:48 +00:00
}
}
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);
}