Theme customizer now uses HSL values

scripts/Actions/Theme.ts

@@ -1,4 +1,5 @@
 import AnimeNotifier from "../AnimeNotifier"
+import { hexToHSL } from "scripts/Utils"
 
 let currentThemeName = "light"
 let previewTimeoutID: number = 0
@@ -11,7 +12,6 @@ const themes = {
 		"link-color-h": "45",
 		"link-color-s": "100%",
 		"link-color-l": "66%",
-		"link-hover-color-l": "76%",
 
 		"text-color-l": "90%",
 		"bg-color-l": "18%",
@@ -54,7 +54,6 @@ const themes = {
 	// 	"base-theme": "dark",
 	// 	"link-color-h": "0",
 	// 	"link-color-l": "78%",
-	// 	"link-hover-color-l": "88%",
 	// 	"bg-color-s": "70%"
 	// },
 	// "sakura": {
@@ -62,7 +61,6 @@ const themes = {
 	// 	"link-color-h": "348",
 	// 	"link-color-s": "100%",
 	// 	"link-color-l": "53%",
-	// 	"link-hover-color-l": "58%",
 	// 	"bg-color-h": "348",
 	// 	"bg-color-s": "100%",
 	// 	"bg-color-l": "86%",
@@ -169,12 +167,19 @@ export function applyTheme(themeName: string) {
 export function pickColor(_: AnimeNotifier, element: HTMLElement) {
 	let rootStyle = document.documentElement.style
 	let variableName = `--${element.dataset.variable}`
-
 	let input = document.createElement("input")
 	input.type = "color"
 
 	input.oninput = () => {
-		rootStyle.setProperty(variableName, input.value)
+		let color = hexToHSL(input.value)
+
+		if(!color) {
+			return
+		}
+
+		rootStyle.setProperty(variableName+"-h", (color.h * 360).toString())
+		rootStyle.setProperty(variableName+"-s", (color.s * 100).toString() + "%")
+		rootStyle.setProperty(variableName+"-l", (color.l * 100).toString() + "%")
 	}
 
 	input.click()

scripts/Utils/hexToHSL.ts

@@ -0,0 +1,45 @@
+export function hexToHSL(hex: string) {
+	let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+
+	if(!result) {
+		return null
+	}
+
+	let r = parseInt(result[1], 16)
+	let g = parseInt(result[2], 16)
+	let b = parseInt(result[3], 16)
+
+	r /= 255
+	g /= 255
+	b /= 255
+
+	let max = Math.max(r, g, b)
+	let min = Math.min(r, g, b)
+
+	let h = 0
+	let s = 0
+	let l = (max + min) / 2
+
+	if(max == min) {
+		h = s = 0
+	} else {
+		let d = max - min
+		s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+		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, l}
+}

scripts/Utils/index.ts

@@ -1,6 +1,7 @@
 export * from "./supportsWebP"
 export * from "./delay"
 export * from "./findAll"
+export * from "./hexToHSL"
 export * from "./plural"
 export * from "./requestIdleCallback"
 export * from "./swapElements"