blah blah help me

2025-05-18 18:49:17 -04:00 · 2025-05-18 18:49:17 -04:00 · 3bc40382d6
commit 3bc40382d6
parent fc36802567
16 changed files with 396 additions and 64 deletions
--- a/bun.lock
+++ b/bun.lock
@ -6,6 +6,7 @@
      "dependencies": {
        "@fontsource/roboto": "^5.2.5",
        "@fontsource/roboto-mono": "^5.2.5",
+        "@material/material-color-utilities": "^0.3.0",
        "@mdui/icons": "^1.0.3",
        "@speed-highlight/core": "latest",
        "mdui": "^2.1.4",
--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
 	"dependencies": {
 		"@fontsource/roboto": "^5.2.5",
 		"@fontsource/roboto-mono": "^5.2.5",
+		"@material/material-color-utilities": "^0.3.0",
 		"@mdui/icons": "^1.0.3",
 		"@speed-highlight/core": "latest",
 		"mdui": "^2.1.4",
--- a/src/back/index.ts
+++ b/src/back/index.ts
@ -1,5 +1,5 @@
-import Hyperate from "./Sockets/Hyperate";
-import Lanyard from "./Sockets/Lanyard";
+import Hyperate from "./utilities/sockets/Hyperate";
+import Lanyard from "./utilities/sockets/Lanyard";

 const development = process.env.NODE_ENV === "development";

--- a/src/back/utilities/sockets/Hyperate.ts
+++ b/src/back/utilities/sockets/Hyperate.ts
--- a/src/back/utilities/sockets/Lanyard.ts
+++ b/src/back/utilities/sockets/Lanyard.ts
--- a/src/back/utilities/themer/index.ts
+++ b/src/back/utilities/themer/index.ts
@ -0,0 +1,111 @@
+import {
+	argbFromHex,
+	argbFromRgb,
+	argbFromRgba,
+	blueFromArgb,
+	CorePalette,
+	greenFromArgb,
+	redFromArgb,
+	Scheme,
+} from "@material/material-color-utilities";
+import { toKebabCase } from "@mdui/jq/shared/helper.js";
+
+const rgbFromArgb = (source: number): string => {
+	const red = redFromArgb(source);
+	const green = greenFromArgb(source);
+	const blue = blueFromArgb(source);
+
+	return [red, green, blue].join(",");
+};
+
+const getFromSource = (source: number): string => {
+	const scheme = Scheme.dark(source).toJSON();
+
+	const palette = CorePalette.of(source);
+
+	Object.assign(scheme, {
+		"surface-dim": palette.n1.tone(6),
+		"surface-bright": palette.n1.tone(24),
+		"surface-container-lowest": palette.n1.tone(4),
+		"surface-container-low": palette.n1.tone(10),
+		"surface-container": palette.n1.tone(12),
+		"surface-container-high": palette.n1.tone(17),
+		"surface-container-highest": palette.n1.tone(22),
+		"surface-tint-color": scheme.primary,
+	});
+
+	// 扩充自定义颜色
+
+	// 根据配色方案生成 css 变量
+	const colorVar = (callback: (token: string, rgb: string) => string) => {
+		return Object.entries(scheme)
+			.map(([key, value]) => callback(toKebabCase(key), rgbFromArgb(value)))
+			.join("");
+	};
+
+	// CSS 文本
+	const cssText = `${colorVar((token, rgb) => `--mdui-color-${token}:${rgb};`)}`;
+
+	return cssText;
+};
+
+export const getTheme = (color: string) => {
+	let source = argbFromHex("#FFF");
+
+	if (color.startsWith("#")) {
+		source = argbFromHex(color);
+	} else {
+		const [r, g, b, a] = color.split(",");
+
+		const red = r || "";
+		const redExists =
+			red.length > 0 &&
+			red.length < 4 &&
+			!Number.isNaN(Number.parseInt(red)) &&
+			Number.parseInt(red) >= 0 &&
+			Number.parseInt(red) <= 255;
+
+		const green = g || "";
+		const greenExists =
+			green.length > 0 &&
+			green.length < 4 &&
+			!Number.isNaN(Number.parseInt(green)) &&
+			Number.parseInt(green) >= 0 &&
+			Number.parseInt(green) <= 255;
+
+		const blue = b || "";
+		const blueExists =
+			blue.length > 0 &&
+			blue.length < 4 &&
+			!Number.isNaN(Number.parseInt(blue)) &&
+			Number.parseInt(blue) >= 0 &&
+			Number.parseInt(blue) <= 255;
+
+		const alpha = a || "";
+		const alphaExists =
+			alpha.length > 0 &&
+			alpha.length < 4 &&
+			!Number.isNaN(Number.parseFloat(alpha)) &&
+			Number.parseFloat(alpha) >= 0 &&
+			Number.parseFloat(alpha) <= 1;
+
+		if (redExists && greenExists && blueExists) {
+			if (alphaExists) {
+				source = argbFromRgba({
+					r: Number.parseInt(red),
+					g: Number.parseInt(green),
+					b: Number.parseInt(blue),
+					a: Number.parseFloat(alpha),
+				});
+			} else {
+				source = argbFromRgb(
+					Number.parseInt(red),
+					Number.parseInt(green),
+					Number.parseInt(blue),
+				);
+			}
+		}
+	}
+
+	return getFromSource(source);
+};
--- a/src/front/colors.css
+++ b/src/front/colors.css
@ -0,0 +1,239 @@
+.online {
+    --mdui-color-primary: 2, 230, 0;
+    --mdui-color-on-primary: 1, 58, 0;
+    --mdui-color-primary-container: 1, 83, 0;
+    --mdui-color-on-primary-container: 119, 255, 97;
+    --mdui-color-secondary: 187, 203, 178;
+    --mdui-color-on-secondary: 38, 52, 34;
+    --mdui-color-secondary-container: 60, 75, 55;
+    --mdui-color-on-secondary-container: 215, 232, 205;
+    --mdui-color-tertiary: 160, 207, 210;
+    --mdui-color-on-tertiary: 0, 55, 57;
+    --mdui-color-tertiary-container: 30, 77, 80;
+    --mdui-color-on-tertiary-container: 188, 235, 238;
+    --mdui-color-error: 255, 180, 171;
+    --mdui-color-on-error: 105, 0, 5;
+    --mdui-color-error-container: 147, 0, 10;
+    --mdui-color-on-error-container: 255, 180, 171;
+    --mdui-color-background: 26, 28, 24;
+    --mdui-color-on-background: 226, 227, 220;
+    --mdui-color-surface: 26, 28, 24;
+    --mdui-color-on-surface: 226, 227, 220;
+    --mdui-color-surface-variant: 67, 72, 63;
+    --mdui-color-on-surface-variant: 195, 200, 188;
+    --mdui-color-outline: 141, 147, 135;
+    --mdui-color-outline-variant: 67, 72, 63;
+    --mdui-color-shadow: 0, 0, 0;
+    --mdui-color-scrim: 0, 0, 0;
+    --mdui-color-inverse-surface: 226, 227, 220;
+    --mdui-color-inverse-on-surface: 47, 49, 45;
+    --mdui-color-inverse-primary: 2, 110, 0;
+    --mdui-color-surface-dim: 18, 20, 16;
+    --mdui-color-surface-bright: 56, 58, 53;
+    --mdui-color-surface-container-lowest: 13, 15, 11;
+    --mdui-color-surface-container-low: 26, 28, 24;
+    --mdui-color-surface-container: 30, 32, 28;
+    --mdui-color-surface-container-high: 40, 43, 39;
+    --mdui-color-surface-container-highest: 51, 53, 49;
+    --mdui-color-surface-tint-color: 2, 230, 0;
+}
+
+.idle {
+    --mdui-color-primary: 205, 205, 0;
+    --mdui-color-on-primary: 50, 50, 0;
+    --mdui-color-primary-container: 73, 73, 0;
+    --mdui-color-on-primary-container: 234, 234, 0;
+    --mdui-color-secondary: 202, 200, 165;
+    --mdui-color-on-secondary: 50, 50, 24;
+    --mdui-color-secondary-container: 73, 72, 45;
+    --mdui-color-on-secondary-container: 231, 228, 191;
+    --mdui-color-tertiary: 164, 208, 189;
+    --mdui-color-on-tertiary: 11, 55, 42;
+    --mdui-color-tertiary-container: 37, 78, 64;
+    --mdui-color-on-tertiary-container: 191, 236, 216;
+    --mdui-color-error: 255, 180, 171;
+    --mdui-color-on-error: 105, 0, 5;
+    --mdui-color-error-container: 147, 0, 10;
+    --mdui-color-on-error-container: 255, 180, 171;
+    --mdui-color-background: 28, 28, 23;
+    --mdui-color-on-background: 230, 226, 217;
+    --mdui-color-surface: 28, 28, 23;
+    --mdui-color-on-surface: 230, 226, 217;
+    --mdui-color-surface-variant: 72, 71, 58;
+    --mdui-color-on-surface-variant: 202, 199, 182;
+    --mdui-color-outline: 147, 145, 130;
+    --mdui-color-outline-variant: 72, 71, 58;
+    --mdui-color-shadow: 0, 0, 0;
+    --mdui-color-scrim: 0, 0, 0;
+    --mdui-color-inverse-surface: 230, 226, 217;
+    --mdui-color-inverse-on-surface: 49, 49, 43;
+    --mdui-color-inverse-primary: 98, 98, 0;
+    --mdui-color-surface-dim: 20, 20, 15;
+    --mdui-color-surface-bright: 58, 57, 51;
+    --mdui-color-surface-container-lowest: 15, 14, 10;
+    --mdui-color-surface-container-low: 28, 28, 23;
+    --mdui-color-surface-container: 32, 32, 26;
+    --mdui-color-surface-container-high: 43, 42, 37;
+    --mdui-color-surface-container-highest: 54, 53, 47;
+    --mdui-color-surface-tint-color: 205, 205, 0;
+}
+
+.dnd {
+    --mdui-color-primary: 255, 180, 168;
+    --mdui-color-on-primary: 105, 1, 0;
+    --mdui-color-primary-container: 147, 1, 0;
+    --mdui-color-on-primary-container: 255, 218, 212;
+    --mdui-color-secondary: 231, 189, 182;
+    --mdui-color-on-secondary: 68, 41, 37;
+    --mdui-color-secondary-container: 93, 63, 59;
+    --mdui-color-on-secondary-container: 255, 218, 212;
+    --mdui-color-tertiary: 222, 196, 140;
+    --mdui-color-on-tertiary: 62, 46, 4;
+    --mdui-color-tertiary-container: 86, 68, 25;
+    --mdui-color-on-tertiary-container: 251, 223, 166;
+    --mdui-color-error: 255, 180, 171;
+    --mdui-color-on-error: 105, 0, 5;
+    --mdui-color-error-container: 147, 0, 10;
+    --mdui-color-on-error-container: 255, 180, 171;
+    --mdui-color-background: 32, 26, 25;
+    --mdui-color-on-background: 237, 224, 221;
+    --mdui-color-surface: 32, 26, 25;
+    --mdui-color-on-surface: 237, 224, 221;
+    --mdui-color-surface-variant: 83, 67, 65;
+    --mdui-color-on-surface-variant: 216, 194, 190;
+    --mdui-color-outline: 160, 140, 137;
+    --mdui-color-outline-variant: 83, 67, 65;
+    --mdui-color-shadow: 0, 0, 0;
+    --mdui-color-scrim: 0, 0, 0;
+    --mdui-color-inverse-surface: 237, 224, 221;
+    --mdui-color-inverse-on-surface: 54, 47, 46;
+    --mdui-color-inverse-primary: 192, 1, 0;
+    --mdui-color-surface-dim: 24, 18, 17;
+    --mdui-color-surface-bright: 63, 55, 54;
+    --mdui-color-surface-container-lowest: 18, 13, 12;
+    --mdui-color-surface-container-low: 32, 26, 25;
+    --mdui-color-surface-container: 37, 30, 29;
+    --mdui-color-surface-container-high: 47, 40, 39;
+    --mdui-color-surface-container-highest: 59, 51, 50;
+    --mdui-color-surface-tint-color: 255, 180, 168;
+}
+
+.offline {
+    --mdui-color-primary: 79, 216, 235;
+    --mdui-color-on-primary: 0, 54, 61;
+    --mdui-color-primary-container: 0, 79, 88;
+    --mdui-color-on-primary-container: 151, 240, 255;
+    --mdui-color-secondary: 177, 203, 208;
+    --mdui-color-on-secondary: 28, 52, 56;
+    --mdui-color-secondary-container: 51, 75, 79;
+    --mdui-color-on-secondary-container: 205, 231, 236;
+    --mdui-color-tertiary: 186, 198, 234;
+    --mdui-color-on-tertiary: 36, 48, 77;
+    --mdui-color-tertiary-container: 59, 70, 100;
+    --mdui-color-on-tertiary-container: 218, 226, 255;
+    --mdui-color-error: 255, 180, 171;
+    --mdui-color-on-error: 105, 0, 5;
+    --mdui-color-error-container: 147, 0, 10;
+    --mdui-color-on-error-container: 255, 180, 171;
+    --mdui-color-background: 25, 28, 29;
+    --mdui-color-on-background: 225, 227, 227;
+    --mdui-color-surface: 25, 28, 29;
+    --mdui-color-on-surface: 225, 227, 227;
+    --mdui-color-surface-variant: 63, 72, 74;
+    --mdui-color-on-surface-variant: 191, 200, 202;
+    --mdui-color-outline: 137, 146, 148;
+    --mdui-color-outline-variant: 63, 72, 74;
+    --mdui-color-shadow: 0, 0, 0;
+    --mdui-color-scrim: 0, 0, 0;
+    --mdui-color-inverse-surface: 225, 227, 227;
+    --mdui-color-inverse-on-surface: 46, 49, 50;
+    --mdui-color-inverse-primary: 0, 104, 116;
+    --mdui-color-surface-dim: 16, 20, 21;
+    --mdui-color-surface-bright: 54, 58, 58;
+    --mdui-color-surface-container-lowest: 11, 15, 15;
+    --mdui-color-surface-container-low: 25, 28, 29;
+    --mdui-color-surface-container: 29, 32, 33;
+    --mdui-color-surface-container-high: 39, 43, 43;
+    --mdui-color-surface-container-highest: 50, 53, 54;
+    --mdui-color-surface-tint-color: 79, 216, 235;
+}
+
+.streaming {
+    --mdui-color-primary: 255, 171, 243;
+    --mdui-color-on-primary: 91, 0, 91;
+    --mdui-color-primary-container: 129, 0, 129;
+    --mdui-color-on-primary-container: 255, 215, 245;
+    --mdui-color-secondary: 218, 191, 210;
+    --mdui-color-on-secondary: 61, 43, 58;
+    --mdui-color-secondary-container: 85, 65, 81;
+    --mdui-color-on-secondary-container: 247, 218, 239;
+    --mdui-color-tertiary: 245, 184, 167;
+    --mdui-color-on-tertiary: 76, 38, 27;
+    --mdui-color-tertiary-container: 102, 60, 47;
+    --mdui-color-on-tertiary-container: 255, 219, 209;
+    --mdui-color-error: 255, 180, 171;
+    --mdui-color-on-error: 105, 0, 5;
+    --mdui-color-error-container: 147, 0, 10;
+    --mdui-color-on-error-container: 255, 180, 171;
+    --mdui-color-background: 30, 26, 29;
+    --mdui-color-on-background: 233, 224, 228;
+    --mdui-color-surface: 30, 26, 29;
+    --mdui-color-on-surface: 233, 224, 228;
+    --mdui-color-surface-variant: 78, 68, 75;
+    --mdui-color-on-surface-variant: 209, 194, 203;
+    --mdui-color-outline: 154, 141, 149;
+    --mdui-color-outline-variant: 78, 68, 75;
+    --mdui-color-shadow: 0, 0, 0;
+    --mdui-color-scrim: 0, 0, 0;
+    --mdui-color-inverse-surface: 233, 224, 228;
+    --mdui-color-inverse-on-surface: 52, 47, 50;
+    --mdui-color-inverse-primary: 169, 0, 169;
+    --mdui-color-surface-dim: 22, 18, 21;
+    --mdui-color-surface-bright: 61, 56, 59;
+    --mdui-color-surface-container-lowest: 17, 13, 16;
+    --mdui-color-surface-container-low: 30, 26, 29;
+    --mdui-color-surface-container: 35, 30, 33;
+    --mdui-color-surface-container-high: 45, 41, 44;
+    --mdui-color-surface-container-highest: 56, 51, 54;
+    --mdui-color-surface-tint-color: 255, 171, 243;
+}
+
+.pfp {
+    --mdui-color-primary: 255, 183, 123;
+    --mdui-color-on-primary: 77, 39, 0;
+    --mdui-color-primary-container: 109, 58, 0;
+    --mdui-color-on-primary-container: 255, 220, 194;
+    --mdui-color-secondary: 227, 192, 166;
+    --mdui-color-on-secondary: 65, 44, 25;
+    --mdui-color-secondary-container: 90, 66, 46;
+    --mdui-color-on-secondary-container: 255, 220, 194;
+    --mdui-color-tertiary: 196, 203, 151;
+    --mdui-color-on-tertiary: 46, 51, 13;
+    --mdui-color-tertiary-container: 68, 74, 34;
+    --mdui-color-on-tertiary-container: 224, 231, 177;
+    --mdui-color-error: 255, 180, 171;
+    --mdui-color-on-error: 105, 0, 5;
+    --mdui-color-error-container: 147, 0, 10;
+    --mdui-color-on-error-container: 255, 180, 171;
+    --mdui-color-background: 32, 27, 23;
+    --mdui-color-on-background: 236, 224, 218;
+    --mdui-color-surface: 32, 27, 23;
+    --mdui-color-on-surface: 236, 224, 218;
+    --mdui-color-surface-variant: 81, 68, 59;
+    --mdui-color-on-surface-variant: 214, 195, 182;
+    --mdui-color-outline: 158, 142, 130;
+    --mdui-color-outline-variant: 81, 68, 59;
+    --mdui-color-shadow: 0, 0, 0;
+    --mdui-color-scrim: 0, 0, 0;
+    --mdui-color-inverse-surface: 236, 224, 218;
+    --mdui-color-inverse-on-surface: 53, 47, 43;
+    --mdui-color-inverse-primary: 143, 78, 0;
+    --mdui-color-surface-dim: 23, 18, 15;
+    --mdui-color-surface-bright: 62, 56, 51;
+    --mdui-color-surface-container-lowest: 18, 13, 10;
+    --mdui-color-surface-container-low: 32, 27, 23;
+    --mdui-color-surface-container: 36, 31, 27;
+    --mdui-color-surface-container-high: 47, 41, 37;
+    --mdui-color-surface-container-highest: 58, 52, 47;
+    --mdui-color-surface-tint-color: 255, 183, 123;
+}
--- a/src/front/components/Lanyard/index.tsx
+++ b/src/front/components/Lanyard/index.tsx
@ -1,15 +1,7 @@
 import { highlightElement } from "@speed-highlight/core";
 import { createRef } from "tsx-dom";
-import { artist } from "../../utilities/artist";
 import socket from "../../utilities/socket";

-const colorMap = {
-	online: "#00ff00",
-	idle: "#ffff00",
-	dnd: "#ff0000",
-	offline: "",
-	streaming: "#ff00ff",
-};

 const activityTypes: Record<number, string> = {
 	0: "Playing",
@ -28,9 +20,9 @@ export default () => {

 		const streamingActivity = lanyard.activities.find((act) => act.type === 1);
 		if (streamingActivity) {
-			artist(colorMap.streaming);
+			document.documentElement.className = "streaming";
 		} else {
-			artist(colorMap[lanyard.discord_status]);
+			document.documentElement.className = lanyard.discord_status;
 		}

 		if (lanyard.activities.length === 0) {
--- a/src/front/components/pages/About/index.tsx
+++ b/src/front/components/pages/About/index.tsx
@ -4,24 +4,9 @@ import "mdui/components/avatar";
 import "mdui/components/segmented-button-group";
 import "mdui/components/segmented-button";

-import { getColorFromImage } from "mdui/functions/getColorFromImage";
-import { artist } from "../../../utilities/artist";
 import Hyperate from "../../Hyperate";
 import Lanyard from "../../Lanyard";

-const Abyssinian = new Image();
-Abyssinian.src = "/public/Abyssinian/default.png";
-Abyssinian.onload = async () => {
-	const profilePicture = document.getElementById(
-		"profilePicture",
-	) as HTMLElement;
-
-	artist(await getColorFromImage(Abyssinian), profilePicture);
-
-	profilePicture.setAttribute("src", Abyssinian.src);
-	profilePicture.innerText = "";
-};
-
 export default () => {
 	return (
 		<div
@ -34,11 +19,11 @@ export default () => {
 			}}
 		>
 			<mdui-card
+				// @ts-expect-error; variant is not in the types for some reason?
 				variant="filled"
 				style={{
 					width: "90%",
 					padding: ".5rem",
-					// center the contents
 					display: "flex",
 					justifyContent: "center",
 					alignItems: "center",
@ -51,21 +36,18 @@ export default () => {
 					style={{
 						width: "5rem",
 						height: "inherit",
-						border: "2px solid rgb(var(--status-color))",
+						border: "2px solid rgb(var(--mdui-color-primary))",
 					}}
-					id="profilePicture"
-				>
-					S
-				</mdui-avatar>
-				<h1>Seth</h1>
-				{/* make important text bold */}
+					src="/public/Abyssinian/default.png"
+					class="pfp"
+				/>
 				<p>
-					A <strong>Dedicated</strong> Backend Developer, with many{" "}
+					Seth, the <strong>dedicated</strong> backend developer, with many{" "}
 					<strong>passions</strong>.
 					<br />
 					<br />
 					<mdui-segmented-button-group full-width>
-						<mdui-segmented-button>high-fidelity audio</mdui-segmented-button>
+						<mdui-segmented-button>hi-fi audio</mdui-segmented-button>
 						<mdui-segmented-button>gaming</mdui-segmented-button>
 						<mdui-segmented-button>development</mdui-segmented-button>
 					</mdui-segmented-button-group>
@ -79,6 +61,7 @@ export default () => {
 			/>

 			<mdui-card
+				// @ts-expect-error; variant is not in the types for some reason?
 				variant="filled"
 				style={{
 					width: "90%",
@ -88,8 +71,6 @@ export default () => {
 					justifyContent: "center",
 					alignItems: "center",
 					flexDirection: "column",
-
-					//textAlign: "center",
 				}}
 			>
 				<Lanyard />
@ -102,6 +83,7 @@ export default () => {
 			/>

 			<mdui-card
+				// @ts-expect-error; variant is not in the types for some reason?
 				variant="filled"
 				style={{
 					width: "90%",
@ -112,7 +94,7 @@ export default () => {
 					alignItems: "center",
 					flexDirection: "column",

-					//textAlign: "center",
+					textAlign: "center",
 				}}
 			>
 				<Hyperate />
--- a/src/front/index.css
+++ b/src/front/index.css
@ -2,6 +2,7 @@
@import "../../node_modules/@fontsource/roboto-mono/latin-400.css";

@import "../../node_modules/mdui/mdui.css";
+@import "./colors.css";

 :not(:defined) {
 	visibility: hidden;
@ -16,6 +17,9 @@ body {
 	margin: 0;
 	padding: 0;
 	font-family: "Roboto", sans-serif;
+
+	color: rgb(var(--mdui-color-on-background));
+	background-color: rgb(var(--mdui-color-background));
 }

 [class*="shj-lang-"] {
--- a/src/front/index.html
+++ b/src/front/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="mdui-theme-dark">
+<html lang="en" class="offline">

 <head>
    <meta charset="UTF-8">
--- a/src/front/index.tsx
+++ b/src/front/index.tsx
@ -1,12 +1,9 @@
 import "tsx-dom";

-import { artist } from "./utilities/artist";
 import "./utilities/clicker";

 import App from "./App";

-artist();
-
 document.body.appendChild(<App />);

 // You're garbage, let me collect you.
--- a/src/front/utilities/artist/index.ts
+++ b/src/front/utilities/artist/index.ts
@ -1,18 +0,0 @@
-import { setColorScheme } from "mdui/functions/setColorScheme";
-
-export const artist = (color?: string, element?: HTMLElement) => {
-	if (color?.startsWith("#")) {
-		setColorScheme(color, {
-			target: element || document.documentElement,
-		});
-	} else {
-		setColorScheme("#FFF");
-	}
-
-	document.body.style.setProperty(
-		"--status-color",
-		getComputedStyle(document.documentElement).getPropertyValue(
-			"--mdui-color-primary",
-		),
-	);
-};
--- a/src/front/utilities/socket/index.ts
+++ b/src/front/utilities/socket/index.ts
@ -22,6 +22,10 @@ class Socket extends EventTarget {
 					this.emitHyperate(data.hr);
 					break;
 				}
+				case "color": {
+					this.emitColor(data);
+					break;
+				}
 				case "echo": {
 					//console.log("Echo: ", data);
 					break;
@ -53,6 +57,9 @@ class Socket extends EventTarget {
 	emitHyperate(heartRate: number) {
 		this.dispatchEvent(new CustomEvent("hyperate", { detail: heartRate }));
 	}
+	emitColor(styleSheet: string) {
+		this.dispatchEvent(new CustomEvent("color", { detail: styleSheet }));
+	}
 }

 export default new Socket(`${protocol.replace("http", "ws")}//${host}/api/ws`);
--- a/src/index.ts
+++ b/src/index.ts
@ -84,9 +84,10 @@ const server = serve({
 				true,
 			);
 		},
-		message: (ws, msg) => {
+		message: (ws, msg: string) => {
 			if (msg === "ping") ws.send("pong", true);
 			if (msg === "pong") ws.send("ping", true);
+
 			return;
 		},
 	},
--- a/test.ts
+++ b/test.ts
@ -0,0 +1,15 @@
+import { getTheme } from "./src/back/utilities/themer";
+
+//console.log(getTheme("#ffddc4"));
+
+const colorMap = {
+	online: "#00ff00",
+	idle: "#ffff00",
+	dnd: "#ff0000",
+	offline: "",
+	streaming: "#ff00ff",
+};
+
+Object.entries(colorMap).forEach(([key, value]) => {
+	console.log(key, getTheme(value), "\n\n");
+});