Allow online themes to be applied only in dark or light mode (#2701)

src/components/VencordSettings/ThemesTab.tsx

@@ -77,8 +77,16 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
             <Forms.FormTitle className={Margins.top20} tag="h5">Validator</Forms.FormTitle>
             <Forms.FormText>This section will tell you whether your themes can successfully be loaded</Forms.FormText>
             <div>
-                {themeLinks.map(link => (
-                    <Card style={{
+                {themeLinks.map(rawLink => {
+                    const { label, link } = (() => {
+                        const match = /^@(light|dark) (.*)/.exec(rawLink);
+                        if (!match) return { label: rawLink, link: rawLink };
+
+                        const [, mode, link] = match;
+                        return { label: `[${mode} mode only] ${link}`, link };
+                    })();
+
+                    return <Card style={{
                         padding: ".5em",
                         marginBottom: ".5em",
                         marginTop: ".5em"
@@ -86,11 +94,11 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
                         <Forms.FormTitle tag="h5" style={{
                             overflowWrap: "break-word"
                         }}>
-                            {link}
+                            {label}
                         </Forms.FormTitle>
                         <Validator link={link} />
-                    </Card>
-                ))}
+                    </Card>;
+                })}
             </div>
         </>
     );
@@ -296,6 +304,7 @@ function ThemesTab() {
                 <Card className="vc-settings-card vc-text-selectable">
                     <Forms.FormTitle tag="h5">Paste links to css files here</Forms.FormTitle>
                     <Forms.FormText>One link per line</Forms.FormText>
+                    <Forms.FormText>You can prefix lines with @light or @dark to toggle them based on your Discord theme</Forms.FormText>
                     <Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
                 </Card>
 

src/plugins/clientTheme/index.tsx

@@ -12,7 +12,7 @@ import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import definePlugin, { OptionType, StartAt } from "@utils/types";
 import { findByCodeLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
-import { Button, Forms, useStateFromStores } from "@webpack/common";
+import { Button, Forms, ThemeStore, useStateFromStores } from "@webpack/common";
 
 const ColorPicker = findComponentByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)");
 
@@ -36,7 +36,6 @@ function setTheme(theme: string) {
     saveClientTheme({ theme });
 }
 
-const ThemeStore = findStoreLazy("ThemeStore");
 const NitroThemeStore = findStoreLazy("ClientThemesBackgroundStore");
 
 function ThemeSettings() {

src/utils/quickCss.ts

@@ -17,6 +17,7 @@
 */
 
 import { Settings, SettingsStore } from "@api/Settings";
+import { ThemeStore } from "@webpack/common";
 
 
 let style: HTMLStyleElement;
@@ -59,7 +60,18 @@ async function initThemes() {
 
     const { themeLinks, enabledThemes } = Settings;
 
-    const links: string[] = [...themeLinks];
+    // "darker" and "midnight" both count as dark
+    const activeTheme = ThemeStore.theme === "light" ? "light" : "dark";
+
+    const links = themeLinks
+        .map(rawLink => {
+            const match = /^@(light|dark) (.*)/.exec(rawLink);
+            if (!match) return rawLink;
+
+            const [, mode, link] = match;
+            return mode === activeTheme ? link : null;
+        })
+        .filter(link => link !== null);
 
     if (IS_WEB) {
         for (const theme of enabledThemes) {
@@ -85,6 +97,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     SettingsStore.addChangeListener("themeLinks", initThemes);
     SettingsStore.addChangeListener("enabledThemes", initThemes);
+    ThemeStore.addChangeListener(initThemes);
 
     if (!IS_WEB)
         VencordNative.quickCss.addThemeChangeListener(initThemes);

src/webpack/common/stores.ts

@@ -53,6 +53,7 @@ export let RelationshipStore: Stores.RelationshipStore & t.FluxStore & {
 };
 
 export let EmojiStore: t.EmojiStore;
+export let ThemeStore: t.ThemeStore;
 export let WindowStore: t.WindowStore;
 export let DraftStore: t.DraftStore;
 
@@ -84,3 +85,4 @@ waitForStore("GuildChannelStore", m => GuildChannelStore = m);
 waitForStore("MessageStore", m => MessageStore = m);
 waitForStore("WindowStore", m => WindowStore = m);
 waitForStore("EmojiStore", m => EmojiStore = m);
+waitForStore("ThemeStore", m => ThemeStore = m);

src/webpack/common/types/stores.d.ts

@@ -220,6 +220,14 @@ export class GuildStore extends FluxStore {
     getAllGuildRoles(): Record<string, Record<string, Role>>;
 }
 
+export class ThemeStore extends FluxStore {
+    theme: "light" | "dark" | "darker" | "midnight";
+    darkSidebar: boolean;
+    isSystemThemeAvailable: boolean;
+    systemPrefersColorScheme: "light" | "dark";
+    systemTheme: null;
+}
+
 export type useStateFromStores = <T>(
     stores: t.FluxStore[],
     mapper: () => T,