yeet

modules/client_themes/ClientThemesBackgroundActionCreators.tsx

@@ -0,0 +1,25 @@
+// Metro module 14201 (f14202).
+import Dispatcher from "../../Dispatcher";
+export function updateBackgroundGradientPreset(a0) {
+  Dispatcher.dispatch({
+    type: "UPDATE_BACKGROUND_GRADIENT_PRESET",
+    presetId: a0
+  });
+}
+export function updateMobilePendingThemeIndex(a0) {
+  Dispatcher.dispatch({
+    type: "UPDATE_MOBILE_PENDING_THEME_INDEX",
+    mobileThemesIndex: a0
+  });
+}
+export function resetBackgroundGradientPreset() {
+  Dispatcher.dispatch({
+    type: "UPDATE_BACKGROUND_GRADIENT_PRESET",
+    presetId: null
+  });
+}
+export function resetPreviewClientTheme() {
+  Dispatcher.dispatch({
+    type: "RESET_PREVIEW_CLIENT_THEME"
+  });
+}

modules/client_themes/ClientThemesBackgroundStore.tsx

@@ -0,0 +1,155 @@
+// Metro module 4001 (f4002).
+import SelectivelySyncedUserSettingsStore from "../user_settings/SelectivelySyncedUserSettingsStore";
+import ThemeStore from "../user_settings/ThemeStore";
+import UnsyncedUserSettingsStore from "../user_settings/UnsyncedUserSettingsStore";
+import UserSettingsProtoStore from "../user_settings/UserSettingsProtoStore";
+import { isGuildTextChannelType } from "../../records/ChannelRecord";
+import ChannelStore from "../../stores/ChannelStore";
+import UserStore from "../../stores/UserStore";
+import { BACKGROUND_GRADIENT_PRESETS_MAP } from "./ClientThemesConstants";
+import { SystemThemeState } from "../user_settings/ThemeConstants";
+import { isMobileVisualRefreshEnabled } from "../themes/experiments/MobileVisualRefreshExperiment";
+import { UNSAFE_isDismissibleContentDismissed } from "../dismissible_content/DismissibleContentUnsafeUtils";
+import { DismissibleContent } from "../../_bundle/Module1358";
+import { ageEligibleForPremiumUpsell } from "../../utils/UserUtils";
+import PremiumUtils from "../../utils/PremiumUtils";
+import { ClientThemeSettings } from "../user_settings/UserSettings";
+import { isPerModeThemingActive } from "../user_settings/isPerModeThemingActive";
+import { setUseSystemTheme } from "../user_settings/ThemeActionCreators";
+import Module589 from "../../_bundle/Module589";
+import { getLinearGradientForBackgroundGradient } from "./ClientThemesUtils";
+import Dispatcher from "../../Dispatcher";
+let c2279_3, mobileThemesIndex, c2279_14, c2279_15, handleUserStoreChange, handleSelectivelySyncedStoreChange;
+const isSyncedModeThemesEnabled = function isSyncedModeThemesEnabled() {
+  return isMobileVisualRefreshEnabled("ClientThemesBackgroundStore");
+};
+const reset = function reset() {
+  if (c2279_14) {
+    c2279_3 = void 0;
+  }
+  c2279_15 = false;
+};
+handleUserStoreChange = function handleUserStoreChange() {
+  const r2 = !PremiumUtils.canUseClientThemes(UserStore.getCurrentUser());
+  if (r2 === c2279_14) {
+    return false;
+  }
+  c2279_14 = r2;
+};
+handleSelectivelySyncedStoreChange = function handleSelectivelySyncedStoreChange() {
+  if (SelectivelySyncedUserSettingsStore.shouldSync("appearance")) {
+    const backgroundGradientPresetId = ClientThemeSettings.getSetting().backgroundGradientPresetId;
+    if (backgroundGradientPresetId == null) {
+      if (c2279_3 == null) {
+        return false;
+      }
+      c2279_3 = void 0;
+    } else {
+      const r18 = BACKGROUND_GRADIENT_PRESETS_MAP[backgroundGradientPresetId];
+      if (r18 === c2279_3) {
+        return false;
+      }
+      c2279_3 = r18;
+    }
+    return void 0;
+  }
+  return false;
+};
+const handleSyncedModeChange = function handleSyncedModeChange() {
+  return isPerModeThemingActive(isSyncedModeThemesEnabled);
+};
+const handleSameAsDeviceThemeToggle = function handleSameAsDeviceThemeToggle() {
+  return isMobileVisualRefreshEnabled("ClientThemesBackgroundStore");
+};
+const handleUserSettingsProtoStoreUpdate = function handleUserSettingsProtoStoreUpdate() {
+  if (SelectivelySyncedUserSettingsStore.shouldSync("appearance")) {
+    const backgroundGradientPresetId = ClientThemeSettings.getSetting().backgroundGradientPresetId;
+    if (!(UnsyncedUserSettingsStore.useSystemTheme !== SystemThemeState.ON || backgroundGradientPresetId == null || ThemeStore.isSameAsDeviceThemeEnabled())) {
+      setUseSystemTheme(SystemThemeState.OFF);
+    }
+    if (backgroundGradientPresetId != null) {
+      const r32 = BACKGROUND_GRADIENT_PRESETS_MAP[backgroundGradientPresetId];
+      if (!(r32 == null || c2279_3?.id === r32?.id)) {
+        c2279_3 = r32;
+      }
+    } else if (c2279_3 != null) {
+      c2279_3 = void 0;
+    }
+    return void 0;
+  }
+  return false;
+};
+c2279_14 = true;
+c2279_15 = false;
+class ClientThemesBackgroundStore extends Module589.PersistedStore {
+  static displayName = "ClientThemesBackgroundStore";
+  static persistKey = "ClientThemesBackgroundStore";
+  migrations = [(a0) => ({
+    gradientPresetId: a0 == null ? void 0 : a0.gradientPreset?.id
+  })];
+  initialize(a0) {
+    if (a0 != null) {
+      c2279_3 = a0?.gradientPresetId != null ? BACKGROUND_GRADIENT_PRESETS_MAP[a0.gradientPresetId] : void 0;
+    }
+    this.waitFor(ChannelStore, SelectivelySyncedUserSettingsStore, ThemeStore, UnsyncedUserSettingsStore, UserSettingsProtoStore, UserStore);
+    this.syncWith([UserStore], handleUserStoreChange);
+    this.syncWith([SelectivelySyncedUserSettingsStore], handleSelectivelySyncedStoreChange);
+  }
+  getState() {
+    return c2279_14 ? {} : {
+      gradientPresetId: c2279_3?.id
+    };
+  }
+  get gradientPreset() {
+    if (isPerModeThemingActive(isSyncedModeThemesEnabled)) {
+      const backgroundGradientPresetId = ThemeStore.getSyncedClientTheme(ThemeStore.systemTheme)?.backgroundGradientPresetId;
+      return backgroundGradientPresetId != null ? BACKGROUND_GRADIENT_PRESETS_MAP[backgroundGradientPresetId] : void 0;
+    }
+    return c2279_3;
+  }
+  getLinearGradient() {
+    return this.gradientPreset != null ? getLinearGradientForBackgroundGradient(this.gradientPreset) : null;
+  }
+  get isPreview() {
+    return c2279_14;
+  }
+  get isCoachmark() {
+    return c2279_15;
+  }
+  get mobilePendingThemeIndex() {
+    return mobileThemesIndex;
+  }
+}
+const clientThemesBackgroundStore = new ClientThemesBackgroundStore(Dispatcher, {
+  UPDATE_BACKGROUND_GRADIENT_PRESET: function handleUpdateBackgroundGradientPreset({ presetId }) {
+    c2279_3 = presetId != null ? BACKGROUND_GRADIENT_PRESETS_MAP[presetId] : void 0;
+  },
+  UPDATE_MOBILE_PENDING_THEME_INDEX: function handleUpdateMobilePendingThemeIndex({ mobileThemesIndex: mobileThemesIndex2 }) {
+    mobileThemesIndex = mobileThemesIndex2 ?? void 0;
+  },
+  RESET_PREVIEW_CLIENT_THEME: function handleResetPreviewClientTheme() {
+    c2279_3 = void 0;
+  },
+  CLIENT_THEMES_EDITOR_CLOSE: reset,
+  CHANNEL_SELECT: function handleChannelSelect({ channelId, guildId }) {
+    const currentUser = UserStore.getCurrentUser();
+    if (channelId != null && guildId != null && !UNSAFE_isDismissibleContentDismissed(DismissibleContent.CLIENT_THEMES_COACHMARK) && ageEligibleForPremiumUpsell(currentUser)) {
+      const channel = ChannelStore.getChannel(channelId);
+      if (channel != null && isGuildTextChannelType(channel.type)) {
+        c2279_15 = true;
+      }
+    }
+  },
+  LOGOUT: reset,
+  CACHE_LOADED: handleUserSettingsProtoStoreUpdate,
+  CONNECTION_OPEN: handleUserSettingsProtoStoreUpdate,
+  OVERLAY_INITIALIZE: handleUserSettingsProtoStoreUpdate,
+  SELECTIVELY_SYNCED_USER_SETTINGS_UPDATE: handleUserSettingsProtoStoreUpdate,
+  UNSYNCED_USER_SETTINGS_UPDATE: handleUserSettingsProtoStoreUpdate,
+  USER_SETTINGS_PROTO_UPDATE: handleUserSettingsProtoStoreUpdate,
+  SYSTEM_THEME_CHANGE: handleSyncedModeChange,
+  UPDATE_SYNCED_CLIENT_THEME: handleSyncedModeChange,
+  SET_SAME_AS_DEVICE_THEME_ENABLED: handleSameAsDeviceThemeToggle,
+  CLEAR_SYNCED_CLIENT_THEMES: handleSameAsDeviceThemeToggle
+});
+export default clientThemesBackgroundStore;

modules/client_themes/ClientThemesConstants.tsx

