From 3eef1f3eaab25a0e5d81ba0d3f706425fd3d8371 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Mon, 26 May 2025 16:38:23 +0530
Subject: [PATCH 1/6] Add action to toggle app mode (light/dark)

---
 frontend/src/AppBuilder/CodeBuilder/utils.js  |  1 +
 .../GlobalSettings/AppModeToggle.jsx          |  2 +-
 .../RightSideBar/Inspector/EventManager.jsx   | 25 ++++++++++++++-
 .../AppBuilder/_stores/slices/eventsSlice.js  | 31 ++++++++++++++++---
 frontend/src/AppBuilder/_stores/utils.js      |  1 +
 frontend/src/Editor/ActionTypes.js            |  6 ++++
 6 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/frontend/src/AppBuilder/CodeBuilder/utils.js b/frontend/src/AppBuilder/CodeBuilder/utils.js
index be3674aa1f..51e9455340 100644
--- a/frontend/src/AppBuilder/CodeBuilder/utils.js
+++ b/frontend/src/AppBuilder/CodeBuilder/utils.js
@@ -88,6 +88,7 @@ export function getSuggestionKeys(refState) {
     'unsetPageVariable',
     'unsetAllPageVariables',
     'switchPage',
+    'toggleAppMode',
   ];
 
   // eslint-disable-next-line no-unused-vars
diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppModeToggle.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppModeToggle.jsx
index 437840975f..b30922d948 100644
--- a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppModeToggle.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppModeToggle.jsx
@@ -6,7 +6,7 @@ import useAppDarkMode from '@/_hooks/useAppDarkMode';
 import useStore from '@/AppBuilder/_stores/store';
 import { shallow } from 'zustand/shallow';
 
