fix: darkmode action on viewer in incognito

frontend/src/AppBuilder/Viewer/DesktopHeader.jsx

@@ -19,13 +19,10 @@ const DesktopHeader = ({
   isAppLoaded,
   changeToDarkMode,
 }) => {
-  const { editingVersion, showDarkModeToggle, isReleasedVersionId } = useStore(
+  const { showDarkModeToggle, isReleasedVersionId } = useStore(
     (state) => ({
-      editingVersion: state?.editingVersion,
-      isReleasedVersionId: state?.releasedVersionId == state.editingVersion || state.isVersionReleased,
-      switchDarkMode: state.switchDarkMode,
+      isReleasedVersionId: state?.releasedVersionId == state.selectedVersion?.id || state.isVersionReleased,
       showDarkModeToggle: state.globalSettings.appMode === 'auto' || !state.globalSettings.appMode,
-      appMode: state.globalSettings.appMode,
     }),
     shallow
   );

frontend/src/AppBuilder/_hooks/useAppData.js

@@ -190,7 +190,7 @@ const useAppData = (appId, moduleId, mode = 'edit', { environmentId, versionId }
       );
 
       setPages(pages, moduleId);
-      setPageSettings(deepCamelCase(appData?.editing_version?.page_settings));
+      setPageSettings(deepCamelCase(appData?.editing_version?.page_settings || appData?.page_settings));
 
       // set starting page as homepage initially
       let startingPage = appData.pages.find((page) => page.id === homePageId);

frontend/src/_components/DarkModeToggle.jsx

@@ -102,7 +102,9 @@ export const DarkModeToggle = function DarkModeToggle({
         </animated.svg>
 
         {showText && (
-          <span className="dark-theme-toggle-btn-text">Switch to {!darkMode ? 'dark mode' : 'light mode'}</span>
+          <span className="dark-theme-toggle-btn-text" onClick={toggleDarkMode}>
+            Switch to {!darkMode ? 'dark mode' : 'light mode'}
+          </span>
         )}
       </div>
     </OverlayTrigger>

frontend/src/_hooks/useAppDarkMode.js

@@ -1,31 +1,17 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { shallow } from 'zustand/shallow';
-import { useEditorStore } from '@/_stores/editorStore';
-import { useAppDataStore } from '@/_stores/appDataStore';
+import useStore from '@/AppBuilder/_stores/store';
 
 const useAppDarkMode = () => {
-  const { appMode, setAppMode } = useEditorStore(
-    (state) => ({
-      appMode: state.appMode,
-      setAppMode: state.actions.setAppMode,
-    }),
-    shallow
-  );
-
-  const { isTJDarkMode } = useAppDataStore(
+  const { appMode, globalSettingsChanged, isTJDarkMode } = useStore(
     (state) => ({
+      appMode: state.globalSettings.appMode,
+      globalSettingsChanged: state.globalSettingsChanged,
       isTJDarkMode: state.isTJDarkMode,
     }),
     shallow
   );
 
-  const handleAppModeChange = useCallback(
-    (appMode = 'auto') => {
-      setAppMode(appMode);
-    },
-    [setAppMode]
-  );
-
   const isAppDarkMode = useMemo(() => {
     if (appMode === 'light') {
       return false;
@@ -37,7 +23,7 @@ const useAppDarkMode = () => {
   }, [appMode, isTJDarkMode]);
 
   return {
-    onAppModeChange: handleAppModeChange,
+    onAppModeChange: globalSettingsChanged,
     appMode,
     isAppDarkMode,
   };

server/src/controllers/apps.controller.v2.ts

@@ -153,6 +153,7 @@ export class AppsControllerV2 {
       homePageId: versionToLoad.homePageId,
       globalSettings: { ...versionToLoad.globalSettings, theme: appTheme },
       showViewerNavigation: versionToLoad.showViewerNavigation,
+      pageSettings: versionToLoad?.pageSettings,
     };
   }