feat: inject css vars for usercss

browser/VencordNativeStub.ts

@@ -23,7 +23,7 @@ import monacoHtml from "~fileContent/../src/components/monacoWin.html";
 import * as DataStore from "../src/api/DataStore";
 import { debounce } from "../src/utils";
 import { getTheme, Theme } from "../src/utils/discord";
-import { getThemeInfo } from "../src/main/themes";
+import { getThemeInfo } from "../src/utils/themes/bd";
 
 // Discord deletes this so need to store in variable
 const { localStorage } = window;

src/VencordNative.ts

@@ -5,9 +5,9 @@
  */
 
 import { IpcEvents } from "@utils/IpcEvents";
+import type { ThemeHeader } from "@utils/themes";
 import { IpcRes } from "@utils/types";
 import { ipcRenderer } from "electron";
-import type { ThemeHeader } from "main/themes";
 
 function invoke<T = any>(event: IpcEvents, ...args: any[]) {
     return ipcRenderer.invoke(event, ...args) as Promise<T>;

src/components/VencordSettings/ThemesTab.tsx

@@ -24,10 +24,10 @@ import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
+import type { ThemeHeader } from "@utils/themes";
+import { UserThemeHeader } from "@utils/themes/bd";
 import { findByCodeLazy, findByPropsLazy, findLazy } from "@webpack";
 import { Button, Card, FluxDispatcher, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common";
-import type { ThemeHeader } from "main/themes";
-import { UserThemeHeader } from "main/themes/bd";
 import type { ComponentType, Ref, SyntheticEvent } from "react";
 import { UserstyleHeader } from "usercss-meta";
 

src/main/ipcMain.ts

@@ -22,6 +22,9 @@ import "./ipcPlugins";
 import { debounce } from "@utils/debounce";
 import { IpcEvents } from "@utils/IpcEvents";
 import { Queue } from "@utils/Queue";
+import type { ThemeHeader } from "@utils/themes";
+import { getThemeInfo, stripBOM } from "@utils/themes/bd";
+import { parse as usercssParse } from "@utils/themes/usercss";
 import { BrowserWindow, ipcMain, shell } from "electron";
 import { mkdirSync, readFileSync, watch } from "fs";
 import { open, readdir, readFile, writeFile } from "fs/promises";
@@ -29,9 +32,6 @@ import { join, normalize } from "path";
 
 import monacoHtml from "~fileContent/../components/monacoWin.html;base64";
 
-import type { ThemeHeader } from "./themes";
-import { getThemeInfo, stripBOM } from "./themes/bd";
-import { parse as usercssParse } from "./themes/usercss";
 import { ALLOWED_PROTOCOLS, QUICKCSS_PATH, SETTINGS_DIR, SETTINGS_FILE, THEMES_DIR } from "./utils/constants";
 import { makeLinksOpenExternally } from "./utils/externalLinks";
 

src/utils/quickCss.ts

@@ -17,7 +17,7 @@
 */
 
 import { addSettingsListener, Settings } from "@api/Settings";
-
+import { parse as usercssParse } from "@utils/themes/usercss";
 
 let style: HTMLStyleElement;
 let themesStyle: HTMLStyleElement;
@@ -62,7 +62,24 @@ async function initThemes() {
         links.push(...localThemes);
     }
 
+    const cssVars: string[] = [];
+
+    // for UserCSS, we need to inject the variables
+    for (const theme of enabledThemes) {
+        if (!theme.endsWith(".user.css")) continue;
+
+        const themeData = await VencordNative.themes.getThemeData(theme);
+        if (!themeData) continue;
+
+        const { vars } = usercssParse(themeData, theme);
+
+        for (const [id, meta] of Object.entries(vars)) {
+            cssVars.push(`--${id}: ${meta.default};`);
+        }
+    }
+
     themesStyle.textContent = links.map(link => `@import url("${link.trim()}");`).join("\n");
+    themesStyle.textContent += `:root{${cssVars.join("\n")}}`;
 }
 
 document.addEventListener("DOMContentLoaded", () => {