@@ -0,0 +1,463 @@
+// Metro module 4002 (f4003).
+import { ThemeTypes } from "../../_bundle/Module505";
+import { ClientThemeType } from "./ClientThemesTypes";
+import { BackgroundGradientPresetId } from "../../_bundle/Module1306";
+import { intl, t } from "../../intl/index.native";
+import { keyBy } from "../../_bundle/Module12";
+const r13 = [{
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.MINT_APPLE,
+  theme: ThemeTypes.LIGHT,
+  colors: [{
+    token: "BG_GRADIENT_MINT_APPLE_1",
+    stop: 6.15
+  }, {
+    token: "BG_GRADIENT_MINT_APPLE_2",
+    stop: 48.7
+  }, {
+    token: "BG_GRADIENT_MINT_APPLE_3",
+    stop: 93.07
+  }],
+  angle: 180,
+  getName: () => intl.string(t.kCdS4d),
+  midpointPercentage: 27
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.CITRUS_SHERBERT,
+  theme: ThemeTypes.LIGHT,
+  colors: [{
+    token: "BG_GRADIENT_CITRUS_SHERBERT_1",
+    stop: 31.1
+  }, {
+    token: "BG_GRADIENT_CITRUS_SHERBERT_2",
+    stop: 67.09
+  }],
+  angle: 180,
+  getName: () => intl.string(t.S4UnEz),
+  midpointPercentage: 27
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.RETRO_RAINCLOUD,
+  theme: ThemeTypes.LIGHT,
+  colors: [{
+    token: "BG_GRADIENT_RETRO_RAINCLOUD_1",
+    stop: 5.64
+  }, {
+    token: "BG_GRADIENT_RETRO_RAINCLOUD_2",
+    stop: 26.38
+  }, {
+    token: "BG_GRADIENT_RETRO_RAINCLOUD_2",
+    stop: 49.92
+  }, {
+    token: "BG_GRADIENT_RETRO_RAINCLOUD_1",
+    stop: 73.12
+  }],
+  angle: 148.71,
+  getName: () => intl.string(t["48xnKc"]),
+  midpointPercentage: 50
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.HANAMI,
+  theme: ThemeTypes.LIGHT,
+  colors: [{
+    token: "BG_GRADIENT_HANAMI_1",
+    stop: 3.56
+  }, {
+    token: "BG_GRADIENT_HANAMI_2",
+    stop: 35.49
+  }, {
+    token: "BG_GRADIENT_HANAMI_3",
+    stop: 68.78
+  }],
+  angle: 38.08,
+  getName: () => intl.string(t.G4HsBJ),
+  midpointPercentage: 50
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.SUNRISE,
+  theme: ThemeTypes.LIGHT,
+  colors: [{
+    token: "BG_GRADIENT_SUNRISE_1",
+    stop: 8.62
+  }, {
+    token: "BG_GRADIENT_SUNRISE_2",
+    stop: 48.07
+  }, {
+    token: "BG_GRADIENT_SUNRISE_3",
+    stop: 76.04
+  }],
+  angle: 154.19,
+  getName: () => intl.string(t.NAt885),
+  midpointPercentage: 50
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.COTTON_CANDY,
+  theme: ThemeTypes.LIGHT,
+  colors: [{
+    token: "BG_GRADIENT_COTTON_CANDY_1",
+    stop: 8.5
+  }, {
+    token: "BG_GRADIENT_COTTON_CANDY_2",
+    stop: 94.28
+  }],
+  angle: 180.14,
+  getName: () => intl.string(t.godtzA),
+  midpointPercentage: 50
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.LOFI_VIBES,
+  theme: ThemeTypes.LIGHT,
+  colors: [{
+    token: "BG_GRADIENT_LOFI_VIBES_1",
+    stop: 7.08
+  }, {
+    token: "BG_GRADIENT_LOFI_VIBES_2",
+    stop: 34.94
+  }, {
+    token: "BG_GRADIENT_LOFI_VIBES_3",
+    stop: 65.12
+  }, {
+    token: "BG_GRADIENT_LOFI_VIBES_4",
+    stop: 96.23
+  }],
+  angle: 179.52,
+  getName: () => intl.string(t.hlS2xq),
+  midpointPercentage: 27
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.DESERT_KHAKI,
+  theme: ThemeTypes.LIGHT,
+  colors: [{
+    token: "BG_GRADIENT_DESERT_KHAKI_1",
+    stop: 12.92
+  }, {
+    token: "BG_GRADIENT_DESERT_KHAKI_2",
+    stop: 32.92
+  }, {
+    token: "BG_GRADIENT_DESERT_KHAKI_3",
+    stop: 52.11
+  }],
+  angle: 38.99,
+  getName: () => intl.string(t.abMn9y),
+  midpointPercentage: 50
+}];
+const DARKER = ThemeTypes.DARKER;
+const r12 = [{
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.SUNSET,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_SUNSET_1",
+    stop: 27.57
+  }, {
+    token: "BG_GRADIENT_SUNSET_2",
+    stop: 71.25
+  }],
+  angle: 141.68,
+  getName: () => intl.string(t.JKDra4),
+  midpointPercentage: 35
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.CHROMA_GLOW,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_CHROMA_GLOW_1",
+    stop: 3.94
+  }, {
+    token: "BG_GRADIENT_CHROMA_GLOW_2",
+    stop: 26.1
+  }, {
+    token: "BG_GRADIENT_CHROMA_GLOW_3",
+    stop: 39.82
+  }, {
+    token: "BG_GRADIENT_CHROMA_GLOW_4",
+    stop: 56.89
+  }, {
+    token: "BG_GRADIENT_CHROMA_GLOW_5",
+    stop: 76.45
+  }],
+  angle: 128.92,
+  getName: () => intl.string(t.kwc8Us),
+  midpointPercentage: 15
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.FOREST,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_FOREST_1",
+    stop: 11.2
+  }, {
+    token: "BG_GRADIENT_FOREST_2",
+    stop: 29.93
+  }, {
+    token: "BG_GRADIENT_FOREST_3",
+    stop: 48.64
+  }, {
+    token: "BG_GRADIENT_FOREST_4",
+    stop: 67.85
+  }, {
+    token: "BG_GRADIENT_FOREST_5",
+    stop: 83.54
+  }],
+  angle: 162.27,
+  getName: () => intl.string(t["TeA/j8"]),
+  midpointPercentage: 50
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.CRIMSON_MOON,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_CRIMSON_MOON_1",
+    stop: 16.17
+  }, {
+    token: "BG_GRADIENT_CRIMSON_MOON_2",
+    stop: 72
+  }],
+  angle: 64.92,
+  getName: () => intl.string(t.blIucj),
+  midpointPercentage: 30
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.MIDNIGHT_BLURPLE,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_MIDNIGHT_BLURPLE_1",
+    stop: 11.21
+  }, {
+    token: "BG_GRADIENT_MIDNIGHT_BLURPLE_2",
+    stop: 61.92
+  }],
+  angle: 48.17,
+  getName: () => intl.string(t.O1yOXG),
+  midpointPercentage: 24
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.MARS,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_MARS_1",
+    stop: 14.61
+  }, {
+    token: "BG_GRADIENT_MARS_2",
+    stop: 74.62
+  }],
+  angle: 170.82,
+  getName: () => intl.string(t["1swi9s"]),
+  midpointPercentage: 50
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.DUSK,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_DUSK_1",
+    stop: 12.84
+  }, {
+    token: "BG_GRADIENT_DUSK_2",
+    stop: 85.99
+  }],
+  angle: 180,
+  getName: () => intl.string(t.So2Wuh),
+  midpointPercentage: 50
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.UNDER_THE_SEA,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_UNDER_THE_SEA_1",
+    stop: 1.91
+  }, {
+    token: "BG_GRADIENT_UNDER_THE_SEA_2",
+    stop: 48.99
+  }, {
+    token: "BG_GRADIENT_UNDER_THE_SEA_3",
+    stop: 96.35
+  }],
+  angle: 179.14,
+  getName: () => intl.string(t.a22o48),
+  midpointPercentage: 50
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.RETRO_STORM,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_RETRO_STORM_1",
+    stop: 5.64
+  }, {
+    token: "BG_GRADIENT_RETRO_STORM_2",
+    stop: 26.38
+  }, {
+    token: "BG_GRADIENT_RETRO_STORM_2",
+    stop: 49.92
+  }, {
+    token: "BG_GRADIENT_RETRO_STORM_1",
+    stop: 73.12
+  }],
+  angle: 148.71,
+  getName: () => intl.string(t.Bf294R),
+  midpointPercentage: 61
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.NEON_NIGHTS,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_NEON_NIGHTS_1",
+    stop: 0
+  }, {
+    token: "BG_GRADIENT_NEON_NIGHTS_2",
+    stop: 50
+  }, {
+    token: "BG_GRADIENT_NEON_NIGHTS_3",
+    stop: 100
+  }],
+  angle: 180,
+  getName: () => intl.string(t["p+XCta"]),
+  midpointPercentage: 50
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.STRAWBERRY_LEMONADE,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_STRAWBERRY_LEMONADE_1",
+    stop: 18.79
+  }, {
+    token: "BG_GRADIENT_STRAWBERRY_LEMONADE_2",
+    stop: 49.76
+  }, {
+    token: "BG_GRADIENT_STRAWBERRY_LEMONADE_3",
+    stop: 80.72
+  }],
+  angle: 161.03,
+  getName: () => intl.string(t["d5Ar+j"]),
+  midpointPercentage: 32
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.AURORA,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_AURORA_1",
+    stop: 10.39
+  }, {
+    token: "BG_GRADIENT_AURORA_2",
+    stop: 26.87
+  }, {
+    token: "BG_GRADIENT_AURORA_3",
+    stop: 48.31
+  }, {
+    token: "BG_GRADIENT_AURORA_4",
+    stop: 64.98
+  }, {
+    token: "BG_GRADIENT_AURORA_5",
+    stop: 92.5
+  }],
+  angle: 239.16,
+  getName: () => intl.string(t.Je1FWC),
+  midpointPercentage: 34
+}, {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.SEPIA,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_SEPIA_1",
+    stop: 14.14
+  }, {
+    token: "BG_GRADIENT_SEPIA_2",
+    stop: 60.35
+  }],
+  angle: 69.98,
+  getName: () => intl.string(t["Z+Un40"]),
+  midpointPercentage: 50
+}];
+const r333 = {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.BLURPLE_TWILIGHT,
+  theme: DARKER,
+  colors: [{
+    token: "BG_GRADIENT_BLURPLE_TWILIGHT_1",
+    stop: 11.18
+  }, {
+    token: "BG_GRADIENT_BLURPLE_TWILIGHT_2",
+    stop: 64.54
+  }],
+  angle: 47.61,
+  getName: () => intl.string(t.Mfoe3p),
+  midpointPercentage: 50
+};
+const r346 = {
+  type: ClientThemeType.BACKGROUND_GRADIENT_PRESET,
+  id: BackgroundGradientPresetId.EASTER_EGG,
+  theme: ThemeTypes.LIGHT,
+  colors: [{
+    token: "BG_GRADIENT_EASTER_EGG_1",
+    stop: 4
+  }, {
+    token: "BG_GRADIENT_EASTER_EGG_2",
+    stop: 96
+  }],
+  angle: 180,
+  getName: () => intl.string(t.mFinbb),
+  midpointPercentage: 50
+};
+const r11 = [...r13, ...r12, r333, r346];
+const r359 = [r333, ...r12, ...r13, r346];
+const r367 = {
+  DARK: 0,
+  0: "DARK",
+  LIGHT: 1,
+  1: "LIGHT",
+  SYSTEM: 2,
+  2: "SYSTEM"
+};
+const r378 = [{
+  type: ClientThemeType.STANDARD_BACKGROUND_THEME,
+  theme: DARKER,
+  getName: () => intl.string(t.b8Cei3)
+}, {
+  type: ClientThemeType.STANDARD_BACKGROUND_THEME,
+  theme: ThemeTypes.LIGHT,
+  getName: () => intl.string(t.K2sFfo)
+}, {
+  type: ClientThemeType.STANDARD_BACKGROUND_THEME,
+  theme: ThemeTypes.MIDNIGHT,
+  getName: () => intl.string(t.pQwSpQ)
+}, {
+  type: ClientThemeType.STANDARD_BACKGROUND_THEME,
+  theme: "system",
+  getName: () => intl.string(t.zlvNOj)
+}];
+const r406 = [{
+  type: ClientThemeType.STANDARD_BACKGROUND_THEME,
+  theme: ThemeTypes.LIGHT,
+  getName: () => intl.string(t.K2sFfo)
+}, {
+  type: ClientThemeType.STANDARD_BACKGROUND_THEME,
+  theme: ThemeTypes.DARK,
+  getName: () => intl.string(t.SMPT1k)
+}, {
+  type: ClientThemeType.STANDARD_BACKGROUND_THEME,
+  theme: ThemeTypes.DARKER,
+  getName: () => intl.string(t.b8Cei3)
+}, {
+  type: ClientThemeType.STANDARD_BACKGROUND_THEME,
+  theme: ThemeTypes.MIDNIGHT,
+  getName: () => intl.string(t.Do4ZJx)
+}, {
+  type: ClientThemeType.STANDARD_BACKGROUND_THEME,
+  theme: "system",
+  getName: () => intl.string(t.zlvNOj)
+}];
+const r437 = keyBy(r11, "id");
+const r438 = {
+  SIZE_48: 48,
+  48: "SIZE_48",
+  SIZE_60: 60,
+  60: "SIZE_60"
+};
+export { r13 as LIGHT_BACKGROUND_GRADIENT_PRESETS };
+export { r12 as DARK_BACKGROUND_GRADIENT_PRESETS };
+export { r11 as BACKGROUND_GRADIENT_PRESETS };
+export { r359 as BACKGROUND_GRADIENT_PRESETS_MOBILE };
+export { r367 as StandardBackgroundThemeIndex };
+export { r378 as LEGACY_STANDARD_BACKGROUND_THEMES };
+export { r406 as REFRESH_STANDARD_BACKGROUND_THEMES };
+export { r437 as BACKGROUND_GRADIENT_PRESETS_MAP };
+export { r438 as ThemeIconSizes };

modules/client_themes/ClientThemesTypes.tsx

@@ -0,0 +1,20 @@
+// Metro module 4003 (f4004).
+import { PROTO_THEME_MAP_WEB_REFRESH } from "../user_settings/ThemeConstants";
+import SentryUtils_native from "../../utils/SentryUtils.native";
+import { Theme } from "../../_bundle/Module1306";
+import * as _Module4004 from "../../_bundle/Module4004";
+export const ClientThemeType = _Module4004.ClientThemeType;
+export function getProtoThemeFromBaseTheme(a0) {
+  let UNSET;
+  const r15 = Object.entries(PROTO_THEME_MAP_WEB_REFRESH).find((item) => {
+    const [, r13] = item;
+    return r13 === a0;
+  });
+  if (r15 === void 0) {
+    SentryUtils_native.captureException(new Error(`No ProtoTheme found for base theme: ${a0}`));
+    UNSET = Theme.UNSET;
+  } else {
+    UNSET = parseInt(r15[0]);
+  }
+  return UNSET;
+}

modules/client_themes/ClientThemesUtils.tsx

@@ -0,0 +1,28 @@
+// Metro module 4032 (f4033).
+import { LEGACY_STANDARD_BACKGROUND_THEMES, REFRESH_STANDARD_BACKGROUND_THEMES } from "./ClientThemesConstants";
+import { PROTO_THEME_MAP_MOBILE, PROTO_THEME_MAP_WEB_REFRESH } from "../user_settings/ThemeConstants";
+import { ThemeTypes } from "../../_bundle/Module505";
+import { unsafe_getResolvedRawColor } from "../../_bundle/Module711";
+PROTO_THEME_MAP_WEB_REFRESH;
+export function getThemeForColor(a0) {
+  return a0.l <= 0.3 ? ThemeTypes.DARK : ThemeTypes.LIGHT;
+}
+export function getLinearGradientForBackgroundGradient(a0) {
+  return `linear-gradient(${a0.angle}deg, ${a0.colors.map(({ token, stop }) => `${unsafe_getResolvedRawColor(token, {
+    saturation: 1
+  })} ${stop}%`).join(", ")})`;
+}
+export function areThemesEqualForGradientThemes(a0, a1) {
+  return a0 === a1 || (a0 === ThemeTypes.DARK && a1 === ThemeTypes.DARKER || a0 === ThemeTypes.DARKER && a1 === ThemeTypes.DARK);
+}
+export function getBaseTheme(a0) {
+  return PROTO_THEME_MAP_MOBILE[a0];
+}
+export function getThemeName(c13792_0, a1) {
+  const r9 = (a1 ? REFRESH_STANDARD_BACKGROUND_THEMES : LEGACY_STANDARD_BACKGROUND_THEMES).find((item) => item.theme === c13792_0);
+  let r10 = r9 == null ? void 0 : r9.getName();
+  if (r10 == null) {
+    r10 = "";
+  }
+  return r10;
+}

