From b7fb178f1f6c0c6c031e4627ff6f6725ba184411 Mon Sep 17 00:00:00 2001 From: Lewis Crichton Date: Sat, 2 Sep 2023 21:27:22 +0100 Subject: [PATCH] feat: inject css vars for usercss --- browser/VencordNativeStub.ts | 2 +- src/VencordNative.ts | 2 +- src/components/VencordSettings/ThemesTab.tsx | 4 ++-- src/main/ipcMain.ts | 6 +++--- src/utils/quickCss.ts | 19 ++++++++++++++++++- src/{main => utils}/themes/bd/LICENSE | 0 src/{main => utils}/themes/bd/index.ts | 0 src/{main => utils}/themes/index.ts | 0 src/{main => utils}/themes/usercss/index.ts | 0 .../themes/usercss/usercss-meta.d.ts | 0 10 files changed, 25 insertions(+), 8 deletions(-) rename src/{main => utils}/themes/bd/LICENSE (100%) rename src/{main => utils}/themes/bd/index.ts (100%) rename src/{main => utils}/themes/index.ts (100%) rename src/{main => utils}/themes/usercss/index.ts (100%) rename src/{main => utils}/themes/usercss/usercss-meta.d.ts (100%) diff --git a/browser/VencordNativeStub.ts b/browser/VencordNativeStub.ts index 664e9eef3..db263ee63 100644 --- a/browser/VencordNativeStub.ts +++ b/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; diff --git a/src/VencordNative.ts b/src/VencordNative.ts index 9ec7f7952..dc6042c2b 100644 --- a/src/VencordNative.ts +++ b/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(event: IpcEvents, ...args: any[]) { return ipcRenderer.invoke(event, ...args) as Promise; diff --git a/src/components/VencordSettings/ThemesTab.tsx b/src/components/VencordSettings/ThemesTab.tsx index 35e82b2db..b13290379 100644 --- a/src/components/VencordSettings/ThemesTab.tsx +++ b/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"; diff --git a/src/main/ipcMain.ts b/src/main/ipcMain.ts index 31935eb8a..f7f124513 100644 --- a/src/main/ipcMain.ts +++ b/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"; diff --git a/src/utils/quickCss.ts b/src/utils/quickCss.ts index eee39ab5a..ebf23cf48 100644 --- a/src/utils/quickCss.ts +++ b/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", () => { diff --git a/src/main/themes/bd/LICENSE b/src/utils/themes/bd/LICENSE similarity index 100% rename from src/main/themes/bd/LICENSE rename to src/utils/themes/bd/LICENSE diff --git a/src/main/themes/bd/index.ts b/src/utils/themes/bd/index.ts similarity index 100% rename from src/main/themes/bd/index.ts rename to src/utils/themes/bd/index.ts diff --git a/src/main/themes/index.ts b/src/utils/themes/index.ts similarity index 100% rename from src/main/themes/index.ts rename to src/utils/themes/index.ts diff --git a/src/main/themes/usercss/index.ts b/src/utils/themes/usercss/index.ts similarity index 100% rename from src/main/themes/usercss/index.ts rename to src/utils/themes/usercss/index.ts diff --git a/src/main/themes/usercss/usercss-meta.d.ts b/src/utils/themes/usercss/usercss-meta.d.ts similarity index 100% rename from src/main/themes/usercss/usercss-meta.d.ts rename to src/utils/themes/usercss/usercss-meta.d.ts