feat: ThemeStore

package.json

@@ -61,14 +61,14 @@
         "esbuild": "^0.23.1",
         "eslint": "^9.9.1",
         "eslint-plugin-path-alias": "^2.1.0",
-        "eslint-plugin-react": "^7.35.0",
+        "eslint-plugin-react": "^7.35.1",
         "eslint-plugin-simple-header": "^1.1.1",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-unused-imports": "^4.1.3",
         "highlight.js": "11.8.0",
         "html-minifier-terser": "^7.2.0",
         "moment": "2.22.2",
-        "puppeteer-core": "^23.2.1",
+        "puppeteer-core": "^23.2.2",
         "standalone-electron-types": "^1.0.0",
         "stylelint": "^16.9.0",
         "stylelint-config-standard": "^36.0.1",

packages/discord-types/package.json

@@ -40,7 +40,7 @@
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-unicorn": "^55.0.0",
         "eslint-plugin-unused-imports": "^4.1.3",
-        "puppeteer-core": "^23.2.1",
+        "puppeteer-core": "^23.2.2",
         "semver": "^7.6.3",
         "tsx": "^4.19.0",
         "type-fest": "^4.26.0",

packages/discord-types/scripts/changeReporter/config.mts

@@ -591,7 +591,7 @@ export default {
                 type: "enum",
             },
         },