modules/client_themes/CustomThemesRandomUtils.tsx

@@ -0,0 +1,96 @@
+// Metro module 4038 (f4039).
+import Module689 from "../../_bundle/Module689";
+const _excluded = ["#94E0CF", "#9AF0B1", "#9A90FF", "#9A53FF", "#FDA6E4", "#FFE6C0", "#EFB4AA", "#56B69F", "#29C566", "#5348CA", "#6D24D4", "#CA48C8", "#F0AE29", "#DF4232"];
+let c2315_3 = [0, 45, 90, 135, 180, 225, 270, 315];
+let c2315_4 = [20, 40, 60, 80];
+let c2315_5 = {
+  SOLID: "solid",
+  GRADIENT: "gradient"
+};
+let c2315_6 = {
+  TWO_COLOR: "two-color",
+  ANALOGOUS: "analogous",
+  COMPLEMENTARY: "complementary",
+  SPLIT_COMPLEMENTARY: "split-complementary",
+  TRIADIC: "triadic"
+};
+let c2315_7 = [c2315_6.ANALOGOUS, c2315_6.COMPLEMENTARY, c2315_6.SPLIT_COMPLEMENTARY, c2315_6.TRIADIC];
+export { _excluded as COLOR_PALETTE };
+export { c2315_5 as ColorType };
+export { c2315_6 as GradientType };
+export function generateRandomColorOptions() {
+  const intensity = c2315_4[Math.floor(Math.random() * c2315_4.length)];
+  const angle = c2315_3[Math.floor(Math.random() * c2315_3.length)];
+  if ((Math.random() < 0.2 ? "path1" : "path2") === "path1") {
+    const r65 = Math.floor(Math.random() * _excluded.length);
+    let r73 = Math.floor(Math.random() * _excluded.length);
+    while (r73 === r65) {
+      r73 = Math.floor(Math.random() * _excluded.length);
+    }
+    return {
+      type: c2315_5.GRADIENT,
+      colors: [_excluded[r65], _excluded[r73]],
+      angle,
+      intensity,
+      gradientType: c2315_6.TWO_COLOR
+    };
+  }
+  const r41 = _excluded[Math.floor(Math.random() * _excluded.length)];
+  const gradientType = c2315_7[Math.floor(Math.random() * c2315_7.length)];
+  return {
+    type: c2315_5.GRADIENT,
+    colors: (function generateColorHarmony(a0, a1) {
+      let r32, r34, r41, r48, r55;
+      L14: {
+        L12: {
+          L10: {
+            L8: {
+              try {
+                const r17 = Module689(a0);
+                const r20 = r17.get("hsl.h");
+                const r23 = r17.get("hsl.s");
+                const r26 = r17.get("hsl.l");
+                if (c2315_6.ANALOGOUS === a1) {
+                  r55 = (function generateAnalogousColors(a0, a1, a2, a3) {
+                    return [Module689.hsl(a3 - 30, a1, a2).hex(), a0, Module689.hsl(a3 + 30, a1, a2).hex()];
+                  })(a0, r23, r26, r20);
+                  break L14;
+                }
+                if (c2315_6.COMPLEMENTARY === a1) {
+                  r48 = (function generateComplementaryColors(a0, a1, a2, a3) {
+                    const r17 = Module689.hsl((a3 + 180) % 360, a1, a2).hex();
+                    return [a0, Module689.mix(a0, r17, 0.5).hex(), r17];
+                  })(a0, r23, r26, r20);
+                  break L12;
+                }
+                if (c2315_6.SPLIT_COMPLEMENTARY === a1) {
+                  r41 = (function generateSplitComplementaryColors(a0, a1, a2, a3) {
+                    return [a0, Module689.hsl((a3 + 150) % 360, a1, a2).hex(), Module689.hsl((a3 + 210) % 360, a1, a2).hex()];
+                  })(a0, r23, r26, r20);
+                  break L10;
+                }
+                if (c2315_6.TRIADIC === a1) {
+                  r34 = (function generateTriadicColors(a0, a1, a2, a3) {
+                    return [a0, Module689.hsl((a3 + 120) % 360, a1, a2).hex(), Module689.hsl((a3 + 240) % 360, a1, a2).hex()];
+                  })(a0, r23, r26, r20);
+                  break L8;
+                }
+                r32 = [a0];
+              } catch ($e) {
+                return [a0];
+              }
+              return r32;
+            }
+            return r34;
+          }
+          return r41;
+        }
+        return r48;
+      }
+      return r55;
+    })(r41, gradientType),
+    angle,
+    intensity,
+    gradientType
+  };
+}

modules/client_themes/SavedCustomThemeActionCreators.tsx

@@ -0,0 +1,31 @@
+// Metro module 14281 (f14282).
+import SavedCustomThemeStore from "./SavedCustomThemeStore";
+import { Endpoints } from "../../Constants";
+import Dispatcher from "../../Dispatcher";
+import { HTTP } from "../../_bundle/sendRequest";
+export function fetchUserCustomThemes() {
+  if (!SavedCustomThemeStore.isFetching()) {
+    Dispatcher.dispatch({
+      type: "SAVED_CUSTOM_THEMES_FETCH_START"
+    });
+    HTTP.get({
+      url: Endpoints.USERS_ME_CUSTOM_THEMES,
+      oldFormErrors: true,
+      rejectWithError: true
+    }).then((result) => {
+      let themes = result.body?.custom_themes;
+      if (themes == null) {
+        themes = [];
+      }
+      Dispatcher.dispatch({
+        type: "SAVED_CUSTOM_THEMES_FETCH_SUCCESS",
+        themes
+      });
+    }).catch((a0) => {
+      Dispatcher.dispatch({
+        type: "SAVED_CUSTOM_THEMES_FETCH_FAILURE",
+        error: a0
+      });
+    });
+  }
+}

modules/client_themes/SavedCustomThemeStore.tsx

@@ -0,0 +1,95 @@
+// Metro module 4123 (f4124).
+import { PROTO_THEME_MAP_MOBILE, PROTO_THEME_MAP_WEB_REFRESH } from "../user_settings/ThemeConstants";
+import SentryUtils_native from "../../utils/SentryUtils.native";
+import Module589 from "../../_bundle/Module589";
+import Dispatcher from "../../Dispatcher";
+let c2376_3, savedCustomThemes, NOT_FETCHED;
+const validateSavedTheme = function validateSavedTheme(a0) {
+  let r10;
+  try {
+    const r6 = PROTO_THEME_MAP_MOBILE[a0.base_theme];
+    r10 = a0.colors.length > 0 && typeof a0.gradient_angle === "number" && typeof a0.base_mix === "number" && r6 != null;
+  } catch ($e) {
+    SentryUtils_native.captureMessage("Invalid saved custom theme: " + $e, {
+      tags: {
+        app_context: "SavedCustomThemeStore"
+      }
+    });
+    return false;
+  }
+  return r10;
+};
+PROTO_THEME_MAP_WEB_REFRESH;
+c2376_3 = {
+  NOT_FETCHED: 0,
+  0: "NOT_FETCHED",
+  IS_FETCHING: 1,
+  1: "IS_FETCHING",
+  HAS_FETCHED: 2,
+  2: "HAS_FETCHED",
+  ERROR: 3,
+  3: "ERROR"
+};
+savedCustomThemes = [];
+NOT_FETCHED = c2376_3.NOT_FETCHED;
+class SavedCustomThemeStore extends Module589.PersistedStore {
+  static displayName = "SavedCustomThemeStore";
+  static persistKey = "SavedCustomThemeStore";
+  initialize(a0) {
+    if (a0 != null) {
+      savedCustomThemes = a0.savedCustomThemes;
+    }
+    NOT_FETCHED = c2376_3.NOT_FETCHED;
+  }
+  getState() {
+    let savedCustomThemes2 = savedCustomThemes;
+    if (savedCustomThemes2 == null) {
+      savedCustomThemes2 = [];
+    }
+    return {
+      savedCustomThemes: savedCustomThemes2
+    };
+  }
+  getSavedCustomTheme() {
+    return savedCustomThemes?.length > 0 ? savedCustomThemes[0].colors.length > 0 ? savedCustomThemes[0] : null : null;
+  }
+  getFetchState() {
+    return NOT_FETCHED;
+  }
+  hasSavedCustomThemes() {
+    return savedCustomThemes?.length > 0;
+  }
+  isFetching() {
+    return NOT_FETCHED === c2376_3.IS_FETCHING;
+  }
+  hasFetched() {
+    return NOT_FETCHED === c2376_3.HAS_FETCHED;
+  }
+  hasError() {
+    return NOT_FETCHED === c2376_3.ERROR;
+  }
+}
+const savedCustomThemeStore = new SavedCustomThemeStore(Dispatcher, {
+  SAVED_CUSTOM_THEMES_FETCH_START: function handleCustomThemesFetchStart() {
+    NOT_FETCHED = c2376_3.IS_FETCHING;
+  },
+  SAVED_CUSTOM_THEMES_FETCH_SUCCESS: function handleCustomThemesFetchSuccess({ themes }) {
+    NOT_FETCHED = c2376_3.HAS_FETCHED;
+    savedCustomThemes = themes.filter(validateSavedTheme).map((item) => ({
+      colors: item.colors,
+      gradient_angle: item.gradient_angle,
+      base_mix: item.base_mix,
+      base_theme: PROTO_THEME_MAP_MOBILE[item.base_theme]
+    }));
+  },
+  SAVED_CUSTOM_THEMES_FETCH_FAILURE: function handleCustomThemesFetchFailure({ error }) {
+    NOT_FETCHED = c2376_3.ERROR;
+    SentryUtils_native.captureException(error, {
+      tags: {
+        app_context: "SavedCustomThemeStore"
+      }
+    });
+  }
+});
+export default savedCustomThemeStore;
+export { c2376_3 as FetchState };

modules/client_themes/images/native/SynchronizeIconNative.tsx

@@ -0,0 +1,16 @@
+// Metro module 14292 (f14293).
+import Module8531, { G, Rect, Path } from "../../../../_bundle/Module8531";
+export default function SynchronizeIcon(props) {
+  const fill = props.fill;
+  return <Module8531 style={props.iconStyles} x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" fill={fill}>
+    <G id="Frame_-_24px">
+      <Rect y="0" fill="none" width="24" height="24" />
+    </G>
+    <G id="Filled_Icons">
+      <G>
+        <Path fill={fill} d="M6.351,6.351C7.824,4.871,9.828,4,12,4c4.411,0,8,3.589,8,8h2c0-5.515-4.486-10-10-10 C9.285,2,6.779,3.089,4.938,4.938L3,3v6h6L6.351,6.351z" />
+        <Path fill={fill} d="M17.649,17.649C16.176,19.129,14.173,20,12,20c-4.411,0-8-3.589-8-8H2c0,5.515,4.486,10,10,10 c2.716,0,5.221-1.089,7.062-2.938L21,21v-6h-6L17.649,17.649z" />
+      </G>
+    </G>
+  </Module8531>;
+};

modules/client_themes/intl/ClientThemes.messages.js

