Fixes for dark mode

frontend/src/AppBuilder/LeftSidebar/GlobalSettings/ThemeSelect.jsx

@@ -27,7 +27,7 @@ const ThemeSelect = ({ darkMode }) => {
       value: theme.id,
       name: theme.name,
       label: theme.name,
-      color: theme?.definition?.brand?.colors?.primary?.[darkMode ? 'dark' : 'light'],
+      color: theme?.definition?.brand?.colors?.primary,
       isDefault: theme?.isDefault,
       theme: theme,
     }));
@@ -57,11 +57,17 @@ const ThemeSelect = ({ darkMode }) => {
       width: '150px',
       height: 'auto',
       padding: '0px',
+      color: darkMode ? '#fff' : '#000',
+    }),
+    singleValue: (provided) => ({
+      ...provided,
+      color: darkMode ? '#fff' : '#000', // Set selected value color based on darkMode
     }),
     valueContainer: (provided, _state) => ({
       ...provided,
       fontSize: '12px',
       height: '100%',
+      color: darkMode ? '#fff' : '#000',
     }),
     menu: (provided) => ({
       ...provided,
@@ -110,16 +116,14 @@ const ThemeSelect = ({ darkMode }) => {
           }}
         >
           {isSelected && (
-            <CheckMark
-              width="20px"
-              fill="transparent"
-              fillIcon={'var(--primary-brand)'}
-              className="datepicker-select-check"
-            />
+            <CheckMark width="20px" fill="transparent" fillIcon={'#3e63dd'} className="datepicker-select-check" />
           )}
           <div
             className="color-icon"
-            style={{ backgroundColor: data?.color, marginLeft: isSelected ? '0px' : '22px' }}
+            style={{
+              backgroundColor: data?.color?.[darkMode ? 'dark' : 'light'],
+              marginLeft: isSelected ? '0px' : '22px',
+            }}
           />
           <span style={{ fontSize: '12px', marginLeft: '2px', color: darkMode ? '#fff' : '#000' }}>{data.label}</span>
           {data?.isDefault && (
@@ -130,6 +134,7 @@ const ThemeSelect = ({ darkMode }) => {
                 display: 'inline-flex', // Enables flexbox on the span
                 alignItems: 'center', // Vertically centers the text
                 justifyContent: 'center',
+                color: darkMode ? '#fff' : '#000',
               }}
               className="theme-default-pill"
             >
@@ -141,11 +146,30 @@ const ThemeSelect = ({ darkMode }) => {
     );
   };
 
+  const CustomValueContainer = ({ children, ...props }) => {
+    return (
+      <components.ValueContainer {...props}>
+        <div className="d-flex align-items-center">
+          <div
+            className="color-icon"
+            style={{
+              backgroundColor: selectedTheme?.definition?.brand?.colors?.primary?.[darkMode ? 'dark' : 'light'],
+              marginRight: '5px',
+            }}
+          />
+          {children}
+        </div>
+      </components.ValueContainer>
+    );
+  };
+
   const CustomMenuList = (props) => {
     return (
       <components.MenuList {...props}>
         <div style={{ marginTop: '14px', marginBottom: '8px' }}>
-          <span className="theme-custom-menu-list-header">On your workspace</span>
+          <span className="theme-custom-menu-list-header" style={{ color: darkMode ? '#fff' : '#000' }}>
+            On your workspace
+          </span>
         </div>
         {props.children}
         <div
@@ -167,7 +191,7 @@ const ThemeSelect = ({ darkMode }) => {
             iconWidth="16"
             className="tj-text-xsm theme-create-btn"
           >
-            Create a new theme
+            <span style={{ color: darkMode ? '#fff' : '#000' }}>Create a new theme</span>
           </ButtonSolid>
         </div>
       </components.MenuList>
@@ -191,7 +215,7 @@ const ThemeSelect = ({ darkMode }) => {
         useMenuPortal={true}
         styles={customSelectStyles}
         useCustomStyles={true}
-        components={{ Option: CustomOption, MenuList: CustomMenuList }}
+        components={{ Option: CustomOption, MenuList: CustomMenuList, ValueContainer: CustomValueContainer }}
       />
     </div>
   );

frontend/src/AppBuilder/_hooks/useAppData.js

@@ -24,7 +24,7 @@ import { fetchAndSetWindowTitle, pageTitles, defaultWhiteLabellingSettings } fro
 import { initEditorWalkThrough } from '@/AppBuilder/_helpers/createWalkThrough';
 import queryString from 'query-string';
 import { distinctUntilChanged } from 'rxjs';
-import { convertAllKeysToSnakeCase } from '../_stores/utils';
+import { baseTheme, convertAllKeysToSnakeCase } from '../_stores/utils';
 import { getPreviewQueryParams } from '@/_helpers/routes';
 import { useLocation, useMatch, useParams } from 'react-router-dom';
 import useThemeAccess from './useThemeAccess';
@@ -300,10 +300,14 @@ const useAppData = (appId, moduleId, darkMode, mode = 'edit', { environmentId, v
         creationMode: appData.creation_mode,
       });
       setIsEditorFreezed(appData.should_freeze_editor);
-      setGlobalSettings(
-        mapKeys(appData.editing_version?.global_settings || appData.global_settings, (value, key) => camelCase(key))
+      const global_settings = mapKeys(
+        appData.editing_version?.global_settings || appData.global_settings,
+        (value, key) => camelCase(key)
       );
-
+      if (!global_settings?.theme) {
+        global_settings.theme = baseTheme;
+      }
+      setGlobalSettings(global_settings);
       setPages(pages, moduleId);
       setPageSettings(
         computePageSettings(deepCamelCase(appData?.editing_version?.page_settings ?? appData?.page_settings))
@@ -437,7 +441,7 @@ const useAppData = (appId, moduleId, darkMode, mode = 'edit', { environmentId, v
     const brandColors = selectedTheme?.definition?.brand?.colors || {};
     Object.keys(brandColors).forEach((colorType) => {
       const color = brandColors[colorType][darkMode ? 'dark' : 'light'];
-      root.style.setProperty(`--${colorType}-brand`, color);
+      root.style.setProperty(`--${colorType}-brand`, `${color}`);
     });
   }, [darkMode, selectedTheme, themeAccess]);
 

frontend/src/AppBuilder/_stores/slices/appSlice.js

@@ -6,13 +6,15 @@ import DependencyGraph from './DependencyClass';
 import { getWorkspaceId } from '@/_helpers/utils';
 import { navigate } from '@/AppBuilder/_utils/misc';
 import queryString from 'query-string';
-import { replaceEntityReferencesWithIds } from '../utils';
+import { replaceEntityReferencesWithIds, baseTheme } from '../utils';
 
 const initialState = {
   app: {},
   canvasHeight: null,
   isSaving: false,
-  globalSettings: {},
+  globalSettings: {
+    theme: baseTheme,
+  },
   pageSwitchInProgress: false,
   isTJDarkMode: localStorage.getItem('darkMode') === 'true',
   isViewer: false,

frontend/src/AppBuilder/_stores/utils.js

@@ -708,3 +708,15 @@ export const parsePropertyPath = (property) => {
 
   return result;
 };
+
+export const baseTheme = {
+  definition: {
+    brand: {
+      colors: {
+        primary: { light: '#4368E3', dark: '#4A6DD9' },
+        secondary: { light: '#6A727C', dark: '#CFD3D8' },
+        tertiary: { light: '#1E823B', dark: '#318344' },
+      },
+    },
+  },
+};

frontend/src/_styles/designtheme.scss

@@ -164,7 +164,7 @@
 
 
     // new design theme
-    --primary-brand: #4A6DD9;
+    
     --primary-accent-strong: #4A6DD9;
     --primary-accent-subtle: rgba(74, 109, 217, 30%);
     --primary-white: #FAFCFF;