2 files changed, 21 insertions, 8 deletions
diff --git a/src/utils/IpcEvents.ts b/src/utils/IpcEvents.ts
index cb51f81..16bcfa6 100644
--- a/src/utils/IpcEvents.ts
+++ b/src/utils/IpcEvents.ts
@@ -26,6 +26,7 @@ export const enum IpcEvents {
     GET_THEMES_DIR = "VencordGetThemesDir",
     GET_THEMES_LIST = "VencordGetThemesList",
     GET_THEME_DATA = "VencordGetThemeData",
+    GET_THEME_SYSTEM_VALUES = "VencordGetThemeSystemValues",
     GET_SETTINGS_DIR = "VencordGetSettingsDir",
     GET_SETTINGS = "VencordGetSettings",
     SET_SETTINGS = "VencordSetSettings",
diff --git a/src/utils/quickCss.ts b/src/utils/quickCss.ts
index eee39ab..8132031 100644
--- a/src/utils/quickCss.ts
+++ b/src/utils/quickCss.ts
@@ -22,12 +22,27 @@ import { addSettingsListener, Settings } from "@api/Settings";
 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)
+        .filter(([, v]) => v !== "#")
+        .map(([k, v]) => `--${k}: ${v};`)
+        .join("");
+
+    createStyle("vencord-os-theme-values").textContent = `:root{${variables}}`;
+}
+
 export async function toggle(isEnabled: boolean) {
     if (!style) {
         if (isEnabled) {
-            style = document.createElement("style");
-            style.id = "vencord-custom-css";
-            document.documentElement.appendChild(style);
+            style = createStyle("vencord-custom-css");
             VencordNative.quickCss.addChangeListener(css => {
                 style.textContent = css;
                 // At the time of writing this, changing textContent resets the disabled state
@@ -40,11 +55,7 @@ export async function toggle(isEnabled: boolean) {
 }
 
 async function initThemes() {
-    if (!themesStyle) {
-        themesStyle = document.createElement("style");
-        themesStyle.id = "vencord-themes";
-        document.documentElement.appendChild(themesStyle);
-    }
+    themesStyle ??= createStyle("vencord-themes");
 
     const { themeLinks, enabledThemes } = Settings;
 
@@ -66,6 +77,7 @@ async function initThemes() {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
+    initSystemValues();
     initThemes();
 
     toggle(Settings.useQuickCss);