@@ -0,0 +1,132 @@
+// Metro module 2421 (f2422).
+import { loadJsonAsset } from "../../asset_json/native/AssetJsonUtils";
+import * as _Module2422 from "../../../_bundle/Module2422";
+import * as _Module2423 from "../../../_bundle/Module2423";
+import * as _Module2424 from "../../../_bundle/Module2424";
+import * as _Module2425 from "../../../_bundle/Module2425";
+import * as _Module2426 from "../../../_bundle/Module2426";
+import * as _Module2427 from "../../../_bundle/Module2427";
+import * as _Module2428 from "../../../_bundle/Module2428";
+import * as _Module2429 from "../../../_bundle/Module2429";
+import * as _Module2430 from "../../../_bundle/Module2430";
+import * as _Module2431 from "../../../_bundle/Module2431";
+import * as _Module2432 from "../../../_bundle/Module2432";
+import * as _Module2433 from "../../../_bundle/Module2433";
+import * as _Module2434 from "../../../_bundle/Module2434";
+import * as _Module2435 from "../../../_bundle/Module2435";
+import * as _Module2436 from "../../../_bundle/Module2436";
+import * as _Module2437 from "../../../_bundle/Module2437";
+import * as _Module2438 from "../../../_bundle/Module2438";
+import * as _Module2439 from "../../../_bundle/Module2439";
+import * as _Module2440 from "../../../_bundle/Module2440";
+import * as _Module2441 from "../../../_bundle/Module2441";
+import * as _Module2442 from "../../../_bundle/Module2442";
+import * as _Module2443 from "../../../_bundle/Module2443";
+import * as _Module2444 from "../../../_bundle/Module2444";
+import * as _Module2445 from "../../../_bundle/Module2445";
+import * as _Module2446 from "../../../_bundle/Module2446";
+import * as _Module2447 from "../../../_bundle/Module2447";
+import * as _Module2448 from "../../../_bundle/Module2448";
+import * as _Module2449 from "../../../_bundle/Module2449";
+import * as _Module2450 from "../../../_bundle/Module2450";
+import * as _Module2451 from "../../../_bundle/Module2451";
+import * as _Module2452 from "../../../_bundle/Module2452";
+import { createLoader, makeMessagesProxy } from "../../../_bundle/Module1274";
+const loader = createLoader({
+  bg: () => loadJsonAsset(_Module2422).then((result) => ({
+    default: result
+  })),
+  cs: () => loadJsonAsset(_Module2423).then((result) => ({
+    default: result
+  })),
+  da: () => loadJsonAsset(_Module2424).then((result) => ({
+    default: result
+  })),
+  de: () => loadJsonAsset(_Module2425).then((result) => ({
+    default: result
+  })),
+  el: () => loadJsonAsset(_Module2426).then((result) => ({
+    default: result
+  })),
+  "en-GB": () => loadJsonAsset(_Module2427).then((result) => ({
+    default: result
+  })),
+  "es-419": () => loadJsonAsset(_Module2428).then((result) => ({
+    default: result
+  })),
+  "es-ES": () => loadJsonAsset(_Module2429).then((result) => ({
+    default: result
+  })),
+  fi: () => loadJsonAsset(_Module2430).then((result) => ({
+    default: result
+  })),
+  fr: () => loadJsonAsset(_Module2431).then((result) => ({
+    default: result
+  })),
+  hi: () => loadJsonAsset(_Module2432).then((result) => ({
+    default: result
+  })),
+  hr: () => loadJsonAsset(_Module2433).then((result) => ({
+    default: result
+  })),
+  hu: () => loadJsonAsset(_Module2434).then((result) => ({
+    default: result
+  })),
+  it: () => loadJsonAsset(_Module2435).then((result) => ({
+    default: result
+  })),
+  ja: () => loadJsonAsset(_Module2436).then((result) => ({
+    default: result
+  })),
+  ko: () => loadJsonAsset(_Module2437).then((result) => ({
+    default: result
+  })),
+  lt: () => loadJsonAsset(_Module2438).then((result) => ({
+    default: result
+  })),
+  nl: () => loadJsonAsset(_Module2439).then((result) => ({
+    default: result
+  })),
+  no: () => loadJsonAsset(_Module2440).then((result) => ({
+    default: result
+  })),
+  pl: () => loadJsonAsset(_Module2441).then((result) => ({
+    default: result
+  })),
+  "pt-BR": () => loadJsonAsset(_Module2442).then((result) => ({
+    default: result
+  })),
+  ro: () => loadJsonAsset(_Module2443).then((result) => ({
+    default: result
+  })),
+  ru: () => loadJsonAsset(_Module2444).then((result) => ({
+    default: result
+  })),
+  "sv-SE": () => loadJsonAsset(_Module2445).then((result) => ({
+    default: result
+  })),
+  th: () => loadJsonAsset(_Module2446).then((result) => ({
+    default: result
+  })),
+  tr: () => loadJsonAsset(_Module2447).then((result) => ({
+    default: result
+  })),
+  uk: () => loadJsonAsset(_Module2448).then((result) => ({
+    default: result
+  })),
+  vi: () => loadJsonAsset(_Module2449).then((result) => ({
+    default: result
+  })),
+  "zh-CN": () => loadJsonAsset(_Module2450).then((result) => ({
+    default: result
+  })),
+  "zh-TW": () => loadJsonAsset(_Module2451).then((result) => ({
+    default: result
+  })),
+  "en-US": () => loadJsonAsset(_Module2452).then((result) => ({
+    default: result
+  }))
+}, "en-US");
+const r51 = makeMessagesProxy(loader);
+export default r51;
+export { loader as messagesLoader };

modules/client_themes/native/ClientThemesOverrides.tsx

@@ -0,0 +1,32 @@
+// Metro module 8824 (f8825).
+import { useMemo } from "react";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import { useGradientValue, GradientPercentage } from "./ClientThemesUtils";
+import useIsUsingClientTheme from "./useIsUsingClientTheme";
+const useStyles = createStyles({
+  none: {
+    backgroundColor: "transparent"
+  }
+});
+export function useGradientBottom() {
+  const gradientValue = useGradientValue(GradientPercentage.END);
+  return useMemo(() => gradientValue != null ? {
+    backgroundColor: gradientValue
+  } : void 0, [gradientValue]);
+}
+export function useGradientTop() {
+  const gradientValue2 = useGradientValue(GradientPercentage.START);
+  return useMemo(() => gradientValue2 != null ? {
+    backgroundColor: gradientValue2
+  } : void 0, [gradientValue2]);
+}
+export function useGradientMidpoint() {
+  const gradientValue3 = useGradientValue(GradientPercentage.MID);
+  return useMemo(() => gradientValue3 != null ? {
+    backgroundColor: gradientValue3
+  } : void 0, [gradientValue3]);
+}
+export function useClientThemesOverride(a0) {
+  const styles = useStyles();
+  return useIsUsingClientTheme() ? a0 == null ? styles.none : a0 : void 0;
+}

modules/client_themes/native/ClientThemesUtils.tsx

@@ -0,0 +1,238 @@
+// Metro module 4000 (f4001).
+import _slicedToArray from "../../../_bundle/_slicedToArray";
+import { useMemo } from "react";
+import ThemeStore from "../../user_settings/ThemeStore";
+import ClientThemesBackgroundStore from "../ClientThemesBackgroundStore";
+import CustomThemeMobileStore from "./CustomThemeMobileStore";
+import Module712 from "../../../_bundle/Module712";
+import Module689 from "../../../_bundle/Module689";
+import { hexToRgb, mixColors, hexWithOpacity } from "../../../utils/ColorUtils";
+import Color from "../../../utils/Color";
+import { ClientThemeType } from "../ClientThemesTypes";
+import * as _shared from "../../../design/shared";
+import useColorThemeBackground from "./useColorThemeBackground";
+import useTheme from "../../../hooks/useTheme";
+import { getCustomBackgroundGradient } from "./MobileThemesUtils";
+function $mk73404() {
+  return (a0) => a0.stop;
+}
+let c2278_8, c2278_9, c2278_10, c2278_11, getBottomColorWithOpacity, getTopColorWithOpacity, calculateGradientValueWithOpacity, $mk73405 = function() {
+  return (a0) => Module712.unsafe_rawColors[a0.token];
+};
+const getGradientColorByPercentage = function getGradientColorByPercentage(a0, a1) {
+  if (a0.type === ClientThemeType.BACKGROUND_GRADIENT_PRESET) {
+    const r44 = a0.colors.map($mk73405());
+    const r48 = a0.colors.map($mk73404());
+    const r61 = _slicedToArray(Module689.scale(r44).domain(r48)(a1).rgb(), 3);
+    return {
+      r: r61[0],
+      g: r61[1],
+      b: r61[2]
+    };
+  }
+  const colors = a0.customThemeSettings.colors;
+  if (colors.length === 1) {
+    return hexToRgb(colors[0]);
+  }
+  const r10 = colors.map((color, index) => index / (colors.length - 1) * 100);
+  const r31 = _slicedToArray(Module689.scale(colors).domain(r10)(a1).rgb(), 3);
+  return {
+    r: r31[0],
+    g: r31[1],
+    b: r31[2]
+  };
+};
+getBottomColorWithOpacity = function getBottomColorWithOpacity(a0, a1, a2) {
+  const gradientColorByPercentage = getGradientColorByPercentage(a0, (a0.type === ClientThemeType.BACKGROUND_GRADIENT_PRESET ? a0.angle : a0.customThemeSettings.gradientAngle) > c2278_8 ? c2278_11.END : c2278_11.START);
+  const r47 = mixColors(new Color(gradientColorByPercentage.r, gradientColorByPercentage.g, gradientColorByPercentage.b, a2), new Color(a1.r, a1.g, a1.b, 1 - a2));
+  return Module689.rgb(r47.red, r47.green, r47.blue).hex("rgb");
+};
+getTopColorWithOpacity = function getTopColorWithOpacity(a0, a1, a2) {
+  const gradientColorByPercentage = getGradientColorByPercentage(a0, (a0.type === ClientThemeType.BACKGROUND_GRADIENT_PRESET ? a0.angle : a0.customThemeSettings.gradientAngle) > c2278_8 ? c2278_11.START : c2278_11.END);
+  const r47 = mixColors(new Color(gradientColorByPercentage.r, gradientColorByPercentage.g, gradientColorByPercentage.b, a2), new Color(a1.r, a1.g, a1.b, 1 - a2));
+  return Module689.rgb(r47.red, r47.green, r47.blue).hex("rgb");
+};
+calculateGradientValueWithOpacity = function calculateGradientValueWithOpacity(a0, a1, theme, a3) {
+  let r39, r49, r104;
+  const r10 = _shared.isThemeDark(theme) ? hexToRgb(c2278_10.DARK) : hexToRgb(c2278_10.LIGHT);
+  if (a0.type === ClientThemeType.BACKGROUND_GRADIENT_PRESET) {
+    let midpointPercentage = a0.midpointPercentage;
+    if (midpointPercentage == null) {
+      midpointPercentage = c2278_11.MID;
+    }
+    r39 = midpointPercentage;
+  } else {
+    r39 = c2278_11.MID;
+  }
+  const r12 = a1 == null ? r39 : a1;
+  let r43 = a3;
+  if (a0.type === ClientThemeType.CUSTOM_BACKGROUND_GRADIENT) {
+    const r1 = a0.customThemeSettings.baseMix / 100;
+    if (a3 == null) {
+      const isThemeDark = _shared.isThemeDark(theme);
+      const r2 = 0.2 * r1;
+      r43 = isThemeDark ? 0.12 + r2 : 0.3 + r2;
+    }
+    r49 = r43;
+  } else {
+    r49 = a3 == null ? _shared.isThemeDark(theme) ? c2278_9.LEVEL_2 : c2278_9.LEVEL_4 : a3;
+  }
+  const r71 = a0.type === ClientThemeType.BACKGROUND_GRADIENT_PRESET ? a0.angle : a0.customThemeSettings.gradientAngle;
+  if (r12 === c2278_11.START) {
+    r104 = r71 < c2278_8 ? getBottomColorWithOpacity(a0, r10, r49) : getTopColorWithOpacity(a0, r10, r49);
+  } else if (r12 === c2278_11.END) {
+    r104 = r71 > c2278_8 ? getBottomColorWithOpacity(a0, r10, r49) : getTopColorWithOpacity(a0, r10, r49);
+  } else {
+    const gradientColorByPercentage = getGradientColorByPercentage(a0, r12);
+    const r94 = mixColors(new Color(gradientColorByPercentage.r, gradientColorByPercentage.g, gradientColorByPercentage.b, r49), new Color(r10.r, r10.g, r10.b, 1 - r49));
+    r104 = Module689.rgb(r94.red, r94.green, r94.blue).hex("rgb");
+  }
+  return r104;
+};
+c2278_8 = 128;
+const r29 = {
+  LEVEL_9: 0.9
+};
+r29[0.9] = "LEVEL_9";
+r29.LEVEL_85 = 0.85;
+r29[0.85] = "LEVEL_85";
+r29.LEVEL_8 = 0.8;
+r29[0.8] = "LEVEL_8";
+r29.LEVEL_75 = 0.75;
+r29[0.75] = "LEVEL_75";
+r29.LEVEL_7 = 0.7;
+r29[0.7] = "LEVEL_7";
+r29.LEVEL_6 = 0.6;
+r29[0.6] = "LEVEL_6";
+r29.LEVEL_5 = 0.5;
+r29[0.5] = "LEVEL_5";
+r29.LEVEL_4 = 0.4;
+r29[0.4] = "LEVEL_4";
+r29.LEVEL_35 = 0.35;
+r29[0.35] = "LEVEL_35";
+r29.LEVEL_3 = 0.3;
+r29[0.3] = "LEVEL_3";
+r29.LEVEL_25 = 0.25;
+r29[0.25] = "LEVEL_25";
+r29.LEVEL_2 = 0.2;
+r29[0.2] = "LEVEL_2";
+r29.LEVEL_15 = 0.15;
+r29[0.15] = "LEVEL_15";
+r29.LEVEL_1 = 0.1;
+r29[0.1] = "LEVEL_1";
+c2278_9 = r29;
+c2278_10 = {
+  DARK: Module712.unsafe_rawColors.BLACK,
+  LIGHT: Module712.unsafe_rawColors.WHITE
+};
+c2278_11 = {
+  START: 0,
+  0: "START",
+  MID: 50,
+  50: "MID",
+  END: 100,
+  100: "END"
+};
+export const GRADIENT_ANGLE_BREAKPOINT = 128;
+export { c2278_9 as OverlayOpacity };
+export { c2278_10 as OverlayColors };
+export { c2278_11 as GradientPercentage };
+export function colorToHex(a0) {
+  return Module689.rgb(a0.red, a0.green, a0.blue).hex("rgb");
+}
+export function getClientThemesGradientColorByPercentage(a0, a1) {
+  const r7 = a0.colors.map($mk73405());
+  const r11 = a0.colors.map($mk73404());
+  const r25 = _slicedToArray(Module689.scale(r7).domain(r11)(a1).rgb(), 3);
+  return {
+    r: r25[0],
+    g: r25[1],
+    b: r25[2]
+  };
+}
+export function getClientThemesGradientHexColors(a0) {
+  return a0.colors.map($mk73405());
+}
+export function getGradientThemeMetadata(a0, a1) {
+  if (a0 != null && a1 != null) {
+    const r14 = calculateGradientValueWithOpacity(a1, c2278_11.START, a1.theme);
+    const r13 = calculateGradientValueWithOpacity(a1, c2278_11.MID, a1.theme);
+    const r12 = calculateGradientValueWithOpacity(a1, c2278_11.END, a1.theme);
+    const r37 = a1.type === ClientThemeType.BACKGROUND_GRADIENT_PRESET ? a1.angle : a1.customThemeSettings.gradientAngle;
+    const r38 = r37 > c2278_8 ? r14 : r12;
+    const r39 = r37 > c2278_8 ? r12 : r14;
+    const r46 = a1.type === ClientThemeType.BACKGROUND_GRADIENT_PRESET ? a1.colors.map($mk73405()) : a1.customThemeSettings.colors;
+    let r48 = r46[0];
+    let r51 = r46[r46.length - 1];
+    if (a1.type === ClientThemeType.CUSTOM_BACKGROUND_GRADIENT) {
+      const colors2 = a1.customThemeSettings.colors;
+      const r21 = colors2.map((item) => Module689(item).luminance());
+      const r23 = Math;
+      let r82 = Module689(colors2[r21.indexOf(r23.min.apply(r23, [...r21]))]).set("hsl.s", 0.2).set("hsl.l", 0.7).hex();
+      const r86 = Math;
+      const r106 = Module689(colors2[r21.indexOf(r86.max.apply(r86, [...r21]))]).set("hsl.s", 0.2).set("hsl.l", 0.9).hex();
+      const r108 = a0 === "dark";
+      const r109 = r108 ? r82 : r106;
+      if (r108) {
+        r82 = r106;
+      }
+      r51 = r82;
+      r48 = r109;
+    }
+    return {
+      theme: a0,
+      colors: {
+        "gradient.start": r14,
+        "gradient.mid": r13,
+        "gradient.end": r12,
+        "gradient.top": r38,
+        "gradient.bottom": r39,
+        "gradient.primary": r48,
+        "gradient.secondary": r51
+      }
+    };
+  }
+  return null;
+}
+export function getGradientValue(a0, a1) {
+  return calculateGradientValueWithOpacity(a0, a1, a0.theme);
+}
+export function useGradientValue(a0, a1) {
+  const colorThemeBackground = useColorThemeBackground();
+  let c13773_2 = colorThemeBackground;
+  const theme = useTheme();
+  let c13773_3 = theme;
+  return useMemo(() => {
+    if (c13773_2 == null) {
+      return null;
+    }
+    if (a1?.dark == null && a1?.light == null) {
+      return calculateGradientValueWithOpacity(c13773_2, a0, c13773_3);
+    }
+    const r29 = _shared.isThemeDark(c13773_3) ? c2278_9.LEVEL_2 : c2278_9.LEVEL_4;
+    const isThemeDark = _shared.isThemeDark(c13773_3);
+    const r34 = a1 == null;
+    let r35 = isThemeDark ? r34 ? void 0 : a1.dark : r34 ? void 0 : a1.light;
+    if (r35 == null) {
+      r35 = r29;
+    }
+    return calculateGradientValueWithOpacity(c13773_2, a0, c13773_3, r35);
+  }, [colorThemeBackground, a1?.dark, a1?.light, a0, theme]);
+}
+export function getEmbedScrollGradientBackground() {
+  let r6 = getCustomBackgroundGradient();
+  if (r6 == null) {
+    r6 = ClientThemesBackgroundStore.gradientPreset;
+  }
+  if (r6 == null) {
+    r6 = null;
+  }
+  return r6 == null ? null : calculateGradientValueWithOpacity(r6, void 0, r6.theme);
+}
+export function getEmbedBackground() {
+  const hasCustomTheme = CustomThemeMobileStore.hasCustomTheme();
+  if (ClientThemesBackgroundStore.gradientPreset == null && !hasCustomTheme) {
+    return null;
+  }
+  return hexWithOpacity(_shared.isThemeDark(ThemeStore.theme) ? c2278_10.DARK : c2278_10.LIGHT, c2278_9.LEVEL_1);
+}

