From 81c3b390298b0d5e03821599281c280d491dcdff Mon Sep 17 00:00:00 2001
From: Sqaaakoi <sqaaakoi-git@sqaaakoi.xyz>
Date: Mon, 20 Jan 2025 03:58:48 +1300
Subject: [PATCH] Styles, Themes: Support themes and Quick CSS using the Styles
 API

---
 src/api/Styles.ts     | 19 +++++++++++++----
 src/utils/quickCss.ts | 48 ++++++++++++++++++-------------------------
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/src/api/Styles.ts b/src/api/Styles.ts
index d9bdc9aa4..eace71f66 100644
--- a/src/api/Styles.ts
+++ b/src/api/Styles.ts
@@ -46,11 +46,12 @@ function findDocuments() {
 export function enableStyle(name: string) {
     const style = requireStyle(name);
 
+    style.enabled = true;
+    compileStyle(style);
+
     if (style.enabled)
         return false;
 
-    style.enabled = true;
-    compileStyle(style);
     return true;
 }
 
@@ -61,13 +62,14 @@ export function enableStyle(name: string) {
  */
 export function disableStyle(name: string) {
     const style = requireStyle(name);
-    if (!style.enabled)
-        return false;
 
     findDocuments().forEach(doc => {
         [...doc.head.querySelectorAll<HTMLStyleElement>("style[data-vencord-name]")].find(e => e.dataset.vencordName === style.name)?.remove();
     });
 
+    if (!style.enabled)
+        return false;
+
     style.enabled = false;
     return true;
 }
@@ -86,6 +88,15 @@ export const toggleStyle = (name: string) => isStyleEnabled(name) ? disableStyle
  */
 export const isStyleEnabled = (name: string) => requireStyle(name).enabled ?? false;
 
+/**
+ * @param style The new style object
+ * @see {@link enableStyle} for info on getting the name of an imported style
+ */
+export function setStyle(style: Style) {
+    styleMap.set(style.name, style);
+    (style.enabled ? enableStyle : disableStyle)(style.name);
+}
+
 /**
  * Sets the variables of a style
  * ```ts
diff --git a/src/utils/quickCss.ts b/src/utils/quickCss.ts
index 6a18948d1..70a1129bf 100644
--- a/src/utils/quickCss.ts
+++ b/src/utils/quickCss.ts
@@ -17,19 +17,9 @@
 */
 
 import { Settings, SettingsStore } from "@api/Settings";
+import { setStyle } from "@api/Styles";
 import { ThemeStore } from "@webpack/common";
 
-
-let style: HTMLStyleElement;
-let themesStyle: HTMLStyleElement;
-
-function createStyle(id: string) {
-    const style = document.createElement("style");
-    style.id = id;
-    document.documentElement.append(style);
-    return style;
-}
-
 async function initSystemValues() {
     const values = await VencordNative.themes.getSystemValues();
     const variables = Object.entries(values)
@@ -37,27 +27,22 @@ async function initSystemValues() {
         .map(([k, v]) => `--${k}: ${v};`)
         .join("");
 
-    createStyle("vencord-os-theme-values").textContent = `:root{${variables}}`;
+    setStyle({
+        name: "vencord-os-theme-values",
+        source: `:root{${variables}}`,
+        enabled: true
+    });
 }
 
-export async function toggle(isEnabled: boolean) {
-    if (!style) {
-        if (isEnabled) {
-            style = createStyle("vencord-custom-css");
-            VencordNative.quickCss.addChangeListener(css => {
-                style.textContent = css;
-                // At the time of writing this, changing textContent resets the disabled state
-                style.disabled = !Settings.useQuickCss;
-            });
-            style.textContent = await VencordNative.quickCss.get();
-        }
-    } else
-        style.disabled = !isEnabled;
+export async function toggle(isEnabled: boolean, css?: string) {
+    setStyle({
+        name: "vencord-custom-css",
+        source: css || await VencordNative.quickCss.get(),
+        enabled: isEnabled
+    });
 }
 
 async function initThemes() {
-    themesStyle ??= createStyle("vencord-themes");
-
     const { themeLinks, enabledThemes } = Settings;
 
     // "darker" and "midnight" both count as dark
@@ -85,7 +70,11 @@ async function initThemes() {
         links.push(...localThemes);
     }
 
-    themesStyle.textContent = links.map(link => `@import url("${link.trim()}");`).join("\n");
+    setStyle({
+        name: "vencord-themes",
+        source: links.map(link => `@import url("${link.trim()}");`).join("\n"),
+        enabled: true
+    });
 }
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -93,6 +82,9 @@ document.addEventListener("DOMContentLoaded", () => {
     initThemes();
 
     toggle(Settings.useQuickCss);
+    VencordNative.quickCss.addChangeListener(css => {
+        toggle(Settings.useQuickCss, css);
+    });
     SettingsStore.addChangeListener("useQuickCss", toggle);
 
     SettingsStore.addChangeListener("themeLinks", initThemes);