From a695ce6356040217cb5d56fe6718e97de3b2d505 Mon Sep 17 00:00:00 2001
From: kmmiio99o <szymonladziak00@gmail.com>
Date: Fri, 23 Jan 2026 21:51:04 +0100
Subject: [PATCH] feat: add reload request Alert when changing theme

Made it with purpose of working themes and no random light mode parts
---
 src/core/i18n/default.json                  |  1 +
 src/core/ui/settings/pages/Themes/index.tsx | 43 +++++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/src/core/i18n/default.json b/src/core/i18n/default.json
index 5fb80b7..5764edf 100644
--- a/src/core/i18n/default.json
+++ b/src/core/i18n/default.json
@@ -75,6 +75,7 @@
   "MANUFACTURER": "Manufacturer",
   "MESSAGE": "Message",
   "MISCELLANEOUS": "Miscellaneous",
+  "MODAL_RELOAD_THEME_CHANGE": "Reload the app to apply the theme change?",
   "MODAL_RELOAD_REQUIRED": "Reload app?",
   "MODAL_RELOAD_REQUIRED_DESC": "A reload is required to see the changes. Do you want to reload now?",
   "MODAL_THEME_REFETCHED": "Theme refetched",
diff --git a/src/core/ui/settings/pages/Themes/index.tsx b/src/core/ui/settings/pages/Themes/index.tsx
index 9af6fed..5489644 100644
--- a/src/core/ui/settings/pages/Themes/index.tsx
+++ b/src/core/ui/settings/pages/Themes/index.tsx
@@ -33,6 +33,8 @@ import {
   Text,
 } from "@metro/common/components";
 import { View, Image } from "react-native";
+import { showConfirmationAlert } from "@core/vendetta/alerts";
+import { BundleUpdaterManager } from "@lib/api/native/modules";
 
 const { useReducer } = React;
 
@@ -361,6 +363,47 @@ export default function Themes() {
   const navigation = NavigationNative.useNavigation();
 
   const [mode, setMode] = React.useState<"installed" | "browse">("installed");
+
+  // Track the theme that was active when the user entered the Themes page.
+  // If it changes while the user stays on this page, we'll prompt to reload when they leave.
+  const initialThemeIdRef = React.useRef<string | null>(getCurrentTheme()?.id ?? null);
+
+  React.useEffect(() => {
+    const beforeRemoveHandler = (e: any) => {
+      try {
+        const currentId = getCurrentTheme()?.id ?? null;
+        if (currentId !== initialThemeIdRef.current) {
+          // Notify the user that a reload is required for full application of theme changes
+          showConfirmationAlert({
+            title: Strings.MODAL_RELOAD_THEME_CHANGE,
+            content: Strings.MODAL_THEME_REFETCHED_DESC,
+            confirmText: Strings.RELOAD,
+            cancelText: Strings.CANCEL,
+            confirmColor: "red",
+            onConfirm: () => {
+              try {
+                BundleUpdaterManager.reload();
+              } catch (err) {
+                try {
+                  (global as any).NativeModules?.BundleUpdaterManager?.reload?.();
+                } catch (_) {}
+              }
+            },
+          });
+        }
+      } catch (_) {
+        // swallow any unexpected errors — we don't want to block navigation
+      }
+    };
+
+    const unsub = navigation?.addListener ? navigation.addListener("beforeRemove", beforeRemoveHandler) : undefined;
+    return () => {
+      try {
+        if (unsub && typeof unsub === "function") unsub();
+        else if (unsub && typeof unsub.remove === "function") unsub.remove();
+      } catch (_) {}
+    };
+  }, [navigation]);
   const [themesList, setThemesList] = React.useState<ThemeData[]>([]);
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);