modules/client_themes/native/CustomThemeMobileActionCreators.tsx

@@ -0,0 +1,25 @@
+// Metro module 11142 (f11143).
+import Dispatcher from "../../../Dispatcher";
+export function updateCustomTheme(a0, a1) {
+  Dispatcher.dispatch({
+    type: "UPDATE_CUSTOM_THEME",
+    customTheme: a0,
+    theme: a1
+  });
+}
+export function resetCustomTheme() {
+  Dispatcher.dispatch({
+    type: "RESET_CUSTOM_THEME"
+  });
+}
+export function previewCustomTheme(a0) {
+  Dispatcher.dispatch({
+    type: "PREVIEW_CUSTOM_THEME",
+    previewCustomTheme: a0
+  });
+}
+export function clearPreviewTheme() {
+  Dispatcher.dispatch({
+    type: "CLEAR_PREVIEW_CUSTOM_THEME"
+  });
+}

modules/client_themes/native/CustomThemeMobileStore.tsx

@@ -0,0 +1,194 @@
+// Metro module 1346 (f1347).
+import SelectivelySyncedUserSettingsStore from "../../user_settings/SelectivelySyncedUserSettingsStore";
+import ThemeStore from "../../user_settings/ThemeStore";
+import UnsyncedUserSettingsStore from "../../user_settings/UnsyncedUserSettingsStore";
+import UserSettingsProtoStore from "../../user_settings/UserSettingsProtoStore";
+import { PROTO_THEME_MAP_MOBILE } from "../../user_settings/ThemeConstants";
+import { UserSettingsTypes } from "../../user_settings/UserSettingsConstants";
+import { isPerModeThemingActive } from "../../user_settings/isPerModeThemingActive";
+import { Theme } from "../../../_bundle/Module1306";
+import { isMobileVisualRefreshEnabled } from "../../themes/experiments/MobileVisualRefreshExperiment";
+import Module589 from "../../../_bundle/Module589";
+import Dispatcher from "../../../Dispatcher";
+let theme, customUserThemeSettings, previewCustomTheme2, handleSelectivelySyncedUserSettingsUpdate, isSyncedModeThemesEnabled;
+const reset = function reset() {
+  theme = void 0;
+  customUserThemeSettings = void 0;
+  previewCustomTheme2 = void 0;
+};
+const handleSyncedModeChange = function handleSyncedModeChange() {
+  return isPerModeThemingActive(isSyncedModeThemesEnabled);
+};
+const handleSameAsDeviceThemeToggle = function handleSameAsDeviceThemeToggle() {
+  return isMobileVisualRefreshEnabled("CustomThemeMobileStore");
+};
+const loadFromProtoSettings = function loadFromProtoSettings() {
+  if (SelectivelySyncedUserSettingsStore.shouldSync("appearance")) {
+    const appearance = UserSettingsProtoStore.settings.appearance;
+    if (appearance != null) {
+      let theme2 = appearance.theme;
+      if (theme2 == null) {
+        theme2 = Theme.UNSET;
+      }
+      theme = PROTO_THEME_MAP_MOBILE[theme2];
+      customUserThemeSettings = appearance.clientThemeSettings?.customUserThemeSettings;
+    }
+  }
+};
+handleSelectivelySyncedUserSettingsUpdate = function handleSelectivelySyncedUserSettingsUpdate() {
+  if (SelectivelySyncedUserSettingsStore.shouldSync("appearance")) {
+    const appearance = UserSettingsProtoStore.settings.appearance;
+    if (appearance != null) {
+      let theme2 = appearance.theme;
+      if (theme2 == null) {
+        theme2 = Theme.UNSET;
+      }
+      theme = PROTO_THEME_MAP_MOBILE[theme2];
+      customUserThemeSettings = appearance.clientThemeSettings?.customUserThemeSettings;
+    }
+  }
+};
+isSyncedModeThemesEnabled = function isSyncedModeThemesEnabled() {
+  return isMobileVisualRefreshEnabled("CustomThemeMobileStore");
+};
+class CustomThemeMobileStore extends Module589.PersistedStore {
+  static displayName = "CustomThemeMobileStore";
+  static persistKey = "CustomThemeMobileStore";
+  initialize(a0) {
+    if (a0 != null) {
+      theme = a0.theme;
+      customUserThemeSettings = a0.customTheme;
+    }
+    this.waitFor(SelectivelySyncedUserSettingsStore, ThemeStore, UnsyncedUserSettingsStore, UserSettingsProtoStore);
+    this.syncWith([SelectivelySyncedUserSettingsStore], handleSelectivelySyncedUserSettingsUpdate);
+  }
+  getState() {
+    return theme != null && customUserThemeSettings != null && customUserThemeSettings.colors.length > 0 ? {
+      theme,
+      customTheme: customUserThemeSettings
+    } : {
+      theme: void 0,
+      customTheme: void 0
+    };
+  }
+  getCustomTheme() {
+    let r16;
+    const isPerModeThemingActive2 = isPerModeThemingActive(isSyncedModeThemesEnabled);
+    const r13 = {
+      baseTheme: null,
+      customTheme: null
+    };
+    if (isPerModeThemingActive2) {
+      r13.baseTheme = ThemeStore.theme;
+      r13.customTheme = ThemeStore.getSyncedClientTheme(ThemeStore.systemTheme)?.customUserThemeSettings;
+      r16 = r13;
+    } else {
+      r13.baseTheme = theme;
+      r13.customTheme = customUserThemeSettings;
+      r16 = r13;
+    }
+    const { baseTheme, customTheme } = r16;
+    return baseTheme != null && customTheme != null && customTheme.colors.length > 0 ? r16.customTheme : void 0;
+  }
+  getBaseTheme() {
+    let r16;
+    const isPerModeThemingActive2 = isPerModeThemingActive(isSyncedModeThemesEnabled);
+    const r13 = {
+      baseTheme: null,
+      customTheme: null
+    };
+    if (isPerModeThemingActive2) {
+      r13.baseTheme = ThemeStore.theme;
+      r13.customTheme = ThemeStore.getSyncedClientTheme(ThemeStore.systemTheme)?.customUserThemeSettings;
+      r16 = r13;
+    } else {
+      r13.baseTheme = theme;
+      r13.customTheme = customUserThemeSettings;
+      r16 = r13;
+    }
+    const { baseTheme, customTheme } = r16;
+    return baseTheme != null && customTheme != null && customTheme.colors.length > 0 ? r16.baseTheme : void 0;
+  }
+  getPreviewTheme() {
+    return previewCustomTheme2;
+  }
+  getCustomThemeDisplaySettings() {
+    let r17;
+    if (previewCustomTheme2 !== void 0) {
+      return previewCustomTheme2;
+    }
+    const isPerModeThemingActive2 = isPerModeThemingActive(isSyncedModeThemesEnabled);
+    const r14 = {
+      baseTheme: null,
+      customTheme: null
+    };
+    if (isPerModeThemingActive2) {
+      r14.baseTheme = ThemeStore.theme;
+      r14.customTheme = ThemeStore.getSyncedClientTheme(ThemeStore.systemTheme)?.customUserThemeSettings;
+      r17 = r14;
+    } else {
+      r14.baseTheme = theme;
+      r14.customTheme = customUserThemeSettings;
+      r17 = r14;
+    }
+    const { baseTheme, customTheme } = r17;
+    return baseTheme != null && customTheme != null && customTheme.colors.length > 0 ? {
+      baseTheme: r17.baseTheme,
+      customTheme: r17.customTheme
+    } : void 0;
+  }
+  hasCustomTheme() {
+    let r15;
+    const isPerModeThemingActive2 = isPerModeThemingActive(isSyncedModeThemesEnabled);
+    const r12 = {
+      baseTheme: null,
+      customTheme: null
+    };
+    if (isPerModeThemingActive2) {
+      r12.baseTheme = ThemeStore.theme;
+      r12.customTheme = ThemeStore.getSyncedClientTheme(ThemeStore.systemTheme)?.customUserThemeSettings;
+      r15 = r12;
+    } else {
+      r12.baseTheme = theme;
+      r12.customTheme = customUserThemeSettings;
+      r15 = r12;
+    }
+    const { baseTheme, customTheme } = r15;
+    return baseTheme != null && customTheme != null && customTheme.colors.length > 0;
+  }
+}
+const customThemeMobileStore = new CustomThemeMobileStore(Dispatcher, {
+  UPDATE_CUSTOM_THEME: function handleUpdateCustomTheme({ customTheme, theme: theme2 }) {
+    customUserThemeSettings = customTheme;
+    theme = theme2;
+  },
+  SYSTEM_THEME_CHANGE: handleSyncedModeChange,
+  UPDATE_SYNCED_CLIENT_THEME: handleSyncedModeChange,
+  UPDATE_THEME_PREFERENCES: handleSyncedModeChange,
+  SET_SAME_AS_DEVICE_THEME_ENABLED: handleSameAsDeviceThemeToggle,
+  CLEAR_SYNCED_CLIENT_THEMES: handleSameAsDeviceThemeToggle,
+  PREVIEW_CUSTOM_THEME: function previewCustomTheme(a0) {
+    previewCustomTheme2 = a0.previewCustomTheme;
+  },
+  CLEAR_PREVIEW_CUSTOM_THEME: function clearPreviewTheme() {
+    previewCustomTheme2 = void 0;
+  },
+  RESET_CUSTOM_THEME: reset,
+  CACHE_LOADED: loadFromProtoSettings,
+  POST_CONNECTION_OPEN: loadFromProtoSettings,
+  USER_SETTINGS_PROTO_UPDATE: function handleUserSettingsProtoUpdate({ settings }) {
+    if (SelectivelySyncedUserSettingsStore.shouldSync("appearance")) {
+      const r12 = settings.type === UserSettingsTypes.PRELOADED_USER_SETTINGS ? settings.proto?.appearance : null;
+      if (r12 != null) {
+        let theme2 = r12.theme;
+        if (theme2 == null) {
+          theme2 = Theme.UNSET;
+        }
+        theme = PROTO_THEME_MAP_MOBILE[theme2];
+        customUserThemeSettings = r12.clientThemeSettings?.customUserThemeSettings;
+      }
+    }
+  },
+  LOGOUT: reset
+});
+export default customThemeMobileStore;