-const APP_MODES = [
+export const APP_MODES = [
   { label: 'Auto', value: 'auto' },
   { label: 'Light', value: 'light' },
   { label: 'Dark', value: 'dark' },
diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
index e1c6bcf5c8..fec40e38fb 100644
--- a/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
+++ b/frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx
@@ -35,6 +35,7 @@ import ToggleGroupItem from '@/ToolJetUI/SwitchGroup/ToggleGroupItem';
 import usePopoverObserver from '@/AppBuilder/_hooks/usePopoverObserver';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import { components as selectComponents } from 'react-select';
+import { APP_MODES } from '@/AppBuilder/LeftSidebar/GlobalSettings/AppModeToggle';
 
 export const EventManager = ({
   sourceId,
@@ -70,7 +71,6 @@ export const EventManager = ({
   const eventToDeleteLoaderIndex = useStore((state) => state.eventsSlice.getEventToDeleteLoaderIndex(), shallow);
 
   const { handleYmapEventUpdates } = useContext(EditorContext) || {};
-
   const { updateState } = useAppDataActions();
 
   const currentEvents = allAppEvents?.filter((event) => {
@@ -1018,6 +1018,29 @@ export const EventManager = ({
                   ))}
               </>
             )}
+            {event.actionId === 'toggle-app-mode' && (
+              <>
+                <div className="row">
+                  <div className="col-3 p-2">{t('editor.inspector.eventManager.appMode', 'App mode')}</div>
+                  <div className="col-9" data-cy="query-selection-field">
+                    <Select
+                      className={`${darkMode ? 'select-search-dark' : 'select-search'} w-100`}
+                      options={APP_MODES}
+                      value={event?.appMode}
+                      search={true}
+                      onChange={(value) => {
+                        handlerChanged(index, 'appMode', value);
+                      }}
+                      placeholder={t('globals.select', 'Select') + '...'}
+                      styles={styles}
+                      useMenuPortal={false}
+                      useCustomStyles={true}
+                    />
+                  </div>
+                </div>
+                <RunjsParameters event={event} darkMode={darkMode} index={index} handlerChanged={handlerChanged} />
+              </>
+            )}
             <div className="row mt-3">
               <div className="col-3 p-2">{t('editor.inspector.eventManager.debounce', 'Debounce')}</div>
               <div className="col-9">
diff --git a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
index f93f64b1c5..a40ea7ca3d 100644
--- a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
@@ -1,12 +1,9 @@
 import { appVersionService } from '@/_services';
 import toast from 'react-hot-toast';
 import { findAllEntityReferences } from '@/_stores/utils';
-import { debounce, extractAndReplaceReferencesFromString, resolveCode, replaceEntityReferencesWithIds } from '../utils';
-import { deepClone } from '@/_helpers/utilities/utils.helpers';
-import { dfs } from '@/_stores/handleReferenceTransactions';
+import { debounce, replaceEntityReferencesWithIds } from '../utils';
 import { isQueryRunnable, isValidUUID, serializeNestedObjectToQueryParams } from '@/_helpers/utils';
 import useStore from '@/AppBuilder/_stores/store';
-import { handleLowPriorityWork } from '@/AppBuilder/_helpers/editorHelpers';
 import _ from 'lodash';
 import { logoutAction } from '@/AppBuilder/_utils/auth';
 import { copyToClipboard } from '@/_helpers/appUtils';
@@ -851,6 +848,11 @@ export const createEventsSlice = (set, get) => ({
               return Promise.reject(error);
             }
           }
+          case 'toggle-app-mode': {
+            const { globalSettingsChanged } = get();
+            globalSettingsChanged({ appMode: event.appMode });
+            return Promise.resolve();
+          }
           case 'switch-page': {
             try {
               const { pageId } = event;
@@ -905,7 +907,14 @@ export const createEventsSlice = (set, get) => ({
     }),
 
     generateAppActions: (queryId, mode, isPreview = false) => {
-      const { getCurrentPageComponents, dataQuery, eventsSlice, queryPanel, modules } = get();
+      const {
+        getCurrentPageComponents,
+        dataQuery,
+        eventsSlice,
+        queryPanel,
+        modules,
+        globalSettings: { appMode },
+      } = get();
       const { previewQuery } = queryPanel;
       const { executeAction } = eventsSlice;
       const currentComponents = Object.entries(getCurrentPageComponents());
@@ -1179,6 +1188,17 @@ export const createEventsSlice = (set, get) => ({
         return executeAction(event, mode, {});
       };
 
+      const toggleAppMode = (value) => {
+        if (!value) {
+          value = appMode === 'dark' ? 'light' : 'dark';
+        }
+        const event = {
+          actionId: 'toggle-app-mode',
+          appMode: value,
+        };
+        return executeAction(event, mode, {});
+      };
+
       return {
         runQuery,
         setVariable,
@@ -1201,6 +1221,7 @@ export const createEventsSlice = (set, get) => ({
         logInfo,
         log,
         logError,
+        toggleAppMode,
       };
     },
     // Selectors
diff --git a/frontend/src/AppBuilder/_stores/utils.js b/frontend/src/AppBuilder/_stores/utils.js
index 012d59aaf5..606b1b56ca 100644
--- a/frontend/src/AppBuilder/_stores/utils.js
+++ b/frontend/src/AppBuilder/_stores/utils.js
@@ -490,6 +490,7 @@ export function createReferencesLookup(currentState, forQueryParams = false, ini
     'logInfo',
     'log',
     'logError',
+    'toggleAppMode',
   ];
 
   const suggestionList = [];
diff --git a/frontend/src/Editor/ActionTypes.js b/frontend/src/Editor/ActionTypes.js
index e3fb69f95d..dac27f6fab 100644
--- a/frontend/src/Editor/ActionTypes.js
+++ b/frontend/src/Editor/ActionTypes.js
@@ -139,4 +139,10 @@ export const ActionTypes = [
     options: [{ name: 'copy-to-clipboard', type: 'text', default: '' }],
     group: 'other',
   },
+  {
+    name: 'Toggle app mode',
+    id: 'toggle-app-mode',
+    options: [{ name: 'appMode', type: 'text', default: '' }],
+    group: 'other',
+  },
 ];

From 1c937ac6e66841f4869432b10b2e57cc2da6eb43 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 26 Jun 2025 17:56:00 +0530
Subject: [PATCH 2/6] fix merge conflicts

---
 .../AppBuilder/_stores/slices/eventsSlice.js  | 258 ++++++++++--------
 1 file changed, 137 insertions(+), 121 deletions(-)

diff --git a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
index a40ea7ca3d..84f238b9d6 100644
--- a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
@@ -56,8 +56,8 @@ export const useEventActions = (moduleId = 'canvas') => {
   );
 
   const memoizedUpdateEventsField = useCallback(
-    (field, value) => updateEventsField(field, value, moduleId),
-    [updateEventsField, moduleId]
+    (field, value, moduleId) => updateEventsField(field, value, moduleId),
+    [updateEventsField]
   );
 
   return {
@@ -69,6 +69,17 @@ export const useEventActions = (moduleId = 'canvas') => {
 };
 
 export const createEventsSlice = (set, get) => ({
+  initializeEventsSlice: (moduleId) => {
+    set(
+      (state) => {
+        state.eventsSlice.module[moduleId] = {
+          ...initialState.module.canvas,
+        };
+      },
+      false,
+      'initializeEventsSlice'
+    );
+  },
   eventsSlice: {
     ...initialState,
     setEvents: (events, moduleId = 'canvas') => {
@@ -95,25 +106,17 @@ export const createEventsSlice = (set, get) => ({
       );
     },
     fireEvent: (eventName, id, moduleId, customResolvables, options) => {
-      const { eventsSlice } = get();
-      const {
-        handleEvent,
-        isEditorLoading,
-        module: {
-          [moduleId]: { events },
-        },
-      } = eventsSlice;
+      const { eventsSlice, getCurrentMode, getEditorLoading } = get();
+      const { handleEvent } = eventsSlice;
+      const events = get().eventsSlice.module[moduleId].events;
       const componentEvents = events.filter((event) => event.sourceId === id);
-      const mode = get().currentMode;
-      if (isEditorLoading) return;
-      // if (mode === 'edit' && eventName === 'onClick') {
-      //   onComponentClick(id, component);
-      // }
+      const mode = getCurrentMode(moduleId);
+      if (getEditorLoading(moduleId)) return;
       handleEvent(
         eventName,
         componentEvents,
         { ...options, customVariables: { ...customResolvables } },
-        'canvas',
+        moduleId,
         mode
       );
     },
@@ -126,7 +129,7 @@ export const createEventsSlice = (set, get) => ({
         },
       } = eventsSlice;
       const componentEvents = events.filter((event) => event.sourceId === id);
-      executeActionsForEventId('onClick', componentEvents, mode);
+      executeActionsForEventId('onClick', componentEvents, mode, moduleId);
     },
     addEvent: (event, moduleId = 'canvas') =>
       set((state) => {
@@ -161,46 +164,46 @@ export const createEventsSlice = (set, get) => ({
     createAppVersionEventHandlers: async (event, moduleId) => {
       // get().actions.setIsSaving(true);
       // set({ eventsCreatedLoader: true });
-      get().eventsSlice.updateEventsField('eventsCreatedLoader', true);
-      const appId = get().app.appId;
+      get().eventsSlice.updateEventsField('eventsCreatedLoader', true, moduleId);
+      const appId = get().appStore.modules[moduleId].app.appId;
       const versionId = get().currentVersionId;
       appVersionService
         .createAppVersionEventHandler(appId, versionId, event)
         .then((response) => {
-          get().eventsSlice.updateEventsField('eventsCreatedLoader', false);
-          get().eventsSlice.addEvent(response);
+          get().eventsSlice.updateEventsField('eventsCreatedLoader', false, moduleId);
+          get().eventsSlice.addEvent(response, moduleId);
         })
         .catch((err) => {
-          get().eventsSlice.updateEventsField('eventsCreatedLoader', false);
+          get().eventsSlice.updateEventsField('eventsCreatedLoader', false, moduleId);
           toast.error(err?.error || 'An error occurred while creating the event handler');
         });
     },
     deleteAppVersionEventHandler: async (eventId, index, moduleId = 'canvas') => {
-      const appId = get().app.appId;
+      const appId = get().appStore.modules[moduleId].app.appId;
       const versionId = get().currentVersionId;
-      get().eventsSlice.updateEventsField('eventToDeleteLoaderIndex', index);
+      get().eventsSlice.updateEventsField('eventToDeleteLoaderIndex', index, moduleId);
       const response = await appVersionService.deleteAppVersionEventHandler(appId, versionId, eventId);
-      get().eventsSlice.updateEventsField('eventToDeleteLoaderIndex', null);
+      get().eventsSlice.updateEventsField('eventToDeleteLoaderIndex', null, moduleId);
       if (response?.affected === 1) {
-        get().eventsSlice.removeEvent(eventId);
+        get().eventsSlice.removeEvent(eventId, moduleId);
       }
     },
     updateAppVersionEventHandlers: async (events, updateType = 'update', param, moduleId = 'canvas') => {
       if (param === 'actionId') {
-        get().eventsSlice.updateEventsField('actionsUpdatedLoader', true);
+        get().eventsSlice.updateEventsField('actionsUpdatedLoader', true, moduleId);
       }
       if (param === 'eventId') {
-        get().eventsSlice.updateEventsField('eventsUpdatedLoader', true);
+        get().eventsSlice.updateEventsField('eventsUpdatedLoader', true, moduleId);
       }
       const componentNameIdMapping = get().modules['canvas'].componentNameIdMapping;
       const queryNameIdMapping = get().modules['canvas'].queryNameIdMapping;
       //! Revisit this
-      const appId = get().app.appId;
+      const appId = get().appStore.modules[moduleId].app.appId;
       const versionId = get().currentVersionId;
       const newEvents = replaceEntityReferencesWithIds(events, componentNameIdMapping, queryNameIdMapping);
       const response = await appVersionService.saveAppVersionEventHandlers(appId, versionId, newEvents, updateType);
-      get().eventsSlice.updateEventsField('actionsUpdatedLoader', false);
-      get().eventsSlice.updateEventsField('eventsUpdatedLoader', false);
+      get().eventsSlice.updateEventsField('actionsUpdatedLoader', false, moduleId);
+      get().eventsSlice.updateEventsField('eventsUpdatedLoader', false, moduleId);
       set((state) => {
         const eventsInState = state.eventsSlice.getModuleEvents('canvas');
         const newEvents = eventsInState.map((event) => {
@@ -263,19 +266,19 @@ export const createEventsSlice = (set, get) => ({
         return foundEvent && foundEvent.name === eventName;
       });
       try {
-        return get().eventsSlice.onEvent(eventName, filteredEvents, options, mode);
+        return get().eventsSlice.onEvent(eventName, filteredEvents, options, mode, moduleId);
       } catch (error) {
         console.error(error);
       }
     },
-    onEvent: async (eventName, events, options = {}, mode = 'edit') => {
+    onEvent: async (eventName, events, options = {}, mode = 'edit', moduleId = 'canvas') => {
       const executeActionsForEventId = get().eventsSlice.executeActionsForEventId;
       const customVariables = options?.customVariables ?? {};
       const { setExposedValue } = get();
 
       if (eventName === 'onPageLoad') {
         // for onPageLoad events, we need to execute the actions after the page is loaded
-        executeActionsForEventId('onPageLoad', events, mode, customVariables);
+        executeActionsForEventId('onPageLoad', events, mode, customVariables, moduleId);
       }
       if (eventName === 'onTrigger') {
         const { queryPanel, dataQuery } = get();
@@ -284,7 +287,7 @@ export const createEventsSlice = (set, get) => ({
         const { queryName, parameters } = options;
         const queryId = queries.filter((query) => query.name === queryName && isQueryRunnable(query))?.[0]?.id;
         if (!queryId) return;
-        runQuery(queryId, queryName, true, mode, parameters);
+        runQuery(queryId, queryName, true, mode, parameters, undefined, undefined, false, false, moduleId);
       }
       if (eventName === 'onTableActionButtonClicked') {
         const { action, tableActionEvents } = options;
@@ -293,7 +296,7 @@ export const createEventsSlice = (set, get) => ({
         if (action && executeableActions) {
           for (const event of executeableActions) {
             if (event?.event?.actionId) {
-              await get().eventsSlice.executeAction(event.event, mode, customVariables);
+              await get().eventsSlice.executeAction(event.event, mode, customVariables, moduleId);
             }
           }
         } else {
@@ -307,7 +310,7 @@ export const createEventsSlice = (set, get) => ({
         if (column && tableColumnEvents) {
           for (const event of tableColumnEvents) {
             if (event?.event?.actionId) {
-              await get().eventsSlice.executeAction(event.event, mode, customVariables);
+              await get().eventsSlice.executeAction(event.event, mode, customVariables, moduleId);
             }
           }
         } else {
@@ -318,13 +321,13 @@ export const createEventsSlice = (set, get) => ({
       if (eventName === 'onCalendarEventSelect') {
         const { id, calendarEvent } = options;
         setExposedValue(id, 'selectedEvent', calendarEvent);
-        executeActionsForEventId('onCalendarEventSelect', events, mode, customVariables);
+        executeActionsForEventId('onCalendarEventSelect', events, mode, customVariables, moduleId);
       }
 
       if (eventName === 'onCalendarSlotSelect') {
         const { id, selectedSlots } = options;
         setExposedValue(id, 'selectedSlots', selectedSlots);
-        executeActionsForEventId('onCalendarSlotSelect', events, mode, customVariables);
+        executeActionsForEventId('onCalendarSlotSelect', events, mode, customVariables, moduleId);
       }
 
       if (
@@ -382,31 +385,31 @@ export const createEventsSlice = (set, get) => ({
           'onTableDataDownload',
         ].includes(eventName)
       ) {
-        executeActionsForEventId(eventName, events, mode, customVariables);
+        executeActionsForEventId(eventName, events, mode, customVariables, moduleId);
       }
       if (eventName === 'onBulkUpdate') {
-        await executeActionsForEventId(eventName, events, mode, customVariables);
+        await executeActionsForEventId(eventName, events, mode, customVariables, moduleId);
       }
 
       if (['onDataQuerySuccess', 'onDataQueryFailure'].includes(eventName)) {
         if (!events || !Array.isArray(events) || events.length === 0) return;
-        await executeActionsForEventId(eventName, events, mode, customVariables);
+        await executeActionsForEventId(eventName, events, mode, customVariables, moduleId);
       }
     },
-    executeActionsForEventId: async (eventId, events = [], mode, customVariables) => {
+    executeActionsForEventId: async (eventId, events = [], mode, customVariables, moduleId = 'canvas') => {
       if (!events || !Array.isArray(events) || events.length === 0) return;
       const filteredEvents = events
         ?.filter((event) => event?.event.eventId === eventId)
         ?.sort((a, b) => a.index - b.index);
 
       for (const event of filteredEvents) {
-        await get().eventsSlice.executeAction(event, mode, customVariables);
+        await get().eventsSlice.executeAction(event, mode, customVariables, moduleId);
       }
     },
     logError(errorType, errorKind, error, eventObj = '', options = {}, logLevel = 'error') {
       const { event = eventObj } = eventObj;
       const pages = get().modules.canvas.pages;
-      const currentPageId = get().currentPageId;
+      const currentPageId = get().getCurrentPageId('canvas');
       const currentPage = pages.find((page) => page.id === currentPageId);
       const componentIdMapping = get().modules['canvas'].componentNameIdMapping;
       const componentName = Object.keys(componentIdMapping).find(
@@ -476,12 +479,12 @@ export const createEventsSlice = (set, get) => ({
         timestamp: moment().toISOString(),
       });
     },
-    executeAction: debounce(async (eventObj, mode, customVariables = {}) => {
+    executeAction: debounce(async (eventObj, mode, customVariables = {}, moduleId = 'canvas') => {
       const { event = eventObj } = eventObj;
       const { getExposedValueOfComponent, getResolvedValue } = get();
 
       if (event?.runOnlyIf) {
-        const shouldRun = getResolvedValue(event.runOnlyIf, customVariables);
+        const shouldRun = getResolvedValue(event.runOnlyIf, customVariables, moduleId);
         if (!shouldRun) {
           return false;
         }
@@ -491,7 +494,8 @@ export const createEventsSlice = (set, get) => ({
         //! TODO run only if conditions
         switch (event.actionId) {
           case 'show-alert': {
-            let message = getResolvedValue(event.message, customVariables);
+            let message = getResolvedValue(event.message, customVariables, moduleId);
+
             if (typeof message === 'object') message = JSON.stringify(message);
 
             switch (event.alertType) {
@@ -549,16 +553,32 @@ export const createEventsSlice = (set, get) => ({
               if (!queryId && !queryName) {
                 throw new Error('No query selected');
               }
+              // Check and replace the module input dummy queries with the linked query id
+              /* Logic starts here */
+              const moduleInputDummyQueries = get()?.getModuleInputDummyQueries?.() || {};
+              let updatedQueryId = queryId,
+                updatedQueryName = queryName,
+                updatedModuleId = moduleId;
+              if (moduleInputDummyQueries[queryId]) {
+                updatedQueryId =
+                  get().resolvedStore.modules[moduleId].exposedValues.input[moduleInputDummyQueries[queryId]]?.id;
+                updatedModuleId = 'canvas'; // Updating the moduleId to canvas as the query is a module input query which will be present on canvas
+              }
+              /* Logic ends here */
+
+              if (!updatedQueryId) {
+                throw new Error('No query selected');
+              }
               const resolvedParams = {};
               if (params) {
                 Object.keys(params).map(
-                  (param) => (resolvedParams[param] = getResolvedValue(params[param], undefined))
+                  (param) => (resolvedParams[param] = getResolvedValue(params[param], undefined, moduleId))
                 );
               }
               // !Todo tackle confirm query part once done
               return get().queryPanel.runQuery(
-                queryId,
-                queryName,
+                updatedQueryId,
+                updatedQueryName,
                 undefined,
                 undefined,
                 resolvedParams,
@@ -566,7 +586,7 @@ export const createEventsSlice = (set, get) => ({
                 eventId,
                 false,
                 false,
-                'canvas'
+                updatedModuleId
               );
             } catch (error) {
               get().eventsSlice.logError('run_query', 'run-query', error, eventObj, {
@@ -580,7 +600,7 @@ export const createEventsSlice = (set, get) => ({
           }
           case 'open-webpage': {
             //! if resolvecode default value should be the value itself not empty string ... Ask KAVIN
-            const resolvedValue = getResolvedValue(event.url, customVariables);
+            const resolvedValue = getResolvedValue(event.url, customVariables, moduleId);
             // const url = resolveReferences(event.url, undefined, customVariables);
             window.open(resolvedValue, event?.windowTarget === 'newTab' ? '_blank' : '_self');
             return Promise.resolve();
@@ -590,7 +610,7 @@ export const createEventsSlice = (set, get) => ({
               if (!event.slug) {
                 throw new Error('No application slug provided');
               }
-              const resolvedValue = getResolvedValue(event.slug, customVariables);
+              const resolvedValue = getResolvedValue(event.slug, customVariables, moduleId);
               const slug = resolvedValue;
               const queryParams = event.queryParams?.reduce(
                 (result, queryParam) => ({
@@ -628,23 +648,23 @@ export const createEventsSlice = (set, get) => ({
           case 'close-modal':
             return get().eventsSlice.showModal(event.modal, false, eventObj);
           case 'copy-to-clipboard': {
-            const contentToCopy = getResolvedValue(event.contentToCopy, customVariables);
+            const contentToCopy = getResolvedValue(event.contentToCopy, customVariables, moduleId);
             copyToClipboard(contentToCopy);
 
             return Promise.resolve();
           }
           case 'set-localstorage-value': {
-            const key = getResolvedValue(event.key, customVariables);
-            const value = getResolvedValue(event.value, customVariables);
+            const key = getResolvedValue(event.key, customVariables, moduleId);
+            const value = getResolvedValue(event.value, customVariables, moduleId);
             localStorage.setItem(key, value);
 
             return Promise.resolve();
           }
           case 'generate-file': {
             // const fileType = event.fileType;
-            const data = getResolvedValue(event.data, customVariables) || [];
-            const fileName = getResolvedValue(event.fileName, customVariables) || 'data.txt';
-            const fileType = getResolvedValue(event.fileType, customVariables) || 'csv';
+            const data = getResolvedValue(event.data, customVariables, moduleId) || [];
+            const fileName = getResolvedValue(event.fileName, customVariables, moduleId) || 'data.txt';
+            const fileType = getResolvedValue(event.fileType, customVariables, moduleId) || 'csv';
             const fileData = {
               csv: generateCSV,
               plaintext: (plaintext) => plaintext,
@@ -655,15 +675,22 @@ export const createEventsSlice = (set, get) => ({
           }
 
           case 'set-table-page': {
-            get().eventsSlice.setTablePageIndex(event.table, getResolvedValue(event.pageIndex), eventObj);
+            get().eventsSlice.setTablePageIndex(
+              event.table,
+              getResolvedValue(event.pageIndex, undefined, moduleId),
+              eventObj
+            );
             break;
           }
 
           case 'set-custom-variable': {
             const { setVariable } = get();
-            const key = getResolvedValue(event.key, customVariables);
-            const value = getResolvedValue(event.value, customVariables);
-            setVariable(key, value);
+            const key = getResolvedValue(event.key, customVariables, moduleId);
+            const value = getResolvedValue(event.value, customVariables, moduleId);
+
+            console.log('here--- set-custom-variable', key, value, moduleId);
+
+            setVariable(key, value, moduleId);
             return Promise.resolve();
             // customAppVariables[key] = value;
             // const resp = useCurrentStateStore.getState().actions.setCurrentState({
@@ -684,20 +711,20 @@ export const createEventsSlice = (set, get) => ({
 
           case 'get-custom-variable': {
             const { getVariable } = get();
-            const key = getResolvedValue(event.key, customVariables);
-            return getVariable(key);
+            const key = getResolvedValue(event.key, customVariables, moduleId);
+            return getVariable(key, moduleId);
           }
 
           case 'unset-all-custom-variables': {
             const { unsetAllVariables } = get();
-            unsetAllVariables();
+            unsetAllVariables(moduleId);
             return Promise.resolve();
           }
 
           case 'unset-custom-variable': {
             const { unsetVariable } = get();
-            const key = getResolvedValue(event.key, customVariables);
-            unsetVariable(key);
+            const key = getResolvedValue(event.key, customVariables, moduleId);
+            unsetVariable(key, moduleId);
             return Promise.resolve();
             // const customAppVariables = { ...getCurrentState().variables };
             // delete customAppVariables[key];
@@ -714,9 +741,9 @@ export const createEventsSlice = (set, get) => ({
 
           case 'set-page-variable': {
             const { setPageVariable } = get();
-            const key = getResolvedValue(event.key, customVariables);
-            const value = getResolvedValue(event.value, customVariables);
-            setPageVariable(key, value);
+            const key = getResolvedValue(event.key, customVariables, moduleId);
+            const value = getResolvedValue(event.value, customVariables, moduleId);
+            setPageVariable(key, value, moduleId);
             return Promise.resolve();
             // const customPageVariables = {
             //   ...getCurrentState().page.variables,
@@ -746,20 +773,20 @@ export const createEventsSlice = (set, get) => ({
 
           case 'get-page-variable': {
             const { getPageVariable } = get();
-            const key = getResolvedValue(event.key, customVariables);
-            return getPageVariable(key);
+            const key = getResolvedValue(event.key, customVariables, moduleId);
+            return getPageVariable(key, moduleId);
           }
 
           case 'unset-all-page-variables': {
             const { unsetAllPageVariables } = get();
-            unsetAllPageVariables();
+            unsetAllPageVariables(moduleId);
             return Promise.resolve();
           }
 
           case 'unset-page-variable': {
             const { unsetPageVariable } = get();
-            const key = getResolvedValue(event.key, customVariables);
-            unsetPageVariable(key);
+            const key = getResolvedValue(event.key, customVariables, moduleId);
+            unsetPageVariable(key, moduleId);
             return Promise.resolve();
 
             // useStore.getState().unsetPageVariable(key);
@@ -826,17 +853,12 @@ export const createEventsSlice = (set, get) => ({
               // }));
               // console.log('actionArguments', event.componentSpecificActionParams);
               const actionArguments = event.componentSpecificActionParams.map((param) => {
-                const value = getResolvedValue(param.value, customVariables);
+                const value = getResolvedValue(param.value, customVariables, moduleId);
                 return {
                   ...param,
                   value: value,
-                  // value: resolveCode(re.valueWithBrackets, getAllExposedValues()),
                 };
               });
-              // const actionArguments = _.map(event.componentSpecificActionParams, (param) => ({
-              //   ...param,
-              //   value: resolveReferences(param.value, getAllExposedValues(), customVariables),
-              // }));
 
               const actionPromise = action && action(...actionArguments.map((argument) => argument.value));
               return actionPromise ?? Promise.resolve();
@@ -860,7 +882,7 @@ export const createEventsSlice = (set, get) => ({
                 throw new Error('No page ID provided');
               }
               const { switchPage } = get();
-              const page = get().modules.canvas.pages.find((page) => page.id === event.pageId);
+              const page = get().modules[moduleId].pages.find((page) => page.id === event.pageId);
               const queryParams = event.queryParams || [];
               if (page.restricted && mode !== 'edit') {
                 toast.error('Access to this page is restricted. Contact admin to know more.');
@@ -868,8 +890,8 @@ export const createEventsSlice = (set, get) => ({
                 const resolvedQueryParams = [];
                 queryParams.forEach((param) => {
                   resolvedQueryParams.push([
-                    getResolvedValue(param[0], customVariables),
-                    getResolvedValue(param[1], customVariables),
+                    getResolvedValue(param[0], customVariables, moduleId),
+                    getResolvedValue(param[1], customVariables, moduleId),
                   ]);
                 });
                 const currentUrlParams = new URLSearchParams(window.location.search);
@@ -882,7 +904,7 @@ export const createEventsSlice = (set, get) => ({
                     }
                   }
                 });
-                switchPage(page.id, page.handle, resolvedQueryParams);
+                switchPage(page.id, page.handle, resolvedQueryParams, moduleId);
               } else {
                 toast.error('Page is disabled');
                 //!TODO push to debugger
@@ -906,21 +928,14 @@ export const createEventsSlice = (set, get) => ({
       }
     }),
 
-    generateAppActions: (queryId, mode, isPreview = false) => {
-      const {
-        getCurrentPageComponents,
-        dataQuery,
-        eventsSlice,
-        queryPanel,
-        modules,
-        globalSettings: { appMode },
-      } = get();
+    generateAppActions: (queryId, mode, isPreview = false, moduleId = 'canvas') => {
+      const { getCurrentPageComponents, dataQuery, eventsSlice, queryPanel, modules, globalSettings: { appMode  } = get();
       const { previewQuery } = queryPanel;
       const { executeAction } = eventsSlice;
-      const currentComponents = Object.entries(getCurrentPageComponents());
+      const currentComponents = Object.entries(getCurrentPageComponents(moduleId));
 
-      const runQuery = (queryName = '', parameters) => {
-        const query = dataQuery.queries.modules['canvas'].find((query) => {
+      const runQuery = (queryName = '', parameters, moduleId = 'canvas') => {
+        const query = dataQuery.queries.modules[moduleId].find((query) => {
           const isFound = query.name === queryName;
           if (isPreview) {
             return isFound;
@@ -953,7 +968,7 @@ export const createEventsSlice = (set, get) => ({
           parameters: processedParams,
         };
 
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const setVariable = (key = '', value = '') => {
@@ -963,7 +978,7 @@ export const createEventsSlice = (set, get) => ({
             key,
             value,
           };
-          return executeAction(event, mode, {});
+          return executeAction(event, mode, {}, moduleId);
         }
       };
 
@@ -973,7 +988,7 @@ export const createEventsSlice = (set, get) => ({
             actionId: 'get-custom-variable',
             key,
           };
-          return executeAction(event, mode, {});
+          return executeAction(event, mode, {}, moduleId);
         }
       };
 
@@ -990,7 +1005,7 @@ export const createEventsSlice = (set, get) => ({
             actionId: 'unset-custom-variable',
             key,
           };
-          return executeAction(event, mode, {});
+          return executeAction(event, mode, {}, moduleId);
         }
       };
 
@@ -1000,14 +1015,14 @@ export const createEventsSlice = (set, get) => ({
           alertType,
           message,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const logout = () => {
         const event = {
           actionId: 'logout',
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const showModal = (modalName = '') => {
@@ -1022,7 +1037,7 @@ export const createEventsSlice = (set, get) => ({
           actionId: 'show-modal',
           modal,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const closeModal = (modalName = '') => {
@@ -1037,7 +1052,7 @@ export const createEventsSlice = (set, get) => ({
           actionId: 'close-modal',
           modal,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const setLocalStorage = (key = '', value = '') => {
@@ -1046,7 +1061,7 @@ export const createEventsSlice = (set, get) => ({
           key,
           value,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const copyToClipboard = (contentToCopy = '') => {
@@ -1054,7 +1069,7 @@ export const createEventsSlice = (set, get) => ({
           actionId: 'copy-to-clipboard',
           contentToCopy,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const goToApp = (slug = '', queryParams = []) => {
@@ -1063,7 +1078,7 @@ export const createEventsSlice = (set, get) => ({
           slug,
           queryParams,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const generateFile = (fileName, fileType, data) => {
@@ -1077,7 +1092,7 @@ export const createEventsSlice = (set, get) => ({
           data,
           fileType,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const setPageVariable = (key = '', value = '') => {
@@ -1086,7 +1101,7 @@ export const createEventsSlice = (set, get) => ({
           key,
           value,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const getPageVariable = (key = '') => {
@@ -1094,7 +1109,7 @@ export const createEventsSlice = (set, get) => ({
           actionId: 'get-page-variable',
           key,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const unsetAllPageVariables = () => {
@@ -1109,10 +1124,10 @@ export const createEventsSlice = (set, get) => ({
           actionId: 'unset-page-variable',
           key,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
-      const switchPage = (pageHandle, queryParams = []) => {
+      const switchPage = (pageHandle, queryParams = [], moduleId = 'canvas') => {
         if (isPreview) {
           mode != 'view' &&
             toast('Page will not be switched for query preview', {
@@ -1120,7 +1135,7 @@ export const createEventsSlice = (set, get) => ({
             });
           return Promise.resolve();
         }
-        const pages = modules.canvas.pages;
+        const pages = modules[moduleId].pages;
         const transformedPageHandle = pageHandle?.toLowerCase();
         const pageId = pages.find((page) => page.handle === transformedPageHandle)?.id;
 
@@ -1137,7 +1152,7 @@ export const createEventsSlice = (set, get) => ({
           pageId,
           queryParams,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const logInfo = (log, isFromTransformation) => {
@@ -1153,7 +1168,7 @@ export const createEventsSlice = (set, get) => ({
           eventType: 'customLog',
           query,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
       const logError = (log, isFromTransformation = false) => {
@@ -1169,8 +1184,9 @@ export const createEventsSlice = (set, get) => ({
           eventType: 'customLog',
           query,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
+      
 
       const log = (log, isFromTransformation = false) => {
         const query = dataQuery.queries.modules['canvas'].find((query) => query.id == queryId);
@@ -1185,10 +1201,10 @@ export const createEventsSlice = (set, get) => ({
           eventType: 'customLog',
           query,
         };
-        return executeAction(event, mode, {});
+        return executeAction(event, mode, {}, moduleId);
       };
 
-      const toggleAppMode = (value) => {
+       const toggleAppMode = (value) => {
         if (!value) {
           value = appMode === 'dark' ? 'light' : 'dark';
         }

From 6a2fd17b00b9893c973ef8d22efec7975ae1c78a Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Thu, 26 Jun 2025 18:17:44 +0530
Subject: [PATCH 3/6] fix

---
 .../src/AppBuilder/_stores/slices/eventsSlice.js     | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
index 84f238b9d6..255f23c081 100644
--- a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
@@ -929,7 +929,14 @@ export const createEventsSlice = (set, get) => ({
     }),
 
     generateAppActions: (queryId, mode, isPreview = false, moduleId = 'canvas') => {
-      const { getCurrentPageComponents, dataQuery, eventsSlice, queryPanel, modules, globalSettings: { appMode  } = get();
+      const {
+        getCurrentPageComponents,
+        dataQuery,
+        eventsSlice,
+        queryPanel,
+        modules,
+        globalSettings: { appMode },
+      } = get();
       const { previewQuery } = queryPanel;
       const { executeAction } = eventsSlice;
       const currentComponents = Object.entries(getCurrentPageComponents(moduleId));
@@ -1186,7 +1193,6 @@ export const createEventsSlice = (set, get) => ({
         };
         return executeAction(event, mode, {}, moduleId);
       };
-      
 
       const log = (log, isFromTransformation = false) => {
         const query = dataQuery.queries.modules['canvas'].find((query) => query.id == queryId);
@@ -1204,7 +1210,7 @@ export const createEventsSlice = (set, get) => ({
         return executeAction(event, mode, {}, moduleId);
       };
 
-       const toggleAppMode = (value) => {
+      const toggleAppMode = (value) => {
         if (!value) {
           value = appMode === 'dark' ? 'light' : 'dark';
         }

From 14e1a6b13b48fbc3031b0d001695db62b6ac97c5 Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Fri, 27 Jun 2025 14:56:41 +0530
Subject: [PATCH 4/6] fix if any character is passed pther than light or dark

---
 frontend/src/AppBuilder/_stores/slices/eventsSlice.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
index 255f23c081..4de4d8b9a1 100644
--- a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
@@ -1211,6 +1211,9 @@ export const createEventsSlice = (set, get) => ({
       };
 
       const toggleAppMode = (value) => {
+        if (value && value !== 'light' && value !== 'dark' && value !== 'auto') {
+          return;
+        }
         if (!value) {
           value = appMode === 'dark' ? 'light' : 'dark';
         }

From 128668ac0d629a2dba45e9b9127d873a024cc58d Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Tue, 1 Jul 2025 11:09:58 +0530
Subject: [PATCH 5/6] fix appId being undefined

---
 frontend/src/AppBuilder/_hooks/useAppData.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js
index cd7d18449c..50a01d4e95 100644
--- a/frontend/src/AppBuilder/_hooks/useAppData.js
+++ b/frontend/src/AppBuilder/_hooks/useAppData.js
@@ -336,7 +336,7 @@ const useAppData = (
         setApp(
           {
             appName: appData.name,
-            appId: appData.id,
+            appId,
             slug: appData.slug,
             currentAppEnvironmentId: editorEnvironment.id,
             isMaintenanceOn:

From 68a92249724343ab47bf64e1faf3eb51983dabbf Mon Sep 17 00:00:00 2001
From: Nakul Nagargade <nakul@tooljet.com>
Date: Tue, 1 Jul 2025 18:39:31 +0530
Subject: [PATCH 6/6] Fix toggle app mode not working for public apps

---
 .../LeftSidebar/GlobalSettings/AppModeToggle.jsx | 10 ++--------
 frontend/src/AppBuilder/_hooks/useAppData.js     |  3 +--
 .../src/AppBuilder/_stores/slices/appSlice.js    | 14 ++++++++++++++
 .../src/AppBuilder/_stores/slices/eventsSlice.js |  4 ++--
 frontend/src/_hooks/useAppDarkMode.js            |  6 +++---
 frontend/src/_services/appVersion.service.js     | 14 +++++++++++++-
 server/src/modules/apps/service.ts               |  1 +
 server/src/modules/versions/controller.v2.ts     | 11 ++++++++++-
 .../modules/versions/interfaces/IControllerV2.ts |  1 +
 server/src/modules/versions/service.ts           | 16 +++++++++++++++-
 10 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppModeToggle.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppModeToggle.jsx
index b30922d948..09cbefd90f 100644
--- a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppModeToggle.jsx
+++ b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/AppModeToggle.jsx
@@ -15,12 +15,7 @@ export const APP_MODES = [
 const AppModeToggle = ({ darkMode }) => {
   const { onAppModeChange, appMode } = useAppDarkMode();
   const { t } = useTranslation();
-  const { globalSettingsChanged } = useStore(
-    (state) => ({
-      globalSettingsChanged: state.globalSettingsChanged,
-    }),
-    shallow
-  );
+
   const setResolvedGlobals = useStore((state) => state.setResolvedGlobals);
 
   return (
@@ -33,8 +28,7 @@ const AppModeToggle = ({ darkMode }) => {
             if (value === 'auto') {
               exposedTheme = darkMode ? 'dark' : 'light';
             }
-            onAppModeChange({ appMode: value });
-            // globalSettingsChanged({ theme: { name: exposedTheme } });
+            onAppModeChange(value);
             setResolvedGlobals('theme', { name: exposedTheme });
           }}
           defaultValue={appMode}
diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js
index 50a01d4e95..c8281d79e6 100644
--- a/frontend/src/AppBuilder/_hooks/useAppData.js
+++ b/frontend/src/AppBuilder/_hooks/useAppData.js
@@ -332,11 +332,10 @@ const useAppData = (
           appData.editing_version?.homePageId || appData.editing_version?.home_page_id || appData.home_page_id;
 
         appTypeRef.current = appData.type;
-
         setApp(
           {
             appName: appData.name,
-            appId,
+            appId: appId || appData?.appId || appData?.app_id,
             slug: appData.slug,
             currentAppEnvironmentId: editorEnvironment.id,
             isMaintenanceOn:
diff --git a/frontend/src/AppBuilder/_stores/slices/appSlice.js b/frontend/src/AppBuilder/_stores/slices/appSlice.js
index fdb81e97a9..0d1160d49b 100644
--- a/frontend/src/AppBuilder/_stores/slices/appSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/appSlice.js
@@ -160,6 +160,20 @@ export const createAppSlice = (set, get) => ({
       console.error('Error updating page:', error);
     }
   },
+  updateAppMode: async (appMode, moduleId = 'canvas') => {
+    const { appStore, currentVersionId } = get();
+    try {
+      const res = await appVersionService.updateAppMode(
+        appStore.modules[moduleId].app.appId,
+        currentVersionId,
+        appMode
+      );
+      set((state) => ({ globalSettings: { ...state.globalSettings, appMode } }));
+    } catch (error) {
+      toast.error('App mode could not be updated.');
+      console.error('Error updating app mode:', error);
+    }
+  },
   switchPage: (pageId, handle, queryParams = [], moduleId = 'canvas', isBackOrForward = false) => {
     get().debugger.resetUnreadErrorCount();
     // reset stores
diff --git a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
index 4de4d8b9a1..a210c98f1b 100644
--- a/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
+++ b/frontend/src/AppBuilder/_stores/slices/eventsSlice.js
@@ -871,8 +871,8 @@ export const createEventsSlice = (set, get) => ({
             }
           }
           case 'toggle-app-mode': {
-            const { globalSettingsChanged } = get();
-            globalSettingsChanged({ appMode: event.appMode });
+            const { updateAppMode } = get();
+            updateAppMode(event.appMode);
             return Promise.resolve();
           }
           case 'switch-page': {
diff --git a/frontend/src/_hooks/useAppDarkMode.js b/frontend/src/_hooks/useAppDarkMode.js
index 7e5b33f87b..2f610031f0 100644
--- a/frontend/src/_hooks/useAppDarkMode.js
+++ b/frontend/src/_hooks/useAppDarkMode.js
@@ -3,10 +3,10 @@ import { shallow } from 'zustand/shallow';
 import useStore from '@/AppBuilder/_stores/store';
 
 const useAppDarkMode = () => {
-  const { appMode, globalSettingsChanged, isTJDarkMode } = useStore(
+  const { appMode, updateAppMode, isTJDarkMode } = useStore(
     (state) => ({
       appMode: state.globalSettings.appMode,
-      globalSettingsChanged: state.globalSettingsChanged,
+      updateAppMode: state.updateAppMode,
       isTJDarkMode: state.isTJDarkMode,
     }),
     shallow
@@ -23,7 +23,7 @@ const useAppDarkMode = () => {
   }, [appMode, isTJDarkMode]);
 
   return {
-    onAppModeChange: globalSettingsChanged,
+    onAppModeChange: updateAppMode,
     appMode,
     isAppDarkMode,
   };
diff --git a/frontend/src/_services/appVersion.service.js b/frontend/src/_services/appVersion.service.js
index bda0b7a192..e798817521 100644
--- a/frontend/src/_services/appVersion.service.js
+++ b/frontend/src/_services/appVersion.service.js
@@ -15,6 +15,7 @@ export const appVersionService = {
   deleteAppVersionEventHandler,
   clonePage,
   findAllEventsWithSourceId,
+  updateAppMode,
 };
 
 function getAll(appId) {
@@ -139,12 +140,23 @@ function autoSaveApp(
     credentials: 'include',
     body: JSON.stringify(body),
   };
-
   const url = `${config.apiUrl}/v2/apps/${appId}/versions/${versionId}/${type ?? ''}`;
 
   return fetch(url, requestOptions).then(handleResponse);
 }
 
+function updateAppMode(appId, versionId, appMode) {
+  const requestOptions = {
+    method: 'PUT',
+    headers: authHeader(),    
+    credentials: 'include',
+    body: JSON.stringify({ appId, versionId, appMode }),
+  };
+  const url = `${config.apiUrl}/v2/apps/${appId}/versions/${versionId}/global_settings/app_mode`;
+
+  return fetch(url, requestOptions).then(handleResponse);
+}
+
 function saveAppVersionEventHandlers(appId, versionId, events, updateType = 'update') {
   const body = {
     events,
diff --git a/server/src/modules/apps/service.ts b/server/src/modules/apps/service.ts
index 66c0c681bb..30bfa92c64 100644
--- a/server/src/modules/apps/service.ts
+++ b/server/src/modules/apps/service.ts
@@ -349,6 +349,7 @@ export class AppsService implements IAppsService {
         globalSettings: { ...versionToLoad.globalSettings, theme: appTheme },
         showViewerNavigation: versionToLoad.showViewerNavigation,
         pageSettings: versionToLoad?.pageSettings,
+        appId: app.id,
       };
     };
 
diff --git a/server/src/modules/versions/controller.v2.ts b/server/src/modules/versions/controller.v2.ts
index 7a3f006883..95d2a68664 100644
--- a/server/src/modules/versions/controller.v2.ts
+++ b/server/src/modules/versions/controller.v2.ts
@@ -1,4 +1,4 @@
-import { Body, Controller, Get, Put, UseGuards } from '@nestjs/common';
+import { Body, Controller, Get, Param, Put, UseGuards } from '@nestjs/common';
 import { VersionService } from './service';
 import { InitModule } from '@modules/app/decorators/init-module';
 import { MODULES } from '@modules/app/constants/modules';
@@ -36,6 +36,13 @@ export class VersionControllerV2 implements IVersionControllerV2 {
   updateVersion(@User() user, @App() app: AppEntity, @Body() appVersionUpdateDto: AppVersionUpdateDto) {
     return this.versionService.update(app, user, appVersionUpdateDto);
   }
+ 
+  // If we want to update app mode in public app, we use this endpoint
+  @InitFeature(FEATURE_KEY.UPDATE_SETTINGS)
+  @Put(':id/versions/:versionId/global_settings/app_mode')
+  updateAppMode(@Body() @Param('appMode') appMode: 'light' | 'dark' | 'auto', @Param('id') appId: string, @Param('versionId') versionId: string) {
+    return this.versionService.updateAppMode(appId, versionId, appMode);
+  }
 
   @InitFeature(FEATURE_KEY.UPDATE_SETTINGS)
   @UseGuards(JwtAuthGuard, ValidAppGuard, FeatureAbilityGuard)
@@ -48,6 +55,8 @@ export class VersionControllerV2 implements IVersionControllerV2 {
     return this.versionService.updateSettings(app, user, appVersionUpdateDto);
   }
 
+ 
+
   @InitFeature(FEATURE_KEY.PROMOTE)
   @UseGuards(JwtAuthGuard, ValidAppGuard, FeatureAbilityGuard)
   @Put(':id/versions/:versionId/promote')
diff --git a/server/src/modules/versions/interfaces/IControllerV2.ts b/server/src/modules/versions/interfaces/IControllerV2.ts
index 2d86353981..bb382ff055 100644
--- a/server/src/modules/versions/interfaces/IControllerV2.ts
+++ b/server/src/modules/versions/interfaces/IControllerV2.ts
@@ -7,5 +7,6 @@ export interface IVersionControllerV2 {
   getVersion(user: UserEntity, app: AppEntity): Promise<any>;
   updateVersion(user: UserEntity, app: AppEntity, appVersionUpdateDto: AppVersionUpdateDto): Promise<any>;
   updateGlobalSettings(user: UserEntity, app: AppEntity, appVersionUpdateDto: AppVersionUpdateDto): Promise<any>;
+  updateAppMode(appId: string, versionId: string, appMode: 'light' | 'dark' | 'auto'): Promise<any>;
   promoteVersion(user: UserEntity, app: AppEntity, promoteVersionDto: PromoteVersionDto): Promise<any>;
 }
diff --git a/server/src/modules/versions/service.ts b/server/src/modules/versions/service.ts
index 2f936419cd..0c37d4051b 100644
--- a/server/src/modules/versions/service.ts
+++ b/server/src/modules/versions/service.ts
@@ -198,7 +198,7 @@ export class VersionService implements IVersionService {
 
   async updateSettings(app: App, user: User, appVersionUpdateDto: AppVersionUpdateDto) {
     const appVersion = await this.versionRepository.findById(app.appVersions[0].id, app.id);
-
+  
     await this.versionsUtilService.updateVersion(appVersion, appVersionUpdateDto);
 
     RequestContext.setLocals(AUDIT_LOGS_REQUEST_CONTEXT_KEY, {
@@ -210,6 +210,20 @@ export class VersionService implements IVersionService {
     });
     return;
   }
+ 
+  async updateAppMode(appId: string, versionId: string, appMode: 'light' | 'dark' | 'auto') {
+    const appVersion = await this.versionRepository.findById(versionId, appId);
+    const updateDto: Partial<AppVersionUpdateDto> = {
+      globalSettings: {
+        theme: {
+          appMode,
+        },
+      },
+    };
+
+    return await this.versionsUtilService.updateVersion(appVersion, updateDto as AppVersionUpdateDto);
+  }
+
 
   promoteVersion(app: App, user: User, promoteVersionDto: PromoteVersionDto) {
     return dbTransactionWrap(async (manager: EntityManager) => {