UserScript: disable theme ui, instead recommend Stylus

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/";
+}