modules/client_themes/native/MobileThemesUtils.tsx

@@ -0,0 +1,97 @@
+// Metro module 4122 (f4123).
+import ThemeStore from "../../user_settings/ThemeStore";
+import SavedCustomThemeStore from "../SavedCustomThemeStore";
+import CustomThemeMobileStore from "./CustomThemeMobileStore";
+import { REFRESH_STANDARD_BACKGROUND_THEMES, LEGACY_STANDARD_BACKGROUND_THEMES, BACKGROUND_GRADIENT_PRESETS_MOBILE } from "../ClientThemesConstants";
+import { intl } from "../../../intl/index.native";
+import ClientThemes_messages from "../intl/ClientThemes.messages";
+import { ClientThemeType } from "../ClientThemesTypes";
+import { useCustomThemeDisplaySettings } from "./useCustomThemeDisplaySettings";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import MobileVisualRefreshExperiment, { isMobileVisualRefreshEnabled } from "../../themes/experiments/MobileVisualRefreshExperiment";
+function $mk73627($env) {
+  return () => {
+    const r9 = $env[0];
+    if (r9 == null) {
+      return null;
+    }
+    const r7 = $env.$parent;
+    const r8 = r7[3];
+    const customUserThemeSettings = r8.getSyncedClientTheme(r9)?.customUserThemeSettings;
+    return customUserThemeSettings == null ? null : customUserThemeSettings.colors.length !== 0 ? {
+      type: (0, r7[0])(r7[2][6]).ClientThemeType.CUSTOM_BACKGROUND_GRADIENT,
+      getName: r7[9],
+      theme: r8.themePreferenceForSystemTheme(r9),
+      customThemeSettings: customUserThemeSettings
+    } : null;
+  };
+}
+let $mk73628 = function() {
+  return () => SavedCustomThemeStore.getSavedCustomTheme();
+};
+let env2375 = {};
+const getCustomThemesName = function getCustomThemesName() {
+  return intl.string(ClientThemes_messages.yl1iMm);
+};
+export function getCustomBackgroundGradient() {
+  const customThemeDisplaySettings = CustomThemeMobileStore.getCustomThemeDisplaySettings();
+  return customThemeDisplaySettings !== void 0 ? {
+    type: ClientThemeType.CUSTOM_BACKGROUND_GRADIENT,
+    getName: getCustomThemesName,
+    theme: customThemeDisplaySettings.baseTheme,
+    customThemeSettings: customThemeDisplaySettings.customTheme
+  } : null;
+}
+export function useCustomBackgroundGradient(a0) {
+  const customThemeDisplaySettings = useCustomThemeDisplaySettings(a0);
+  return customThemeDisplaySettings !== void 0 ? {
+    type: ClientThemeType.CUSTOM_BACKGROUND_GRADIENT,
+    getName: getCustomThemesName,
+    theme: customThemeDisplaySettings.baseTheme,
+    customThemeSettings: customThemeDisplaySettings.customTheme
+  } : null;
+}
+export function usePerModeCustomBackgroundGradient(a0) {
+  let env13867;
+  const r1 = env13867 = {
+    $parent: env2375
+  };
+  env13867[0] = a0;
+  return useStateFromStores([ThemeStore], $mk73627(r1));
+}
+export function getAllMobileThemes() {
+  const customThemeDisplaySettings = CustomThemeMobileStore.getCustomThemeDisplaySettings();
+  const r7 = customThemeDisplaySettings !== void 0 ? {
+    type: ClientThemeType.CUSTOM_BACKGROUND_GRADIENT,
+    getName: getCustomThemesName,
+    theme: customThemeDisplaySettings.baseTheme,
+    customThemeSettings: customThemeDisplaySettings.customTheme
+  } : null;
+  const r29 = isMobileVisualRefreshEnabled("MobileThemesUtils") ? REFRESH_STANDARD_BACKGROUND_THEMES : LEGACY_STANDARD_BACKGROUND_THEMES;
+  return r7 != null ? [...r29, r7, ...BACKGROUND_GRADIENT_PRESETS_MOBILE] : [...r29, ...BACKGROUND_GRADIENT_PRESETS_MOBILE];
+}
+export function useAllMobileThemes(a0) {
+  const stateFromStores = useStateFromStores([SavedCustomThemeStore], $mk73628());
+  const customThemeDisplaySettings = useCustomThemeDisplaySettings(stateFromStores ?? null);
+  let r25 = customThemeDisplaySettings !== void 0 ? {
+    type: ClientThemeType.CUSTOM_BACKGROUND_GRADIENT,
+    getName: getCustomThemesName,
+    theme: customThemeDisplaySettings.baseTheme,
+    customThemeSettings: customThemeDisplaySettings.customTheme
+  } : null;
+  let env13868;
+  const r35 = env13868 = {
+    $parent: env2375
+  };
+  env13868[0] = a0;
+  const stateFromStores2 = useStateFromStores([ThemeStore], $mk73627(r35));
+  if (a0 != null) {
+    r25 = stateFromStores2;
+  }
+  const r46 = MobileVisualRefreshExperiment("MobileThemesUtils") ? REFRESH_STANDARD_BACKGROUND_THEMES : LEGACY_STANDARD_BACKGROUND_THEMES;
+  return r25 != null ? [...r46, r25, ...BACKGROUND_GRADIENT_PRESETS_MOBILE] : [...r46, ...BACKGROUND_GRADIENT_PRESETS_MOBILE];
+}
+export function useSavedCustomTheme() {
+  const stateFromStores = useStateFromStores([SavedCustomThemeStore], $mk73628());
+  return stateFromStores ?? null;
+}

modules/client_themes/native/ThemedGradient.tsx

