From 2fd69c1b11538d28f430b70fab15dc5ec28edb15 Mon Sep 17 00:00:00 2001 From: Shaurya Sharma Date: Tue, 4 Mar 2025 02:51:33 +0530 Subject: [PATCH] Fixes for dark mode --- .../GlobalSettings/ThemeSelect.jsx | 46 ++++++++++++++----- frontend/src/AppBuilder/_hooks/useAppData.js | 14 ++++-- .../src/AppBuilder/_stores/slices/appSlice.js | 6 ++- frontend/src/AppBuilder/_stores/utils.js | 12 +++++ frontend/src/_styles/designtheme.scss | 2 +- 5 files changed, 61 insertions(+), 19 deletions(-) diff --git a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/ThemeSelect.jsx b/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/ThemeSelect.jsx index c0bc2079c3..2f4d009f40 100644 --- a/frontend/src/AppBuilder/LeftSidebar/GlobalSettings/ThemeSelect.jsx +++ b/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 && ( - + )}
{data.label} {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 ( + +
+
+ {children} +
+ + ); + }; + const CustomMenuList = (props) => { return (
- On your workspace + + On your workspace +
{props.children}
{ iconWidth="16" className="tj-text-xsm theme-create-btn" > - Create a new theme + Create a new theme
@@ -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 }} />
); diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js index c074e4a426..b4c2d931e4 100644 --- a/frontend/src/AppBuilder/_hooks/useAppData.js +++ b/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]); diff --git a/frontend/src/AppBuilder/_stores/slices/appSlice.js b/frontend/src/AppBuilder/_stores/slices/appSlice.js index 560dabdec8..20e801cbd1 100644 --- a/frontend/src/AppBuilder/_stores/slices/appSlice.js +++ b/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, diff --git a/frontend/src/AppBuilder/_stores/utils.js b/frontend/src/AppBuilder/_stores/utils.js index bb08c620da..ad21b94667 100644 --- a/frontend/src/AppBuilder/_stores/utils.js +++ b/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' }, + }, + }, + }, +}; diff --git a/frontend/src/_styles/designtheme.scss b/frontend/src/_styles/designtheme.scss index bfdb6cee41..52ce379af0 100644 --- a/frontend/src/_styles/designtheme.scss +++ b/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;