-        "./general/RecordBase.ts": {
+        "./general/Record.ts": {
             RecordBase: {
                 type: "class",
                 ignoredRemovals: {
@@ -743,6 +743,18 @@ export default {
                 type: "class",
             },
         },
+        "./stores/ThemeStore.ts": {
+            ThemeStore: {
+                type: "class",
+                ignoredAdditions: {
+                    // Overrides
+                    staticMethodsAndFields: ["migrations"],
+                },
+            },
+            Theme: {
+                type: "enum",
+            },
+        },
         "./stores/UserProfileStore.ts": {
             UserProfileStore: {
                 type: "class",

packages/discord-types/src/general/ApplicationRecord.ts

@@ -7,7 +7,7 @@
 import type { Nullish, Optional, PartialOnUndefined, SnakeCasedProperties } from "../internal";
 import type { CompanyRecord } from "./CompanyRecord";
 import type { IconSource } from "./misc";
-import type { RecordBase } from "./RecordBase";
+import type { RecordBase } from "./Record";
 import type { UserRecord } from "./UserRecord";
 
 export type ApplicationRecordOwnProperties = Pick<ApplicationRecord, "aliases" | "bot" | "coverImage" | "description" | "developers" | "embeddedActivityConfig" | "eulaId" | "executables" | "flags" | "guild" | "guildId" | "hashes" | "hook" | "icon" | "id" | "integrationTypesConfig" | "isMonetized" | "isVerified" | "maxParticipants" | "name" | "overlay" | "overlayCompatibilityHook" | "overlayMethods" | "overlayWarn" | "primarySkuId" | "privacyPolicyUrl" | "publishers" | "roleConnectionsVerificationUrl" | "slug" | "splash" | "storefront_available" | "storeListingSkuId" | "tags" | "team" | "termsOfServiceUrl" | "thirdPartySkus" | "type">;

packages/discord-types/src/general/CompanyRecord.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import type { RecordBase } from "./RecordBase";
+import type { RecordBase } from "./Record";
 
 export type CompanyRecordOwnProperties = Pick<CompanyRecord, "id" | "name">;
 

packages/discord-types/src/general/GuildRecord.ts

@@ -7,7 +7,7 @@
 import type { Nullish, Optional } from "../internal";
 import type { Clan } from "./Clan";
 import type { IconSource } from "./misc";
-import type { RecordBase } from "./RecordBase";
+import type { RecordBase } from "./Record";
 import type { UserRecord } from "./UserRecord";
 
 export type GuildRecordOwnProperties = Pick<GuildRecord, "afkChannelId" | "afkTimeout" | "application_id" | "banner" | "clan" | "defaultMessageNotifications" | "description" | "discoverySplash" | "explicitContentFilter" | "features" | "homeHeader" | "hubType" | "icon" | "id" | "joinedAt" | "latestOnboardingQuestionId" | "maxMembers" | "maxStageVideoChannelUsers" | "maxVideoChannelUsers" | "mfaLevel" | "name" | "nsfwLevel" | "ownerId" | "preferredLocale" | "premiumProgressBarEnabled" | "premiumSubscriberCount" | "premiumTier" | "publicUpdatesChannelId" | "rulesChannelId" | "safetyAlertsChannelId" | "splash" | "systemChannelFlags" | "systemChannelId" | "vanityURLCode" | "verificationLevel">;

packages/discord-types/src/general/UserRecord.ts

@@ -6,7 +6,7 @@
 
 import type { Nullish, Optional, SnakeCasedProperties } from "../internal";
 import type { IconSource } from "./misc";
-import type { RecordBase } from "./RecordBase";
+import type { RecordBase } from "./Record";
 
 export type UserRecordOwnProperties = Pick<UserRecord, "avatar" | "avatarDecorationData" | "banner" | "bot" | "clan" | "desktop" | "discriminator" | "email" | "flags" | "globalName" | "guildMemberAvatars" | "hasAnyStaffLevel" | "hasBouncedEmail" | "hasFlag" | "id" | "isStaff" | "isStaffPersonal" | "mfaEnabled" | "mobile" | "nsfwAllowed" | "personalConnectionId" | "phone" | "premiumType" | "premiumUsageFlags" | "publicFlags" | "purchasedFlags" | "system" | "username" | "verified">;
 

packages/discord-types/src/general/index.ts

@@ -21,7 +21,7 @@ export * from "./messages";
 export * from "./misc";
 export * from "./Permissions";
 export * from "./ReadState";
-export * from "./RecordBase";
+export * from "./Record";
 export * from "./Role";
 export * from "./UserProfile";
 export * from "./UserRecord";

packages/discord-types/src/general/messages/InteractionRecord.ts

@@ -5,7 +5,7 @@
  */
 
 import type { Nullish } from "../../internal";
-import type { RecordBase } from "../RecordBase";
+import type { RecordBase } from "../Record";
 import type { UserRecord } from "../UserRecord";
 
 export type InteractionRecordOwnProperties = Pick<InteractionRecord, "displayName" | "id" | "name" | "type" | "user">;

packages/discord-types/src/general/messages/MessageSnapshotRecord.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import type { RecordBase } from "../RecordBase";
+import type { RecordBase } from "../Record";
 import type { MinimalMessageProperties, MinimalMessageRecord } from "./MinimalMessageRecord";
 
 export type MessageSnapshotRecordOwnProperties = Pick<MessageSnapshotRecord, "message">;

packages/discord-types/src/general/messages/MinimalMessageRecord.ts

@@ -8,7 +8,7 @@ import type { Moment } from "moment";
 
 import type { Nullish, Optional, SnakeCasedProperties } from "../../internal";
 import type { ChannelType } from "../channels/ChannelRecord";
-import type { RecordBase } from "../RecordBase";
+import type { RecordBase } from "../Record";
 
 export type MinimalMessageRecordOwnProperties = Pick<MinimalMessageRecord, "attachments" | "codedLinks" | "components" | "content" | "editedTimestamp" | "embeds" | "flags" | "stickerItems" | "stickers" | "timestamp" | "type">;
 

packages/discord-types/src/stores/DraftStore.ts

@@ -29,5 +29,5 @@ export declare class DraftStore<
     getThreadDraftWithParentMessageId(messageId: string): DraftNonForumThreadSettings | Nullish;
     getThreadSettings<ForumThread extends boolean = boolean>(threadId: string):
         (ForumThread extends true ? DraftForumThreadSettings : DraftNonForumThreadSettings) | Nullish;
-    initialize(state: State): void;
+    initialize(state?: State | Nullish): void;
 }

packages/discord-types/src/stores/EmojiStore.ts

@@ -51,7 +51,7 @@ export declare class EmojiStore<
     hasFavoriteEmojis(guildId?: string | Nullish): boolean;
     hasPendingUsage(): boolean;
     hasUsableEmojiInAnyGuild(): boolean;
-    initialize(state: State): void;
+    initialize(state?: State | Nullish): void;
     get loadState(): number;
     /** If count is less than or equal to 0, all unlocked results will be returned. */
     searchWithoutFetchingLatest(options: {

packages/discord-types/src/stores/SelectedGuildStore.ts

@@ -5,7 +5,7 @@
  */
 
 import type { PersistedStore } from "../flux/PersistedStore";
-import type { GenericConstructor } from "../internal";
+import type { GenericConstructor, Nullish } from "../internal";
 
 export interface SelectedGuildStoreState {
     lastSelectedGuildId: string | null;
@@ -24,5 +24,5 @@ export declare class SelectedGuildStore<
     getLastSelectedGuildId(): string | null;
     getLastSelectedTimestamp(guildId: string): number | undefined;
     getState(): State;
-    initialize(state: SelectedGuildStoreState): void;
+    initialize(state?: State | Nullish): void;
 }

packages/discord-types/src/stores/ThemeStore.ts

@@ -0,0 +1,37 @@
+/*
+ * discord-types
+ * Copyright (C) 2024 Vencord project contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import type { PersistedStore } from "../flux";
+import type { GenericConstructor, Nullish } from "../internal";
+
+export interface ThemeStoreState {
+    theme: Theme;
+}
+
+export declare class ThemeStore<
+    Constructor extends GenericConstructor = typeof ThemeStore,
+    State extends ThemeStoreState = ThemeStoreState
+> extends PersistedStore<Constructor, State> {
+    static displayName: "ThemeStore";
+    static persistKey: "ThemeStore";
+
+    get darkSidebar(): boolean;
+    getState(): State;
+    initialize(state?: State | Nullish): void;
+    get isSystemThemeAvailable(): boolean;
+    get systemPrefersColorScheme(): Theme.DARK | Theme.LIGHT | undefined;
+    /** Only null when `isSystemThemeAvailable` is false. */
+    get systemTheme(): Theme.DARK | Theme.LIGHT | null;
+    get theme(): Theme;
+}
+
+// Original name: Themes
+export enum Theme {
+    DARK = "dark",
+    DARKER = "darker",
+    LIGHT = "light",
+    MIDNIGHT = "midnight",
+}

packages/discord-types/src/stores/index.ts

@@ -18,6 +18,7 @@ export * from "./ReadStateStore";
 export * from "./RelationshipStore";
 export * from "./SelectedChannelStore";
 export * from "./SelectedGuildStore";
+export * from "./ThemeStore";
 export * from "./UserProfileStore";
 export * from "./UserStore";
 export * from "./WindowStore";

src/plugins/clientTheme/index.tsx

@@ -12,7 +12,7 @@ import { Devs } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import definePlugin, { OptionType, StartAt } from "@utils/types";
-import type { PersistedStore } from "@vencord/discord-types";
+import { type PersistedStore, Theme } from "@vencord/discord-types";
 import { findByCodeLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
 import { Button, Forms, ThemeStore, useStateFromStores } from "@webpack/common";
 
@@ -42,8 +42,8 @@ const ClientThemesBackgroundStore: PersistedStore & Record<string, any> = findSt
 
 function ThemeSettings() {
     const theme = useStateFromStores([ThemeStore], () => ThemeStore.theme);
-    const isLightTheme = theme === "light";
-    const oppositeTheme = isLightTheme ? "dark" : "light";
+    const isLightTheme = theme === Theme.LIGHT;
+    const oppositeTheme = isLightTheme ? Theme.DARK : Theme.LIGHT;
 
     const nitroTheme = useStateFromStores(
         [ClientThemesBackgroundStore],

src/plugins/showConnections/index.tsx

@@ -25,13 +25,22 @@ import { CopyIcon, LinkIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import { copyWithToast } from "@utils/misc";
 import definePlugin, { OptionType } from "@utils/types";
-import type { PlatformType, ProfileConnectedAccountData, UserRecord } from "@vencord/discord-types";
+import { type DisplayProfile, type PlatformType, type ProfileConnectedAccountData, Theme, type UserRecord } from "@vencord/discord-types";
 import { findByCodeLazy, findByPropsLazy } from "@webpack";
 import { Tooltip, UserProfileStore } from "@webpack/common";
 
 import { VerifiedIcon } from "./VerifiedIcon";
 
-const getProfileThemeProps = findByCodeLazy(".getPreviewThemeColors", "primaryColor:");
+const useProfileTheme: (options: {
+    displayProfile?: DisplayProfile | null | undefined;
+    isPreview?: boolean | undefined /* = false */;
+    pendingAvatar?: string | null | undefined;
+    pendingThemeColors?: Parameters<DisplayProfile["getPreviewThemeColors"]>[0];
+    user?: UserRecord | null | undefined;
+}) => { theme: Theme.DARK | Theme.LIGHT; }
+    & ({ primaryColor: number; secondaryColor: number; }
+    | { primaryColor: null; secondaryColor: null; })
+    = findByCodeLazy(".getPreviewThemeColors", "primaryColor:");
 
 const Platforms: {
     get: (type: PlatformType) => ConnectionPlatform;
@@ -71,17 +80,17 @@ interface ConnectionPlatform {
 }
 
 const profilePopoutComponent = ErrorBoundary.wrap(
-    (props: { user: UserRecord; displayProfile?: any; }) => (
+    (props: { user: UserRecord; displayProfile?: DisplayProfile; }) => (
         <ConnectionsComponent
             {...props}
             id={props.user.id}
-            theme={getProfileThemeProps(props).theme}
+            theme={useProfileTheme(props).theme}
         />
     ),
     { noop: true }
 );
 
-function ConnectionsComponent({ id, theme }: { id: string; theme: string; }) {
+function ConnectionsComponent({ id, theme }: { id: string; theme: Theme.DARK | Theme.LIGHT; }) {
     const profile = UserProfileStore.getUserProfile(id);
     if (!profile)
         return null;
@@ -102,14 +111,14 @@ function ConnectionsComponent({ id, theme }: { id: string; theme: string; }) {
     );
 }
 
-function CompactConnectionComponent({ connection, theme }: { connection: ProfileConnectedAccountData; theme: string; }) {
+function CompactConnectionComponent({ connection, theme }: { connection: ProfileConnectedAccountData; theme: Theme.DARK | Theme.LIGHT; }) {
     const platform = Platforms.get(useLegacyPlatformType(connection.type));
     const url = platform.getPlatformUserUrl?.(connection);
 
     const img = (
         <img
             aria-label={connection.name}
-            src={theme === "light" ? platform.icon.lightSVG : platform.icon.darkSVG}
+            src={theme === Theme.LIGHT ? platform.icon.lightSVG : platform.icon.darkSVG}
             style={{
                 width: settings.store.iconSize,
                 height: settings.store.iconSize