@@ -0,0 +1,424 @@
+// Metro module 4719 (f4720).
+import { useEffect } from "react";
+import { View } from "react-native";
+import ClientThemesBackgroundStore from "../ClientThemesBackgroundStore";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import * as _shared from "../../../design/shared";
+import Color from "../../../utils/Color";
+import { hexToRgb, mixColors, hexWithOpacity } from "../../../utils/ColorUtils";
+import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
+import Module4611 from "../../../_bundle/Module4611";
+import useTheme from "../../../hooks/useTheme";
+import Module712 from "../../../_bundle/Module712";
+import { getGuildThemePresetAppearance, getSingleColorGuildThemeGradientColors, GUILD_THEME_DEFAULT_BASE_MIX } from "../../guild_themes/GuildThemePresets";
+import { colorToHex } from "./ClientThemesUtils";
+import Module689 from "../../../_bundle/Module689";
+import SentryUtils_native from "../../../utils/SentryUtils.native";
+import { useStateFromStoresObject } from "../../../_bundle/defaultAreStatesEqual";
+import useRoutedActiveGuildTheme from "../../guild_themes/native/useRoutedActiveGuildTheme";
+import { useCustomThemeDisplaySettings } from "./useCustomThemeDisplaySettings";
+import { ClientThemeType } from "../ClientThemesTypes";
+let useStyles, angleCenter, c2877_10, GradientBase, Gradient, GuildThemePresetGradient, c2877_15, CustomThemesGradient, ActiveGuildThemeGradient, $mk74871 = function() {
+  return (a0, a1) => {
+    if (typeof a1 === "string" && c2877_15.test(a1)) {
+      a0.push(a1);
+      return a0;
+    }
+    try {
+      a0.push(Module689(a1).hex("rgb"));
+    } catch ($e) {}
+    return a0;
+  };
+};
+const getMixedGradientColor = function getMixedGradientColor({ color, mixAmount: mixAmount3, mixColorOverride: mixColorOverride4, theme: theme4 }) {
+  const r21 = {
+    mixAmount: mixAmount3,
+    mixColorOverride: mixColorOverride4,
+    theme: theme4
+  };
+  let mixAmount4 = r21.mixAmount;
+  if (mixAmount4 === void 0) {
+    mixAmount4 = {};
+  }
+  let mixColorOverride5 = r21.mixColorOverride;
+  const { theme: theme5, darkFallbackOpacity = 0.7 } = r21;
+  let lightFallbackOpacity = r21.lightFallbackOpacity;
+  if (lightFallbackOpacity === void 0) {
+    lightFallbackOpacity = 0.8;
+  }
+  if (mixColorOverride5 == null) {
+    const isThemeDark = _shared.isThemeDark(theme5);
+    if (isThemeDark) {
+      lightFallbackOpacity = darkFallbackOpacity;
+    }
+    let r27 = isThemeDark ? mixAmount4.dark : mixAmount4.light;
+    if (r27 == null) {
+      r27 = lightFallbackOpacity;
+    }
+    const r0 = isThemeDark ? 0 : 255;
+    mixColorOverride5 = new Color(r0, r0, r0, r27);
+  }
+  const r33 = {
+    mixAmount: mixAmount3,
+    theme: theme4
+  };
+  const { mixAmount: mixAmount5 = {}, theme: theme6 } = r33;
+  let darkFallbackAmount = r33.darkFallbackAmount;
+  if (darkFallbackAmount === void 0) {
+    darkFallbackAmount = 0.3;
+  }
+  let lightFallbackAmount = r33.lightFallbackAmount;
+  if (lightFallbackAmount === void 0) {
+    lightFallbackAmount = 0.2;
+  }
+  if (_shared.isThemeDark(theme6)) {
+    if (mixAmount5.dark != null) {
+      darkFallbackAmount = 1 - mixAmount5.dark;
+    }
+    lightFallbackAmount = darkFallbackAmount;
+  } else if (mixAmount5.light != null) {
+    lightFallbackAmount = 1 - mixAmount5.light;
+  }
+  const r53 = hexToRgb(color);
+  return mixColors(mixColorOverride5, new Color(r53.r, r53.g, r53.b, lightFallbackAmount)).toHexString();
+};
+GradientBase = function GradientBase(props) {
+  const { colors, locations, angle, angleCenter: angleCenter2 = angleCenter } = props;
+  let absolute = props.absolute;
+  let wide = props.wide;
+  let tall = props.tall;
+  const componentStyles = props.componentStyles;
+  const styles = useStyles();
+  const windowDimensions_native = useWindowDimensions_native();
+  const { width, height } = windowDimensions_native;
+  if (wide) {
+    wide = {
+      width
+    };
+  }
+  const style = [wide, , , , ,];
+  if (tall) {
+    tall = {
+      height
+    };
+  }
+  style[1] = tall;
+  style[2] = styles.linearGradient;
+  if (absolute) {
+    absolute = styles.absolute;
+  }
+  style[3] = absolute;
+  style[4] = componentStyles;
+  return <Module4611 colors={colors} locations={locations} angle={angle} angleCenter={angleCenter2} useAngle style={style} />;
+};
+Gradient = function Gradient(props) {
+  const { gradient, absolute, wide, tall } = props;
+  let angleOverride = props.angleOverride;
+  const { componentStyles, mix, mixAmount: mixAmount3 = {} } = props;
+  const mixAmount = mixAmount3;
+  const mixColorOverride = props.mixColorOverride;
+  const theme = useTheme();
+  const props2 = {
+    colors: gradient.colors.map((a0) => mix ? getMixedGradientColor({
+      color: Module712.unsafe_rawColors[a0.token],
+      mixAmount,
+      mixColorOverride,
+      theme
+    }) : Module712.unsafe_rawColors[a0.token]),
+    locations: gradient.colors.map((color) => color.stop / 100),
+    angle: null,
+    angleCenter: null,
+    absolute: null,
+    wide: null,
+    tall: null,
+    componentStyles: null
+  };
+  if (angleOverride == null) {
+    angleOverride = gradient.angle;
+  }
+  props2.angle = angleOverride;
+  let angleCenter2 = gradient.angleCenter;
+  if (angleCenter2 == null) {
+    angleCenter2 = angleCenter;
+  }
+  props2.angleCenter = angleCenter2;
+  props2.absolute = absolute;
+  props2.wide = wide;
+  props2.tall = tall;
+  props2.componentStyles = componentStyles;
+  return <GradientBase {...props2} />;
+};
+GuildThemePresetGradient = function GuildThemePresetGradient(props) {
+  const { preset, absolute, wide, tall } = props;
+  let angleOverride = props.angleOverride;
+  const { componentStyles, mix: mix2, mixAmount: mixAmount3 = {} } = props;
+  const mixAmount2 = mixAmount3;
+  const mixColorOverride2 = props.mixColorOverride;
+  const theme2 = useTheme();
+  const guildThemePresetAppearance = getGuildThemePresetAppearance(preset, theme2);
+  const props2 = {
+    colors: guildThemePresetAppearance.colors.map((a0) => mix2 ? getMixedGradientColor({
+      color: a0.hex,
+      mixAmount: mixAmount2,
+      mixColorOverride: mixColorOverride2,
+      theme: theme2
+    }) : a0.hex),
+    locations: guildThemePresetAppearance.colors.map((color) => color.stop / 100),
+    angle: null,
+    angleCenter: null,
+    absolute: null,
+    wide: null,
+    tall: null,
+    componentStyles: null
+  };
+  if (angleOverride == null) {
+    angleOverride = guildThemePresetAppearance.angle;
+  }
+  props2.angle = angleOverride;
+  props2.angleCenter = angleCenter;
+  props2.absolute = absolute;
+  props2.wide = wide;
+  props2.tall = tall;
+  props2.componentStyles = componentStyles;
+  return <GradientBase {...props2} />;
+};
+CustomThemesGradient = function CustomThemesGradient(props) {
+  const { colors, baseMix: baseMix2, gradientAngle } = props;
+  let gradientColorStops = props.gradientColorStops;
+  let absolute = props.absolute;
+  let wide = props.wide;
+  let tall = props.tall;
+  const mix3 = props.mix;
+  let mixAmount3 = props.mixAmount;
+  if (mixAmount3 === void 0) {
+    mixAmount3 = {};
+  }
+  let c14384_0, c14384_1;
+  const { mixColorOverride: mixColorOverride4, componentStyles, theme: theme4 } = props;
+  c14384_0 = void 0;
+  c14384_1 = void 0;
+  const styles = useStyles();
+  const windowDimensions_native = useWindowDimensions_native();
+  const { width, height } = windowDimensions_native;
+  const baseMix = baseMix2;
+  if (mixAmount3 === void 0) {
+    mixAmount3 = {};
+  }
+  let c14385_1 = mixAmount3;
+  const mixColorOverride3 = mixColorOverride4;
+  const theme3 = theme4;
+  const r32 = mix3 ? colors.map((color) => {
+    const r1 = baseMix / 100;
+    let r10 = c14385_1;
+    let r12 = mixColorOverride3;
+    let r3 = c2877_10;
+    const r4 = r10 !== void 0;
+    const r13 = r4 ? r10 : {};
+    if (mixColorOverride3 == null) {
+      const r2 = 1 - r1;
+      let r25 = c2877_10 + 0.2 * r2;
+      const isThemeDark = _shared.isThemeDark(theme3);
+      if (isThemeDark) {
+        r25 = c2877_10 + 0.25 * r2;
+      }
+      let r33 = isThemeDark ? r13.dark : r13.light;
+      if (r33 == null) {
+        r33 = r25;
+      }
+      const r34 = isThemeDark ? 0 : 255;
+      r12 = new Color(r34, r34, r34, r33);
+    }
+    if (!r4) {
+      r10 = {};
+    }
+    let r40 = c2877_10 === void 0 ? 0.3 : c2877_10;
+    if (c2877_10 === void 0) {
+      r3 = 0.2;
+    }
+    if (_shared.isThemeDark(theme3)) {
+      if (r10.dark != null) {
+        r40 = 1 - r10.dark;
+      }
+      r3 = r40;
+    } else if (r10.light != null) {
+      r3 = 1 - r10.light;
+    }
+    const r57 = hexToRgb(color);
+    return colorToHex(mixColors(r12, new Color(r57.r, r57.g, r57.b, r3)));
+  }) : colors;
+  const r36 = r32.length === 1 ? [r32[0], r32[0]] : r32;
+  c14384_0 = r36;
+  const r45 = (gradientAngle - 90) * Math.PI / 180;
+  const r48 = Math.cos(r45);
+  const r51 = Math.sin(r45);
+  const start = {
+    x: 0.6 - 0.7142857142857143 * r48,
+    y: 0.5 - 0.7142857142857143 * r51
+  };
+  const end = {
+    x: 0.6 + 0.7142857142857143 * r48,
+    y: 0.5 + 0.7142857142857143 * r51
+  };
+  const colors2 = r36.reduce($mk74871(), []);
+  c14384_1 = colors2;
+  let c14386_0 = colors2;
+  if (gradientColorStops === void 0) {
+    gradientColorStops = [];
+  }
+  const locations = gradientColorStops.length === colors2.length ? gradientColorStops.map((gradientColorStop) => gradientColorStop / 100) : colors2.length === 1 ? [0, 1] : colors2.map((item, index) => index / (c14386_0.length - 1));
+  useEffect(() => {
+    if (c14384_1.length < 2) {
+      SentryUtils_native.captureException(new Error("Invalid custom theme gradient colors"), {
+        extra: {
+          gradientColors: JSON.stringify(c14384_0)
+        }
+      });
+    }
+  }, [colors2, r36]);
+  const r6 = colors2.length < 2;
+  let r84 = null;
+  if (!r6) {
+    if (wide) {
+      wide = {
+        width
+      };
+    }
+    const style = [wide, , , , ,];
+    if (tall) {
+      tall = {
+        height
+      };
+    }
+    style[1] = tall;
+    style[2] = styles.linearGradient;
+    if (absolute) {
+      absolute = styles.absolute;
+    }
+    style[3] = absolute;
+    style[4] = componentStyles;
+    r84 = <Module4611 colors={colors2} locations={locations} start={start} end={end} style={style} />;
+  }
+  return r84;
+};
+ActiveGuildThemeGradient = function ActiveGuildThemeGradient(props) {
+  const { activeGuildTheme, theme: theme4, ...props2 } = props;
+  if (activeGuildTheme.type === "custom") {
+    const customUserThemeSettings = activeGuildTheme.customUserThemeSettings;
+    const colors = [...getSingleColorGuildThemeGradientColors(customUserThemeSettings.colors[0], theme4)];
+    let gradientAngle = customUserThemeSettings.gradientAngle;
+    if (gradientAngle == null) {
+      gradientAngle = 0;
+    }
+    let baseMix2 = customUserThemeSettings.baseMix;
+    if (baseMix2 == null) {
+      baseMix2 = GUILD_THEME_DEFAULT_BASE_MIX;
+    }
+    return <CustomThemesGradient {...props2} colors={colors} gradientColorStops={[]} gradientAngle={gradientAngle} baseMix={baseMix2} theme={theme4} />;
+  }
+  return <GuildThemePresetGradient {...props2} preset={activeGuildTheme.preset} />;
+};
+useStyles = createStyles({
+  softenGradient: {
+    flex: 1
+  },
+  linearGradient: {
+    flex: 1
+  },
+  absolute: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  }
+});
+angleCenter = {
+  x: 0.5,
+  y: 0.5
+};
+c2877_10 = 0.5;
+c2877_15 = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
+export default function ThemedGradient(props) {
+  let r66;
+  const { overlayOpacity = 0.7, gradientOverride, ...props2 } = props;
+  const styles = useStyles();
+  const r14 = _shared.isThemeDark(useTheme()) ? Module712.unsafe_rawColors.BLACK : Module712.unsafe_rawColors.WHITE;
+  const withOverlay = props2.withOverlay;
+  const theme4 = useTheme();
+  const preset = useStateFromStoresObject([ClientThemesBackgroundStore], () => ({
+    preset: ClientThemesBackgroundStore.gradientPreset
+  })).preset;
+  const routedActiveGuildTheme = useRoutedActiveGuildTheme();
+  const customThemeDisplaySettings = useCustomThemeDisplaySettings();
+  const r2 = customThemeDisplaySettings !== void 0;
+  if (gradientOverride != null) {
+    if (r2 && gradientOverride.type === ClientThemeType.CUSTOM_BACKGROUND_GRADIENT) {
+      const r161 = <CustomThemesGradient {...props2} {...gradientOverride.customThemeSettings} theme={gradientOverride.theme} />;
+      return withOverlay ? <View style={styles.absolute}>
+        {r161}
+        <View style={[styles.softenGradient, {
+          backgroundColor: hexWithOpacity(r14, overlayOpacity)
+        }]} />
+      </View> : r161;
+    }
+    if (gradientOverride.type === ClientThemeType.BACKGROUND_GRADIENT_PRESET) {
+      const r135 = <Gradient {...props2} gradient={gradientOverride} />;
+      return withOverlay ? <View style={styles.absolute}>
+        {r135}
+        <View style={[styles.softenGradient, {
+          backgroundColor: hexWithOpacity(r14, overlayOpacity)
+        }]} />
+      </View> : r135;
+    }
+  }
+  L24: {
+    if (routedActiveGuildTheme != null) {
+      const r113 = <ActiveGuildThemeGradient {...props2} activeGuildTheme={routedActiveGuildTheme} theme={theme4} />;
+      r66 = withOverlay ? <View style={styles.absolute}>
+        {r113}
+        <View style={[styles.softenGradient, {
+          backgroundColor: hexWithOpacity(r14, overlayOpacity)
+        }]} />
+      </View> : r113;
+    } else {
+      if (r2 && r2) {
+        const r91 = <CustomThemesGradient {...props2} {...customThemeDisplaySettings.customTheme} theme={customThemeDisplaySettings.baseTheme} />;
+        r66 = withOverlay ? <View style={styles.absolute}>
+          {r91}
+          <View style={[styles.softenGradient, {
+            backgroundColor: hexWithOpacity(r14, overlayOpacity)
+          }]} />
+        </View> : r91;
+        break L24;
+      }
+      const r65 = preset != null;
+      r66 = null;
+      if (r65) {
+        const r21 = <Gradient {...props2} gradient={preset} />;
+        r66 = withOverlay ? <View style={styles.absolute}>
+          {r21}
+          <View style={[styles.softenGradient, {
+            backgroundColor: hexWithOpacity(r14, overlayOpacity)
+          }]} />
+        </View> : r21;
+      }
+    }
+  }
+  return r66;
+};
+export { Gradient };
+export function validateColors(a0) {
+  return a0.reduce($mk74871(), []);
+}
+export function CustomThemedGradient(props) {
+  const { overlayOpacity = 0.7, customTheme, ...props2 } = props;
+  const styles = useStyles();
+  const r14 = _shared.isThemeDark(useTheme()) ? Module712.unsafe_rawColors.BLACK : Module712.unsafe_rawColors.WHITE;
+  const r38 = <CustomThemesGradient {...props2} {...customTheme.customThemeSettings} theme={customTheme.theme} />;
+  return props2.withOverlay ? <View style={styles.absolute}>
+    {r38}
+    <View style={[styles.softenGradient, {
+      backgroundColor: hexWithOpacity(r14, overlayOpacity)
+    }]} />
+  </View> : r38;
+}

modules/client_themes/native/chat/SharedCustomThemeActionSheet.tsx

