UserScript: disable theme ui, instead recommend Stylus

browser/VencordNativeStub.ts

@@ -20,16 +20,13 @@
 /// <reference path="../src/globals.d.ts" />
 
 import monacoHtmlLocal from "file://monacoWin.html?minify";
-import monacoHtmlCdn from "file://../src/main/monacoWin.html?minify";
 import * as DataStore from "../src/api/DataStore";
-import { debounce } from "../src/utils";
+import { debounce, localStorage } from "../src/utils";
 import { EXTENSION_BASE_URL } from "../src/utils/web-metadata";
 import { getTheme, Theme } from "../src/utils/discord";
 import { getThemeInfo } from "../src/main/themes";
 import { Settings } from "../src/Vencord";
-
-// Discord deletes this so need to store in variable
-const { localStorage } = window;
+import { getStylusWebStoreUrl } from "@utils/web";
 
 // listeners for ipc.on
 const cssListeners = new Set<(css: string) => void>();
@@ -77,6 +74,14 @@ window.VencordNative = {
         addThemeChangeListener: NOOP,
         openFile: NOOP_ASYNC,
         async openEditor() {
+            if (IS_USERSCRIPT) {
+                const shouldOpenWebStore = confirm("QuickCSS is not supported on the Userscript. You can instead use the Stylus extension.\n\nDo you want to open the Stylus web store page?");
+                if (shouldOpenWebStore) {
+                    window.open(getStylusWebStoreUrl(), "_blank");
+                }
+                return;
+            }
+
             const features = `popup,width=${Math.min(window.innerWidth, 1000)},height=${Math.min(window.innerHeight, 1000)}`;
             const win = open("about:blank", "VencordQuickCss", features);
             if (!win) {
@@ -92,7 +97,7 @@ window.VencordNative = {
                     ? "vs-light"
                     : "vs-dark";
 
-            win.document.write(IS_EXTENSION ? monacoHtmlLocal : monacoHtmlCdn);
+            win.document.write(monacoHtmlLocal);
         },
     },
 

scripts/build/build.mjs

@@ -31,6 +31,7 @@ const defines = stringifyValues({
     IS_UPDATER_DISABLED,
     IS_WEB: false,
     IS_EXTENSION: false,
+    IS_USERSCRIPT: false,
     VERSION,
     BUILD_TIMESTAMP
 });

scripts/build/buildWeb.mjs

@@ -43,6 +43,7 @@ const commonOptions = {
     define: stringifyValues({
         IS_WEB: true,
         IS_EXTENSION: false,
+        IS_USERSCRIPT: false,
         IS_STANDALONE: true,
         IS_DEV,
         IS_REPORTER,
@@ -98,6 +99,7 @@ const buildConfigs = [
         inject: ["browser/GMPolyfill.js", ...(commonOptions?.inject || [])],
         define: {
             ...commonOptions.define,
+            IS_USERSCRIPT: "true",
             window: "unsafeWindow",
         },
         outfile: "dist/Vencord.user.js",

src/components/VencordSettings/ThemesTab.tsx

@@ -30,6 +30,7 @@ import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
+import { getStylusWebStoreUrl } from "@utils/web";
 import { findLazy } from "@webpack";
 import { Card, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common";
 import type { ComponentType, Ref, SyntheticEvent } from "react";
@@ -384,4 +385,20 @@ export function CspErrorCard() {
     );
 }
 
-export default wrapTab(ThemesTab, "Themes");
+function UserscriptThemesTab() {
+    return (
+        <SettingsTab title="Themes">
+            <Card className="vc-settings-card">
+                <Forms.FormTitle tag="h5">Themes are not supported on the Userscript!</Forms.FormTitle>
+
+                <Forms.FormText>
+                    You can instead install themes with the <Link href={getStylusWebStoreUrl()}>Stylus extension</Link>!
+                </Forms.FormText>
+            </Card>
+        </SettingsTab>
+    );
+}
+
+export default IS_USERSCRIPT
+    ? wrapTab(UserscriptThemesTab, "Themes")
+    : wrapTab(ThemesTab, "Themes");

src/globals.d.ts

@@ -29,11 +29,12 @@ declare global {
      * replace: "IS_WEB?foo:bar"
      * // GOOD
      * replace: IS_WEB ? "foo" : "bar"
-     * // also good
+     * // also okay
      * replace: `${IS_WEB}?foo:bar`
      */
     export var IS_WEB: boolean;
     export var IS_EXTENSION: boolean;
+    export var IS_USERSCRIPT: boolean;
     export var IS_STANDALONE: boolean;
     export var IS_UPDATER_DISABLED: boolean;
     export var IS_DEV: boolean;

src/utils/quickCss.ts

@@ -39,7 +39,7 @@ async function initSystemValues() {
     createStyle("vencord-os-theme-values").textContent = `:root{${variables}}`;
 }
 
-export async function toggle(isEnabled: boolean) {
+async function toggle(isEnabled: boolean) {
     if (!style) {
         if (isEnabled) {
             style = createStyle("vencord-custom-css");
@@ -91,6 +91,8 @@ async function initThemes() {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
+    if (IS_USERSCRIPT) return;
+
     initSystemValues();
     initThemes();
 
@@ -103,9 +105,11 @@ document.addEventListener("DOMContentLoaded", () => {
     if (!IS_WEB) {
         VencordNative.quickCss.addThemeChangeListener(initThemes);
     }
-});
+}, { once: true });
 
 export function initQuickCssThemeStore() {
+    if (IS_USERSCRIPT) return;
+
     initThemes();
 
     let currentTheme = ThemeStore.theme;

src/utils/web.ts

@@ -53,3 +53,11 @@ export function chooseFile(mimeTypes: string) {
         setImmediate(() => document.body.removeChild(input));
     });
 }
+
+export function getStylusWebStoreUrl() {
+    const isChromium = (navigator as any).userAgentData?.brands?.some(b => b.brand === "Chromium");
+
+    return isChromium
+        ? "https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne"
+        : "https://addons.mozilla.org/firefox/addon/styl-us/";
+}