@finos/legend-application-studio 28.16.3 → 28.16.6

package/src/components/editor/command-center/ProjectSearchCommand.tsx

@@ -40,6 +40,7 @@ import {
 
 export const ProjectSearchCommand = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const selectorRef = useRef<SelectComponent>(null);
   const closeModal = (): void => editorStore.setShowSearchElementCommand(false);
   const types = editorStore.getSupportedElementTypes();
@@ -98,7 +99,12 @@ export const ProjectSearchCommand = observer(() => {
       classes={{ container: 'search-modal__container' }}
       PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
     >
-      <Modal darkMode={true} className="search-modal">
+      <Modal
+        darkMode={
+          !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+        }
+        className="search-modal"
+      >
         <div className="project-search-command">
           <DropdownMenu
             className="project-search-command__type"
@@ -144,9 +150,14 @@ export const ProjectSearchCommand = observer(() => {
               elementType ? elementType.toLowerCase() : 'elements'
             } by path`}
             escapeClearsValue={true}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             formatOptionLabel={getPackageableElementOptionFormatter({
-              darkMode: true,
+              darkMode:
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled,
             })}
           />
         </div>

package/src/components/editor/editor-group/GenerationSpecificationEditor.tsx

@@ -89,6 +89,7 @@ const ModelGenerationItem = observer(
     const { nodeState, specState, options } = props;
     const generationTreeNode = nodeState.node;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const modelGenerationRef = generationTreeNode.generationElement;
     const modelGeneration = modelGenerationRef.value;
     const value = { label: modelGeneration.name, value: modelGeneration };
@@ -204,7 +205,9 @@ const ModelGenerationItem = observer(
           options={options}
           onChange={onChange}
           value={value}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
         <button
           className="btn--dark btn--sm"
@@ -350,6 +353,7 @@ const FileGenerationItem = observer(
     const { fileGeneraitonRef, generationSpecificationEditorState, options } =
       props;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const fileGeneration = fileGeneraitonRef.value;
     const value = { label: fileGeneration.name, value: fileGeneration };
     const onChange = (
@@ -376,7 +380,9 @@ const FileGenerationItem = observer(
           options={options}
           onChange={onChange}
           value={value}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
         <button
           className="btn--dark btn--sm"

package/src/components/editor/editor-group/RuntimeEditor.tsx

@@ -596,7 +596,10 @@ const IdentifiedConnectionEditor = observer(
                 options={connectionOptions}
                 onChange={onConnectionSelectionChange}
                 value={selectedConnectionOption}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
               />
               {!isEmbeddedConnection && (
                 <button
@@ -812,6 +815,7 @@ const RuntimeMappingEditor = observer(
   }) => {
     const { runtimeEditorState, mappingRef, isReadOnly } = props;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const runtimeValue = runtimeEditorState.runtimeValue;
     const mappingOptions = editorStore.graphManagerState.graph.ownMappings
       .filter((m) => !runtimeValue.mappings.map((_m) => _m.value).includes(m))
@@ -843,7 +847,9 @@ const RuntimeMappingEditor = observer(
           value={selectedMappingOption}
           placeholder="Choose a class"
           filterOption={filterOption}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
         <button
           className="btn--dark btn__icon--dark"
@@ -1054,6 +1060,7 @@ export const EmbeddedRuntimeEditor = observer(
     onClose: () => void;
   }) => {
     const { runtimeEditorState, onClose, isReadOnly } = props;
+    const applicationStore = useApplicationStore();
     const closeEditor = (): void => onClose();
     if (!runtimeEditorState) {
       return null;
@@ -1068,7 +1075,12 @@ export const EmbeddedRuntimeEditor = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <Modal darkMode={true} className="editor-modal embedded-runtime-editor">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal embedded-runtime-editor"
+        >
           <ModalHeader>
             <ModalTitle icon={<CogIcon />} title="custom runtime" />
             <ModalHeaderActions>

package/src/components/editor/editor-group/connection-editor/ConnectionEditor.tsx

@@ -39,7 +39,10 @@ import {
   modelConnection_setClass,
   modelConnection_setUrl,
 } from '../../../../stores/graph-modifier/DSL_Mapping_GraphModifierHelper.js';
-import { useApplicationNavigationContext } from '@finos/legend-application';
+import {
+  useApplicationNavigationContext,
+  useApplicationStore,
+} from '@finos/legend-application';
 import {
   buildElementOption,
   getPackageableElementOptionFormatter,
@@ -55,6 +58,7 @@ const ModelConnectionEditor = observer(
   }) => {
     const { connectionValueState, isReadOnly, disableChangingClass } = props;
     const connection = connectionValueState.connection;
+    const applicationStore = useApplicationStore();
     const editorStore = useEditorStore();
     // classOptions
     const classOptions =
@@ -89,9 +93,14 @@ const ModelConnectionEditor = observer(
             options={classOptions}
             onChange={onSourceClassChange}
             value={{ label: sourceClass.name, value: sourceClass }}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             formatOptionLabel={getPackageableElementOptionFormatter({
-              darkMode: true,
+              darkMode:
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled,
             })}
           />
         </div>

package/src/components/editor/editor-group/connection-editor/DatabaseBuilderWizard.tsx

@@ -76,6 +76,9 @@ const QueryResultCellRenderer = observer(
 const QueryBuilderGridResult = observer(
   (props: { executionResult: TDSExecutionResult }) => {
     const { executionResult } = props;
+    const applicationStore = useApplicationStore();
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
 
     const rowData = executionResult.result.rows.map((_row, rowIdx) => {
       const row: PlainObject = {};
@@ -90,9 +93,10 @@ const QueryBuilderGridResult = observer(
     return (
       <div className="query-builder__result__values__table">
         <div
-          className={clsx(
-            'ag-theme-balham-dark query-builder__result__tds-grid',
-          )}
+          className={clsx('query-builder__result__tds-grid', {
+            'ag-theme-balham': !darkMode,
+            'ag-theme-balham-dark': darkMode,
+          })}
         >
           <DataGrid
             rowData={rowData}
@@ -305,7 +309,12 @@ export const DatabaseBuilderWizard = observer(
           },
         }}
       >
-        <Modal darkMode={true} className="database-builder">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="database-builder"
+        >
           <ModalHeader>
             <ModalTitle title="Database Builder" />
             <ModalHeaderActions>

package/src/components/editor/editor-group/connection-editor/DatabaseModelBuilder.tsx

@@ -194,7 +194,12 @@ export const DatabaseModelBuilder = observer(
           },
         }}
       >
-        <Modal darkMode={true} className="database-builder">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="database-builder"
+        >
           <ModalHeader>
             <ModalTitle title="Database Model Builder" />
             <ModalHeaderActions>

package/src/components/editor/editor-group/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -168,6 +168,7 @@ import { MapperPostProcessorEditor } from './post-processor-editor/MapperPostPro
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 import type { MapperPostProcessorEditorState } from '../../../../stores/editor/editor-state/element-editor-state/connection/PostProcessorEditorState.js';
 import { prettyCONSTName, uniq } from '@finos/legend-shared';
+import { useApplicationStore } from '@finos/legend-application';
 
 export type RelationalDatabaseConnectionOption = {
   label: React.ReactNode;
@@ -201,6 +202,7 @@ const LocalH2DatasourceSpecificationEditor = observer(
     sourceSpec: LocalH2DatasourceSpecification;
     isReadOnly: boolean;
   }) => {
+    const applicationStore = useApplicationStore();
     const { sourceSpec, isReadOnly } = props;
     const [showPopUp, setShowPopUp] = useState(false);
     const openInPopUp = (): void => setShowPopUp(true);
@@ -213,7 +215,13 @@ const LocalH2DatasourceSpecificationEditor = observer(
         {showPopUp && (
           <div>
             <Dialog open={showPopUp} onClose={closePopUp}>
-              <Modal darkMode={true} className="editor-modal">
+              <Modal
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
+                className="editor-modal"
+              >
                 <ModalHeader title="test data setup SQL" />
                 <ModalBody className="modal__body__large">
                   <CodeEditor
@@ -229,7 +237,11 @@ const LocalH2DatasourceSpecificationEditor = observer(
                   />
                 </ModalBody>
                 <ModalFooter>
-                  <ModalFooterButton onClick={closePopUp} text="Close" />
+                  <ModalFooterButton
+                    onClick={closePopUp}
+                    text="Close"
+                    type="secondary"
+                  />
                 </ModalFooter>
               </Modal>
             </Dialog>
@@ -1105,6 +1117,7 @@ const RelationalConnectionStoreEditor = observer(
     isReadOnly: boolean;
   }) => {
     const { connectionValueState, isReadOnly } = props;
+    const applicationStore = connectionValueState.editorStore.applicationStore;
     const connection = connectionValueState.connection;
     // store
     const isStoreEmpty = connectionValueState.storeValidationResult;
@@ -1155,7 +1168,10 @@ const RelationalConnectionStoreEditor = observer(
               options={options}
               onChange={onStoreChange}
               value={selectedStore}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
               disabled={isReadOnly}
               hasError={isStoreEmpty}
             />
@@ -1605,6 +1621,7 @@ export const RelationalConnectionGeneralEditor = observer(
     const { connectionValueState, isReadOnly, hideHeader } = props;
     const connection = connectionValueState.connection;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const plugins = editorStore.pluginManager.getApplicationPlugins();
     const databseTypeConfigs =
       connectionValueState.editorStore.graphState
@@ -1708,7 +1725,10 @@ export const RelationalConnectionGeneralEditor = observer(
                   options={dbTypes}
                   onChange={onTypeChange}
                   value={selectedDbType}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </PanelFormSection>
             </PanelContent>
@@ -1732,7 +1752,10 @@ export const RelationalConnectionGeneralEditor = observer(
                     options={dbTypes}
                     onChange={onTypeChange}
                     value={selectedDbType}
-                    darkMode={true}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightColorThemeEnabled
+                    }
                   />
                 </PanelFormSection>
                 <PanelFormBooleanField
@@ -1770,7 +1793,10 @@ export const RelationalConnectionGeneralEditor = observer(
                           value={selectedSourceSpec(
                             connection.datasourceSpecification,
                           )}
-                          darkMode={true}
+                          darkMode={
+                            !applicationStore.layoutService
+                              .TEMPORARY__isLightColorThemeEnabled
+                          }
                         />
                       </PanelFormSection>
                       <PanelDivider />
@@ -1804,7 +1830,10 @@ export const RelationalConnectionGeneralEditor = observer(
                           value={selectedAuth(
                             connection.authenticationStrategy,
                           )}
-                          darkMode={true}
+                          darkMode={
+                            !applicationStore.layoutService
+                              .TEMPORARY__isLightColorThemeEnabled
+                          }
                         />
                       </PanelFormSection>
                       <PanelDivider />

package/src/components/editor/editor-group/data-editor/EmbeddedDataEditor.tsx

@@ -174,6 +174,7 @@ export const DataElementReferenceDataEditor = observer(
     const dataElement =
       dataElementReferenceState.embeddedData.dataElement.value;
     const editorStore = dataElementReferenceState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     const options =
       editorStore.graphManagerState.usableDataElements.map(buildElementOption);
     const selectedOption = buildElementOption(dataElement);
@@ -215,7 +216,10 @@ export const DataElementReferenceDataEditor = observer(
               options={options}
               onChange={onDataElementChange}
               value={selectedOption}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
             <button
               className="btn--dark btn--sm data-element-reference-editor__value-btn"
@@ -255,6 +259,7 @@ export const ModelEmbeddedDataEditor = observer(
         option.value.path,
     });
     const editorStore = modelStoreDataState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     const _class = modelData.model.value;
     const classOptions = editorStore.graphManagerState.usableClasses.map(
       (_cl) => ({
@@ -293,10 +298,15 @@ export const ModelEmbeddedDataEditor = observer(
               options={classOptions}
               onChange={changeClass}
               value={selectedClassOption}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
               filterOption={elementFilterOption}
               formatOptionLabel={getPackageableElementOptionFormatter({
-                darkMode: true,
+                darkMode:
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled,
               })}
             />
           </div>

package/src/components/editor/editor-group/data-editor/RelationalCSVDataEditor.tsx

@@ -64,6 +64,7 @@ export interface TableOption {
 const RelationalTableIdentifierEditor = observer(
   (props: { dataState: RelationalCSVDataState; isReadOnly: boolean }) => {
     const { isReadOnly, dataState } = props;
+    const applicationStore = dataState.editorStore.applicationStore;
     const resolvedDb = dataState.database;
     const existingDataTable = dataState.tableToEdit;
 
@@ -168,7 +169,10 @@ const RelationalTableIdentifierEditor = observer(
                       onChange={onTableChange}
                       value={selectedTable}
                       isClearable={false}
-                      darkMode={true}
+                      darkMode={
+                        !applicationStore.layoutService
+                          .TEMPORARY__isLightColorThemeEnabled
+                      }
                     />
                   </div>
                 </div>
@@ -240,6 +244,7 @@ const RelationalCSVTableContextMenu = observer(
 const ImportModal = observer(
   (props: { dataState: RelationalCSVDataState; isReadOnly: boolean }) => {
     const { isReadOnly, dataState } = props;
+    const applicationStore = dataState.editorStore.applicationStore;
     const [csv, setCSV] = useState('');
     const closeModal = (): void => dataState.closeCSVModal();
     const importVal = (): void => {
@@ -259,7 +264,12 @@ const ImportModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true} className="relational-data-editor__import">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="relational-data-editor__import"
+        >
           <ModalHeader title="Import CSV" />
           <ModalBody>
             <textarea

package/src/components/editor/editor-group/diff-editor/EntityChangeConflictEditor.tsx

@@ -743,7 +743,10 @@ export const EntityChangeConflictEditor = observer(
                 currentMode,
                 conflictEditorState.getModeComparisonViewInfo(currentMode),
               )}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           </div>
         </div>

package/src/components/editor/editor-group/element-generation-editor/FileGenerationEditor.tsx

@@ -420,6 +420,7 @@ const GenerationEnumPropertyEditor = observer(
     getConfigValue: (name: string) => unknown;
   }) => {
     const { property, getConfigValue, isReadOnly, update } = props;
+    const applicationStore = useApplicationStore();
     const getEnumLabel = (_enum: string): string =>
       isValidFullPath(_enum)
         ? resolvePackagePathAndElementName(_enum)[1]
@@ -451,7 +452,9 @@ const GenerationEnumPropertyEditor = observer(
           value={{ label: getEnumLabel(value), value }}
           isClearable={true}
           escapeClearsValue={true}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           disable={isReadOnly}
         />
       </div>

package/src/components/editor/editor-group/end-to-end-flow-editor/ConnectionToQueryWorkflowEditor.tsx

@@ -134,7 +134,9 @@ export const QueryConnectionDatabaseBuilderEditor = observer(
           </button>
         </div>
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="query-connection-database-builder-editor__modal"
         >
           <div className="query-connection-database-builder-editor__modal__content">
@@ -274,7 +276,9 @@ export const QueryConnectionModelsEditor = observer(
           <PanelHeader title="Model Builder" />
         </div>
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="query-connection-connection-model-editor__modal"
         >
           <div className="query-connection-connection-model-editor__modal">

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_BindingElementEditor.tsx

@@ -186,6 +186,7 @@ const BindingGeneralEditor = observer(
   (props: { editorState: BindingEditorState; isReadOnly: boolean }) => {
     const { editorState, isReadOnly } = props;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const binding = editorState.binding;
     const schemaSets = Array.from(
       editorStore.graphManagerState.graph.allOwnElements,
@@ -246,7 +247,10 @@ const BindingGeneralEditor = observer(
             onChange={onContentTypeChange}
             value={selectedContentType}
             placeholder="Choose a content type"
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
         </div>
         <div className="binding-general-editor__section__header__label">
@@ -262,7 +266,10 @@ const BindingGeneralEditor = observer(
             value={selectedSchemaSet}
             isClearable={true}
             placeholder="Choose a schema set"
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
         </div>
         <div className="binding-general-editor__section__header__label">
@@ -278,7 +285,10 @@ const BindingGeneralEditor = observer(
             value={selectedSchemaId}
             isClearable={true}
             placeholder="Choose a schema ID"
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
         </div>
       </div>

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_SchemaSetElementEditor.tsx

@@ -36,6 +36,7 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
+  ModalFooterButton,
 } from '@finos/legend-art';
 import { ExternalFormatSchema as Schema } from '@finos/legend-graph';
 import { flowResult } from 'mobx';
@@ -67,6 +68,7 @@ const SchemaLoader = observer(
     schemaSetEditorState: InnerSchemaSetEditorState | SchemaSetEditorState;
   }) => {
     const { schemaSetEditorState } = props;
+    const applicationStore = schemaSetEditorState.editorStore.applicationStore;
     const importState = schemaSetEditorState.importSchemaContentState;
     const onClose = (): void => importState.closeModal();
     const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -88,7 +90,12 @@ const SchemaLoader = observer(
           appear: false, // disable transition
         }}
       >
-        <Modal darkMode={true} className="modal--scrollable patch-loader">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="modal--scrollable patch-loader"
+        >
           <ModalHeader title="Schema Content Loader" />
           <ModalBody>
             <PanelLoadingIndicator
@@ -135,13 +142,12 @@ const SchemaLoader = observer(
             )}
           </ModalBody>
           <ModalFooter>
-            <button
-              className="btn btn--dark blocking-alert__action--standard"
+            <ModalFooterButton
+              className="blocking-alert__action--standard"
+              text="Import Schemas"
               onClick={importSchemas}
               disabled={!importState.files?.length}
-            >
-              Import Schemas
-            </button>
+            />
           </ModalFooter>
         </Modal>
       </Dialog>

package/src/components/editor/editor-group/function-activator/FunctionEditor.tsx

@@ -372,7 +372,10 @@ const ParameterBasicEditor = observer(
               value={selectedType}
               placeholder="Choose a type..."
               filterOption={filterOption}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           )}
           {!isReadOnly && !isEditingType && (
@@ -567,7 +570,10 @@ const ReturnTypeEditor = observer(
             value={selectedType}
             placeholder="Choose a type..."
             filterOption={filterOption}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
         )}
         {!isReadOnly && !isEditingType && (
@@ -814,7 +820,12 @@ const FunctionPromoteEditor = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true} className="function-promote-editor">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="function-promote-editor"
+        >
           <ModalBody className="function-promote-editor__content">
             <div className="function-promote-editor__content__prompt">
               Select any one of the following activator types to continue
@@ -841,11 +852,12 @@ const FunctionPromoteEditor = observer(
               className="function-promote-editor__action-btn"
               onClick={closeModal}
               title="Close"
+              type="secondary"
             >
               Cancel
             </ModalFooterButton>
             <ModalFooterButton
-              className=" function-promote-editor__action-btn function-promote-editor__action-btn--primitive"
+              className="function-promote-editor__action-btn function-promote-editor__action-btn--primitive"
               disabled={
                 !activatorPromoteState.activateType ||
                 !validateFunctionActivator(activatorPromoteState.activateType)

package/src/components/editor/editor-group/function-activator/HostedServiceFunctionActivatorEditor.tsx

@@ -444,7 +444,10 @@ export const HostedServiceFunctionActivatorEditor = observer(() => {
                     options={OWNERSHIP_OPTIONS}
                     onChange={onOwnershipChange}
                     value={editorState.selectedOwnership}
-                    darkMode={true}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightColorThemeEnabled
+                    }
                   />
                 </div>
                 {ownership instanceof DeploymentOwner && (

package/src/components/editor/editor-group/function-activator/SnowflakeAppFunctionActivatorEditor.tsx

@@ -223,7 +223,10 @@ export const SnowflakeAppFunctionActivatorEditor = observer(() => {
                         )
                       : undefined
                   }
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                   placeholder="Choose a connection"
                   filterOption={connectionFilterOption}
                 />