@@ -0,0 +1,137 @@
+// Metro module 11141 (f11142).
+import * as Module19 from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { View } from "react-native";
+import SubscriptionStore from "../../../../stores/billing/SubscriptionStore";
+import { AnalyticEvents } from "../../../../Constants";
+import { PremiumTypes } from "../../../premium/PremiumConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import { previewCustomTheme, clearPreviewTheme, updateCustomTheme } from "../CustomThemeMobileActionCreators";
+import { refreshTheme } from "../../../user_settings/ThemeActionCreators";
+import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { intl, t } from "../../../../intl/index.native";
+import ClientThemes_messages from "../../intl/ClientThemes.messages";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { saveClientTheme } from "../../../../actions/UserSettingsActionCreators";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import PremiumUtils from "../../../../utils/PremiumUtils";
+import openPremiumPlanSelectionActionSheet from "../../../premium/native/openPremiumPlanSelectionActionSheet";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import { ShinyButton, NitroWheel } from "../../../../design/void/native";
+import { getBaseTheme } from "../../ClientThemesUtils";
+function $mk86440() {
+  return (a0) => `#${a0}`;
+}
+let useStyles;
+const PrimaryActionButton = function PrimaryActionButton(props) {
+  const onPressApply2 = props.onPressApply;
+  const styles = useStyles();
+  return PremiumUtils.getPremiumTypeFromSubscription(useStateFromStores([SubscriptionStore], () => SubscriptionStore.getPremiumTypeSubscription())) !== PremiumTypes.TIER_2 ? <ShinyButton text={intl.string(t.pj0XBN)} onPress={function onPressSubscribe() {
+    openPremiumPlanSelectionActionSheet({
+      premiumType: PremiumTypes.TIER_2,
+      analyticsLocations: [AnalyticsLocation.SHARE_CUSTOM_CLIENT_THEME_EMBED],
+      analyticsLocation: {}
+    });
+  }} renderIcon={() => <NitroWheel style={[styles.nitroWheelButton]} />} style={styles.getNitroButton} /> : <Button text={intl.string(t["1Qm822"])} onPress={onPressApply2} variant="primary" />;
+};
+useStyles = createStyles({
+  contentWrapper: {
+    paddingHorizontal: 43.5,
+    paddingVertical: 12
+  },
+  centeredText: {
+    textAlign: "center"
+  },
+  ctaContainer: {
+    paddingHorizontal: 15,
+    flexDirection: "column",
+    display: "flex",
+    gap: 6
+  },
+  nitroWheelButton: {
+    marginStart: -2,
+    width: 20,
+    height: 20
+  },
+  getNitroButton: {
+    borderRadius: Module712.radii.round
+  }
+});
+export default (a0) => {
+  const sharedClientTheme = a0.message.sharedClientTheme;
+  const styles2 = useStyles();
+  const ref = useRef(null);
+  const r24 = sharedClientTheme !== void 0;
+  const [state, setState] = useState(r24 ? {
+    colors: sharedClientTheme.colors.map($mk86440()),
+    gradientColorStops: [],
+    gradientAngle: sharedClientTheme.gradient_angle,
+    baseMix: sharedClientTheme.base_mix
+  } : void 0);
+  const [state2, setState2] = useState(r24 ? getBaseTheme(sharedClientTheme.base_theme) : void 0);
+  const [state3, setState3] = useState(false);
+  const ref2 = Module19.useRef(true);
+  useEffect(() => {
+    const r1 = sharedClientTheme !== void 0;
+    setState(r1 ? {
+      colors: sharedClientTheme.colors.map($mk86440()),
+      gradientColorStops: [],
+      gradientAngle: sharedClientTheme.gradient_angle,
+      baseMix: sharedClientTheme.base_mix
+    } : void 0);
+    setState2(r1 ? getBaseTheme(sharedClientTheme.base_theme) : void 0);
+    AnalyticsUtils.track(AnalyticEvents.CUSTOM_THEME_SHARE_PREVIEWED, {});
+  }, [sharedClientTheme]);
+  useEffect(() => {
+    if (state !== void 0 && state2 !== void 0) {
+      previewCustomTheme({
+        baseTheme: state2,
+        customTheme: state
+      });
+      refreshTheme();
+    }
+  }, [state, state2]);
+  useLayoutEffect(() => {
+    ref2.current = !state3;
+  }, [state3]);
+  useEffect(() => () => {
+    if (ref2.current) {
+      clearPreviewTheme();
+      refreshTheme();
+    }
+  }, [ref2]);
+  return <BottomSheet ref={ref} backdropOpacity={0}>
+    <BottomSheetTitleHeader title={intl.string(ClientThemes_messages["3ej1LT"])} />
+    <View style={styles2.contentWrapper}>
+      <Text variant="heading-md/medium" style={styles2.centeredText}>
+        {intl.string(ClientThemes_messages.qZMUoL)}
+      </Text>
+    </View>
+    <View style={styles2.ctaContainer}>
+      <PrimaryActionButton onPressApply={function onPressApply() {
+        if (state !== void 0 && state2 !== void 0 && ref.current !== null) {
+          setState3(true);
+          updateCustomTheme(state, state2);
+          saveClientTheme({
+            customUserThemeSettings: state,
+            theme: state2
+          });
+          clearPreviewTheme();
+          AnalyticsUtils.track(AnalyticEvents.CUSTOM_THEME_SHARE_APPLIED, {});
+          ref.current.closeActionSheet();
+        }
+      }} />
+      <Button text={intl.string(t["13/7kX"])} onPress={function onPress() {
+        if (ref.current !== null) {
+          clearPreviewTheme();
+          refreshTheme();
+          ref.current.closeActionSheet();
+        }
+      }} variant="secondary" />
+    </View>
+  </BottomSheet>;
+};

modules/client_themes/native/chat/formatSharedClientThemeData.tsx

@@ -0,0 +1,21 @@
+// Metro module 8005 (f8006).
+import { Image as Image2 } from "react-native";
+import Module6628 from "../../../../_bundle/Module6628";
+import { intl, t } from "../../../../intl/index.native";
+import ClientThemes_messages from "../../intl/ClientThemes.messages";
+export function formatSharedClientThemeData({ sharedClientTheme }, a1, a2) {
+  if (sharedClientTheme !== void 0) {
+    return {
+      colors: sharedClientTheme.colors,
+      gradientAngle: sharedClientTheme.gradient_angle,
+      createdBy: a2,
+      createdByAvatarUrl: a1.uri !== void 0 ? a1.uri : "",
+      nitroWheelIconUrl: Image2.resolveAssetSource(Module6628).uri,
+      previewLabel: intl.string(t.SKNnqq),
+      previewHeading: intl.string(ClientThemes_messages.yl1iMm),
+      createdByLabel: `${intl.format(ClientThemes_messages.fQPSEf, {
+        username: "__USERNAME__"
+      })}`
+    };
+  }
+}

modules/client_themes/native/chat/previewSharedClientTheme.tsx

@@ -0,0 +1,8 @@
+// Metro module 11140 (f11141).
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+export function handleTapPreviewSharedClientTheme({ message }) {
+  ActionSheetActionCreators.openLazy(import("./SharedCustomThemeActionSheet"), "custom-theme-preview", {
+    message,
+    backdropKind: "none"
+  });
+}

modules/client_themes/native/chat/sharedClientThemeViewed.tsx

@@ -0,0 +1,10 @@
+// Metro module 11143 (f11144).
+import { trackImpression } from "../../../app_analytics/useTrackImpression";
+import { ImpressionTypes, ImpressionNames } from "../../../../_bundle/Module503";
+export function handleSharedClientThemeViewed() {
+  trackImpression({
+    type: ImpressionTypes.VIEW,
+    name: ImpressionNames.CUSTOM_THEME_SHARE,
+    properties: {}
+  });
+}

modules/client_themes/native/useActiveTheme.tsx

@@ -0,0 +1,23 @@
+// Metro module 8826 (f8827).
+import UnsyncedUserSettingsStore from "../../user_settings/UnsyncedUserSettingsStore";
+import ClientThemesBackgroundStore from "../ClientThemesBackgroundStore";
+import CustomThemeMobileStore from "./CustomThemeMobileStore";
+import { ActiveThemeType, SystemThemeState } from "../../user_settings/ThemeConstants";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import useRoutedActiveGuildTheme from "../../guild_themes/native/useRoutedActiveGuildTheme";
+const useActiveThemeType = function useActiveThemeType() {
+  const stateFromStores = useStateFromStores([CustomThemeMobileStore], () => CustomThemeMobileStore.hasCustomTheme());
+  const stateFromStores2 = useStateFromStores([ClientThemesBackgroundStore], () => ClientThemesBackgroundStore.gradientPreset != null);
+  const routedActiveGuildTheme = useRoutedActiveGuildTheme();
+  const stateFromStores3 = useStateFromStores([UnsyncedUserSettingsStore], () => UnsyncedUserSettingsStore.useSystemTheme);
+  const ON = SystemThemeState.ON;
+  return routedActiveGuildTheme?.type === "custom" ? ActiveThemeType.CUSTOM : routedActiveGuildTheme?.type === "preset" ? ActiveThemeType.CLIENT : stateFromStores ? ActiveThemeType.CUSTOM : stateFromStores2 ? ActiveThemeType.CLIENT : stateFromStores3 === ON ? ActiveThemeType.SYSTEM : ActiveThemeType.DEFAULT;
+};
+export function useIsCustomThemeActive() {
+  return useActiveThemeType() === ActiveThemeType.CUSTOM;
+}
+export function useIsClientThemeOrCustomThemeActive() {
+  const activeThemeType = useActiveThemeType();
+  return activeThemeType === ActiveThemeType.CLIENT || activeThemeType === ActiveThemeType.CUSTOM;
+}
+export { useActiveThemeType };

modules/client_themes/native/useColorThemeBackground.tsx

@@ -0,0 +1,70 @@
+// Metro module 4036 (f4037).
+import { useMemo } from "react";
+import ThemeStore from "../../user_settings/ThemeStore";
+import ClientThemesBackgroundStore from "../ClientThemesBackgroundStore";
+import { intl, t } from "../../../intl/index.native";
+import { ClientThemeType } from "../ClientThemesTypes";
+import { getSingleColorGuildThemeGradientColors, GUILD_THEME_DEFAULT_BASE_MIX, getGuildThemePresetAppearance } from "../../guild_themes/GuildThemePresets";
+import useRoutedActiveGuildTheme from "../../guild_themes/native/useRoutedActiveGuildTheme";
+import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
+import { useCustomBackgroundGradient } from "./MobileThemesUtils";
+const getGuildThemeName = function getGuildThemeName() {
+  return intl.string(t.CFzDOG);
+};
+export default function useColorThemeBackground() {
+  const routedActiveGuildTheme = useRoutedActiveGuildTheme();
+  let c13795_0 = routedActiveGuildTheme;
+  const stateFromStores = useStateFromStores([ThemeStore], () => ThemeStore.theme);
+  const stateFromStores2 = useStateFromStores([ClientThemesBackgroundStore], () => ClientThemesBackgroundStore.gradientPreset);
+  const customBackgroundGradient = useCustomBackgroundGradient();
+  let r31 = useMemo(() => {
+    const r2 = c13795_0 == null;
+    let r16 = null;
+    if (!r2) {
+      if (c13795_0.type === "custom") {
+        const customUserThemeSettings = c13795_0.customUserThemeSettings;
+        const colors = [...getSingleColorGuildThemeGradientColors(customUserThemeSettings.colors[0], stateFromStores)];
+        let gradientAngle = customUserThemeSettings.gradientAngle;
+        if (gradientAngle == null) {
+          gradientAngle = 0;
+        }
+        let baseMix = customUserThemeSettings.baseMix;
+        if (baseMix == null) {
+          baseMix = GUILD_THEME_DEFAULT_BASE_MIX;
+        }
+        r16 = {
+          type: ClientThemeType.CUSTOM_BACKGROUND_GRADIENT,
+          getName: getGuildThemeName,
+          theme: stateFromStores,
+          customThemeSettings: {
+            colors,
+            gradientColorStops: [],
+            gradientAngle,
+            baseMix
+          }
+        };
+      } else {
+        const guildThemePresetAppearance = getGuildThemePresetAppearance(c13795_0.preset, stateFromStores);
+        r16 = {
+          type: ClientThemeType.CUSTOM_BACKGROUND_GRADIENT,
+          getName: getGuildThemeName,
+          theme: stateFromStores,
+          customThemeSettings: {
+            colors: guildThemePresetAppearance.colors.map((color) => color.hex),
+            gradientAngle: guildThemePresetAppearance.angle,
+            gradientColorStops: guildThemePresetAppearance.colors.map((color) => color.stop),
+            baseMix: guildThemePresetAppearance.baseMix
+          }
+        };
+      }
+    }
+    return r16;
+  }, [routedActiveGuildTheme, stateFromStores]);
+  if (r31 == null) {
+    r31 = customBackgroundGradient;
+  }
+  if (r31 == null) {
+    r31 = stateFromStores2;
+  }
+  return r31;
+};

modules/client_themes/native/useCustomThemeDisplaySettings.tsx

@@ -0,0 +1,26 @@
+// Metro module 4124 (f4125).
+import CustomThemeMobileStore from "./CustomThemeMobileStore";
+import { useStateFromStoresArray } from "../../../_bundle/Module589";
+export function useCustomThemeDisplaySettings(a0) {
+  const [customTheme, baseTheme, r18] = useStateFromStoresArray([CustomThemeMobileStore], () => [CustomThemeMobileStore.getCustomTheme(), CustomThemeMobileStore.getBaseTheme(), CustomThemeMobileStore.getPreviewTheme()]);
+  if (r18 !== void 0) {
+    return r18;
+  }
+  if (customTheme !== void 0 && baseTheme !== void 0) {
+    return {
+      baseTheme,
+      customTheme
+    };
+  }
+  if (a0 != null) {
+    return {
+      baseTheme: a0.base_theme,
+      customTheme: {
+        colors: a0.colors,
+        gradientAngle: a0.gradient_angle,
+        baseMix: a0.base_mix,
+        gradientColorStops: []
+      }
+    };
+  }
+}

modules/client_themes/native/useIsUsingClientTheme.tsx

@@ -0,0 +1,5 @@
+// Metro module 8825 (f8826).
+import { useIsClientThemeOrCustomThemeActive } from "./useActiveTheme";
+export default function useIsUsingClientTheme() {
+  return useIsClientThemeOrCustomThemeActive();
+};

modules/client_themes/native/useThemedHeaderOptions.tsx

@@ -0,0 +1,37 @@
+// Metro module 15577 (f15578).
+import { useMemo } from "react";
+import ThemedGradient from "./ThemedGradient";
+import useIsUsingClientTheme from "./useIsUsingClientTheme";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import { isIOS } from "../../../utils/PlatformUtils";
+import { isIpadOS } from "../../../utils/native/DeviceUtils";
+let c11102_5;
+const headerBackground = function headerBackground() {
+  return <ThemedGradient absolute tall wide />;
+};
+c11102_5 = {
+  headerBackground: void 0,
+  contentStyle: void 0
+};
+export default function useThemedHeaderOptions() {
+  const isUsingClientTheme = useIsUsingClientTheme();
+  let c22207_0 = isUsingClientTheme;
+  const top = useSafeAreaInsets_native().top;
+  return useMemo(() => {
+    if (c22207_0) {
+      if (isIOS()) {
+        return {
+          headerBackground,
+          contentStyle: {
+            marginTop: -top + (top > 50 ? 5 : 0) + (56 - (isIpadOS() ? 46 : 44))
+          }
+        };
+      }
+      return {
+        headerBackground,
+        contentStyle: c11102_5.contentStyle
+      };
+    }
+    return c11102_5;
+  }, [top, isUsingClientTheme]);
+};