From 19a87e3e94de0cc38c129a9699e8246370301341 Mon Sep 17 00:00:00 2001
From: Lewis Crichton <lewi@lewisakura.moe>
Date: Sat, 2 Sep 2023 22:02:11 +0100
Subject: [PATCH] feat: ranges with units, loading vars from settings

---
 src/api/Settings.ts   |  6 +++++-
 src/utils/quickCss.ts | 10 ++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/api/Settings.ts b/src/api/Settings.ts
index c380f631..4d8cef6a 100644
--- a/src/api/Settings.ts
+++ b/src/api/Settings.ts
@@ -61,6 +61,8 @@ export interface Settings {
         settingsSync: boolean;
         settingsSyncVersion: number;
     };
+
+    userCssVars: Record<string, string>;
 }
 
 const DefaultSettings: Settings = {
@@ -91,7 +93,9 @@ const DefaultSettings: Settings = {
         url: "https://api.vencord.dev/",
         settingsSync: false,
         settingsSyncVersion: 0
-    }
+    },
+
+    userCssVars: {}
 };
 
 try {
diff --git a/src/utils/quickCss.ts b/src/utils/quickCss.ts
index 14769fbb..4ae2cde9 100644
--- a/src/utils/quickCss.ts
+++ b/src/utils/quickCss.ts
@@ -46,7 +46,7 @@ async function initThemes() {
         document.documentElement.appendChild(themesStyle);
     }
 
-    const { themeLinks, enabledThemes } = Settings;
+    const { themeLinks, enabledThemes, userCssVars } = Settings;
 
     const links: string[] = [...themeLinks];
 
@@ -74,7 +74,13 @@ async function initThemes() {
         const { vars } = usercssParse(themeData, theme);
 
         for (const [id, meta] of Object.entries(vars)) {
-            cssVars.push(`--${id}: ${meta.default};`);
+            let normalizedValue: string = userCssVars[id] ?? meta.default;
+
+            if (meta.type === "range") {
+                normalizedValue = `${normalizedValue}${meta.units ?? ""}`;
+            }
+
+            cssVars.push(`--${id}: ${normalizedValue};`);
         }
     }