From 0c349117dadcde569fd6f0cd1ca5e6501d8d6994 Mon Sep 17 00:00:00 2001
From: Sqaaakoi <sqaaakoi-git@sqaaakoi.xyz>
Date: Mon, 20 Jan 2025 05:31:16 +1300
Subject: [PATCH] ClientTheme, Styles: Partial styles and convert ClientTheme
 to use Styles API

---
 src/api/Styles.ts                 |  8 +++--
 src/plugins/clientTheme/index.tsx | 56 +++++++++++++++----------------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/api/Styles.ts b/src/api/Styles.ts
index 6f93ef6c6..40a5047c5 100644
--- a/src/api/Styles.ts
+++ b/src/api/Styles.ts
@@ -25,6 +25,8 @@ export interface Style {
     edit?(source: string): string;
 }
 
+export type PartialStyle = Partial<Style> & Pick<Style, "name">;
+
 export function requireStyle(name: string) {
     const style = styleMap.get(name);
     if (!style) throw new Error(`Style "${name}" does not exist`);
@@ -75,12 +77,12 @@ export function disableStyle(style: Style) {
  * @param style The new style object
  * @see {@link enableStyle} for info on getting the name of an imported style
  */
-export function setStyle(style: Style) {
-    if (!styleMap.has(style.name)) styleMap.set(style.name, style);
+export function setStyle(style: PartialStyle) {
+    if (!styleMap.has(style.name)) styleMap.set(style.name, { name: style.name, source: "", enabled: true });
     const storedStyle = requireStyle(style.name);
     Object.assign(storedStyle, style);
 
-    (style.enabled ? enableStyle : disableStyle)(style);
+    (style.enabled ? enableStyle : disableStyle)(storedStyle);
 }
 
 /**
diff --git a/src/plugins/clientTheme/index.tsx b/src/plugins/clientTheme/index.tsx
index 4c1668aae..c0e447de0 100644
--- a/src/plugins/clientTheme/index.tsx
+++ b/src/plugins/clientTheme/index.tsx
@@ -7,6 +7,7 @@
 import "./clientTheme.css";
 
 import { definePluginSettings } from "@api/Settings";
+import { setStyle } from "@api/Styles";
 import { Devs } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
@@ -124,8 +125,7 @@ export default definePlugin({
     },
 
     stop() {
-        document.getElementById("clientThemeVars")?.remove();
-        document.getElementById("clientThemeOffsets")?.remove();
+        ["vars", "offsets", "lightModeFixes"].forEach(i => setStyle({ name: `ClientTheme-${i}`, enabled: false }));
     }
 });
 
@@ -158,10 +158,14 @@ function generateColorOffsets(styles) {
         variableMatch = variableRegex.exec(styles);
     }
 
-    createStyleSheet("clientThemeOffsets", [
-        `.theme-light {\n ${genThemeSpecificOffsets(variableLightness, lightVariableRegex, "--primary-345-hsl")} \n}`,
-        `.theme-dark {\n ${genThemeSpecificOffsets(variableLightness, darkVariableRegex, "--primary-600-hsl")} \n}`,
-    ].join("\n\n"));
+    setStyle({
+        name: "ClientTheme-offsets",
+        source: [
+            `.theme-light {\n ${genThemeSpecificOffsets(variableLightness, lightVariableRegex, "--primary-345-hsl")} \n}`,
+            `.theme-dark {\n ${genThemeSpecificOffsets(variableLightness, darkVariableRegex, "--primary-600-hsl")} \n}`,
+        ].join("\n\n"),
+        enabled: true
+    });
 }
 
 function generateLightModeFixes(styles) {
@@ -187,11 +191,15 @@ function generateLightModeFixes(styles) {
     // create css to reassign every var
     const reassignVariables = `.theme-light {\n ${lightBgVars.map(variable => `${variable}: var(--primary-100);`).join("\n")} \n}`;
 
-    createStyleSheet("clientThemeLightModeFixes", [
-        reassignBackgrounds,
-        reassignBackgroundColors,
-        reassignVariables,
-    ].join("\n\n"));
+    setStyle({
+        name: "ClientTheme-lightModeFixes",
+        source: [
+            reassignBackgrounds,
+            reassignBackgroundColors,
+            reassignVariables,
+        ].join("\n\n"),
+        enabled: true
+    });
 }
 
 function captureOne(str, regex) {
@@ -206,23 +214,15 @@ function mapReject(arr, mapFunc) {
 function updateColorVars(color: string) {
     const { hue, saturation, lightness } = hexToHSL(color);
 
-    let style = document.getElementById("clientThemeVars");
-    if (!style)
-        style = createStyleSheet("clientThemeVars");
-
-    style.textContent = `:root {
-        --theme-h: ${hue};
-        --theme-s: ${saturation}%;
-        --theme-l: ${lightness}%;
-    }`;
-}
-
-function createStyleSheet(id, content = "") {
-    const style = document.createElement("style");
-    style.setAttribute("id", id);
-    style.textContent = content.split("\n").map(line => line.trim()).join("\n");
-    document.body.appendChild(style);
-    return style;
+    setStyle({
+        name: "ClientTheme-vars",
+        source: `:root {
+            --theme-h: ${hue};
+            --theme-s: ${saturation}%;
+            --theme-l: ${lightness}%;
+        }`,
+        enabled: true
+    });
 }
 
 // returns all of discord's native styles in a single string