@finos/legend-application-studio 28.16.5 → 28.16.7

package/src/components/editor/editor-group/mapping-editor/MappingTestableEditor.tsx

@@ -135,6 +135,7 @@ const CreateTestSuiteModal = observer(
     const mappingEditorState = mappingTestableState.mappingEditorState;
     const mapping = mappingEditorState.mapping;
     const editorStore = mappingEditorState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     // Class mapping selector
     const compatibleClasses = getMappingCompatibleClasses(
       mapping,
@@ -192,7 +193,11 @@ const CreateTestSuiteModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true}>
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalHeader>
             <ModalTitle title="Create Mapping Test Suite" />
           </ModalHeader>
@@ -241,7 +246,10 @@ const CreateTestSuiteModal = observer(
                 onChange={changeClassOption}
                 value={selectedClassOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({})}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 placeholder="Choose a class..."
                 isClearable={true}
               />
@@ -260,7 +268,7 @@ const CreateTestSuiteModal = observer(
               onClick={create}
               text="Create"
             />
-            <ModalFooterButton onClick={close} text="Close" />
+            <ModalFooterButton onClick={close} text="Close" type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -276,6 +284,7 @@ const CreateTestModal = observer(
     const testData = suite.tests.filter(filterByType(MappingTest))[0]
       ?.storeTestData[0];
     const editorStore = mappingSuiteState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     // test name
     const [id, setId] = useState<string | undefined>(undefined);
     const isValid = id && !id.includes(' ');
@@ -327,7 +336,11 @@ const CreateTestModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true}>
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+        >
           <ModalHeader>
             <ModalTitle title="Create Mapping Test" />
           </ModalHeader>
@@ -352,7 +365,10 @@ const CreateTestModal = observer(
                   options={mappedClassOptions}
                   onChange={changeClassOption}
                   value={selectedClassOption}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                   placeholder="Choose a class..."
                   isClearable={true}
                 />
@@ -365,7 +381,7 @@ const CreateTestModal = observer(
               onClick={create}
               text="Create"
             />
-            <ModalFooterButton onClick={close} text="Close" />
+            <ModalFooterButton onClick={close} text="Close" type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -383,6 +399,7 @@ const CreateStoreTestDataModal = observer(
     const { mappingTestState } = props;
     const mappingTestableDataState = mappingTestState.dataState;
     const editorStore = mappingTestableDataState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     const mapping = mappingTestableDataState.mappingTestableState.mapping;
     const isReadOnly =
       mappingTestableDataState.mappingTestableState.mappingEditorState
@@ -502,7 +519,12 @@ const CreateStoreTestDataModal = 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"
+        >
           <ModalTitle title="Create Store Test Data" />
           <ModalBody>
             <div className="panel__content__form__section">
@@ -515,7 +537,10 @@ const CreateStoreTestDataModal = observer(
                 onChange={changeStoreOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({})}
                 value={selectedStoreOption}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 placeholder="Choose a store..."
                 isClearable={true}
               />
@@ -535,7 +560,10 @@ const CreateStoreTestDataModal = observer(
                   onChange={onEmbeddedTypeChange}
                   value={embeddedDataTypeOption}
                   isClearable={false}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </div>
             </div>
@@ -551,7 +579,10 @@ const CreateStoreTestDataModal = observer(
                     options={dataElementOptions}
                     onChange={onDataElementChange}
                     value={selectedDataElement}
-                    darkMode={true}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightColorThemeEnabled
+                    }
                   />
                 </div>
               </div>
@@ -563,7 +594,7 @@ const CreateStoreTestDataModal = observer(
               onClick={create}
               text="Create"
             />
-            <ModalFooterButton onClick={close} text="Close" />
+            <ModalFooterButton onClick={close} text="Close" type="secondary" />
           </ModalFooter>
         </Modal>
       </Dialog>

package/src/components/editor/editor-group/mapping-editor/NewMappingElementModal.tsx

@@ -59,6 +59,7 @@ interface ClassMappingSubTypeOption {
 
 export const NewMappingElementModal = observer(() => {
   const editorStore = useEditorStore();
+  const applicationStore = editorStore.applicationStore;
   const mappingEditorState =
     editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
   const spec = mappingEditorState.newMappingElementSpec;
@@ -238,7 +239,10 @@ export const NewMappingElementModal = observer(() => {
               formatOptionLabel={getPackageableElementOptionFormatter({})}
               placeholder="Choose a target"
               isClearable={true}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           )}
           {showId && (
@@ -266,7 +270,10 @@ export const NewMappingElementModal = observer(() => {
                 options={classMappingTypeOptions}
                 onChange={changeClassMappingType}
                 value={classMappingType}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 placeholder="Choose a class mapping type"
               />
             </>

package/src/components/editor/editor-group/mapping-editor/legacy/MappingTestMigrationTool.tsx

@@ -44,6 +44,7 @@ export const MappingTestMigrationTool = observer(
     migrationState: MappingTestMigrationState;
   }) => {
     const { mappingEditorState, migrationState } = props;
+    const applicationStore = mappingEditorState.editorStore.applicationStore;
     const isLoading =
       migrationState.confirmationState?.calculatingDiffs.isInProgress;
     const close = (): void => {
@@ -69,7 +70,9 @@ export const MappingTestMigrationTool = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className={clsx('editor-modal query-builder-text-mode__modal')}
         >
           <ModalHeader title="Migrate Legacy Tests"></ModalHeader>

package/src/components/editor/editor-group/project-configuration-editor/ProjectDependencyEditor.tsx

@@ -595,6 +595,7 @@ const ProjectDependencyReportModal = observer(
     tab: DEPENDENCY_REPORT_TAB;
   }) => {
     const { dependencyEditorState } = props;
+    const applicationStore = dependencyEditorState.editorStore.applicationStore;
     const reportTab = dependencyEditorState.reportTab;
     const tabs = Object.values(DEPENDENCY_REPORT_TAB);
     const changeTab =
@@ -642,7 +643,12 @@ const ProjectDependencyReportModal = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <Modal darkMode={true} className="editor-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal"
+        >
           <ModalHeader title="Dependency Explorer" />
           <ModalBody>
             <div className="panel project-dependency-report">
@@ -731,7 +737,11 @@ const ProjectDependencyReportModal = observer(
             </div>
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton onClick={closeModal} text="Close" />
+            <ModalFooterButton
+              onClick={closeModal}
+              text="Close"
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>
@@ -897,7 +907,9 @@ const ProjectVersionDependencyEditor = observer(
           value={selectedProjectOption}
           isLoading={configState.fetchingProjectVersionsState.isInProgress}
           formatOptionLabel={formatOptionLabel}
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
         <CustomSelectorInput
           className="project-dependency-editor__selector"
@@ -918,7 +930,9 @@ const ProjectVersionDependencyEditor = observer(
               .fetchingProjectVersionsState.isInProgress ||
             fetchSelectedProjectVersionsStatus.isInProgress
           }
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
         />
         <DropdownMenu
           className="project-dependency-editor__visit-project-btn__dropdown-trigger btn--medium"

package/src/components/editor/editor-group/service-editor/BulkServiceRegistrationEditor.tsx

@@ -213,7 +213,10 @@ export const BulkServiceRegistrationEditor = observer(() => {
               options={envOptions}
               onChange={onServerEnvChange}
               value={selectedEnvOption}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           </div>
           <div className="panel__content__form__section">
@@ -228,7 +231,10 @@ export const BulkServiceRegistrationEditor = observer(() => {
               options={serviceTypesOptions}
               onChange={onServiceTypeSelectionChange}
               value={selectedServiceType}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           </div>
           {globalBulkServiceRegistrationState.serviceConfigState
@@ -294,7 +300,10 @@ export const BulkServiceRegistrationEditor = observer(() => {
               }
               onChange={onVersionSelectionChange}
               value={selectedVersion}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
               disabled={
                 globalBulkServiceRegistrationState.serviceConfigState
                   .versionOptions === undefined

package/src/components/editor/editor-group/service-editor/ServiceEditor.tsx

@@ -372,7 +372,10 @@ const ServiceGeneralEditor = observer(() => {
                 options={OWNERSHIP_OPTIONS}
                 onChange={onOwnershipChange}
                 value={serviceState.selectedOwnership}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
               />
             </div>
             {ownership instanceof DeploymentOwnership && (

package/src/components/editor/editor-group/service-editor/ServiceExecutionEditor.tsx

@@ -89,6 +89,7 @@ const PureExecutionContextConfigurationEditor = observer(
     const { executionContextState, pureExecutionState } = props;
     const executionContext = executionContextState.executionContext;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const serviceState =
       editorStore.tabManagerState.getCurrentEditorState(ServiceEditorState);
     const isReadOnly = serviceState.isReadOnly;
@@ -275,7 +276,10 @@ const PureExecutionContextConfigurationEditor = observer(
                 options={mappingOptions}
                 onChange={onMappingSelectionChange}
                 value={selectedMappingOption}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
                 hasError={isMappingEmpty}
               />
               <button
@@ -297,7 +301,10 @@ const PureExecutionContextConfigurationEditor = observer(
                 options={runtimeOptions}
                 onChange={onRuntimeSelectionChange}
                 value={selectedRuntimeOption}
-                darkMode={true}
+                darkMode={
+                  !applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                }
               />
               {!isRuntimePointer && (
                 <button
@@ -341,6 +348,7 @@ export const ChangeExecutionModal = observer(
     isReadOnly: boolean;
   }) => {
     const { executionState, isReadOnly } = props;
+    const applicationStore = executionState.editorStore.applicationStore;
     const closeModal = (): void => executionState.setShowChangeExecModal(false);
     const isChangingToMulti =
       executionState instanceof SingleServicePureExecutionState;
@@ -394,7 +402,10 @@ export const ChangeExecutionModal = observer(
             onChange={_onChange}
             value={currentOption}
             escapeClearsValue={true}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             disable={isReadOnly}
           />
         );

package/src/components/editor/editor-group/service-editor/ServiceExecutionQueryEditor.tsx

@@ -30,6 +30,7 @@ import {
   Modal,
   ModalBody,
   ModalFooter,
+  ModalFooterButton,
   ModalHeader,
 } from '@finos/legend-art';
 import {
@@ -72,6 +73,7 @@ import { ServiceEditorState } from '../../../../stores/editor/editor-state/eleme
 const ServiceExecutionResultViewer = observer(
   (props: { executionState: ServicePureExecutionState }) => {
     const { executionState } = props;
+    const applicationStore = executionState.editorStore.applicationStore;
     // execution
     const executionResultText = executionState.executionResultText;
     const closeExecutionResultViewer = (): void =>
@@ -87,7 +89,12 @@ const ServiceExecutionResultViewer = observer(
           paper: 'editor-modal__content',
         }}
       >
-        <Modal darkMode={true} className="editor-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal"
+        >
           <ModalHeader title="Execution Result" />
           <ModalBody>
             <CodeEditor
@@ -97,12 +104,12 @@ const ServiceExecutionResultViewer = observer(
             />
           </ModalBody>
           <ModalFooter>
-            <button
-              className="btn modal__footer__close-btn btn--dark"
+            <ModalFooterButton
+              className="modal__footer__close-btn"
               onClick={closeExecutionResultViewer}
-            >
-              Close
-            </button>
+              text="Close"
+              type="secondary"
+            />
           </ModalFooter>
         </Modal>
       </Dialog>

package/src/components/editor/editor-group/service-editor/ServiceRegistrationEditor.tsx

@@ -206,7 +206,10 @@ export const ServiceRegistrationEditor = observer(() => {
               options={envOptions}
               onChange={onServerEnvChange}
               value={selectedEnvOption}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           </div>
           <div className="panel__content__form__section">
@@ -221,7 +224,10 @@ export const ServiceRegistrationEditor = observer(() => {
               options={serviceTypesOptions}
               onChange={onServiceTypeSelectionChange}
               value={selectedServiceType}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
             />
           </div>
           {registrationState.serviceExecutionMode ===
@@ -331,7 +337,10 @@ export const ServiceRegistrationEditor = observer(() => {
               options={registrationState.versionOptions ?? []}
               onChange={onVersionSelectionChange}
               value={selectedVersion}
-              darkMode={true}
+              darkMode={
+                !applicationStore.layoutService
+                  .TEMPORARY__isLightColorThemeEnabled
+              }
               disabled={registrationState.versionOptions === undefined}
               placeholder={versionPlaceholder}
               isLoading={

package/src/components/editor/editor-group/service-editor/testable/ServiceTestDataEditor.tsx

@@ -97,6 +97,7 @@ export const RowIdentifierEditor = observer(
     rowIdentifierState: RowIdentifierState;
   }) => {
     const { tableRowIdentifierState, rowIdentifierState } = props;
+    const applicationStore = useApplicationStore();
     const columnOptions = tableRowIdentifierState.table.columns
       .filter(filterByType(Column))
       .map((_c) => ({
@@ -147,7 +148,10 @@ export const RowIdentifierEditor = observer(
 
               value: rowIdentifierState.column,
             }}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
           <BasicValueSpecificationEditor
             valueSpecification={rowIdentifierState.value}
@@ -195,6 +199,7 @@ export const TableRowIdentifierEditor = observer(
     tableRowIdentifierState: TableRowIdentifierState;
   }) => {
     const { connectionTestDataState, tableRowIdentifierState } = props;
+    const applicationStore = useApplicationStore();
     const tables = connectionTestDataState.getAvailableTables();
     const tableOptions = tables.map((_t) => ({
       label: `${_t.schema.name}.${_t.name}`,
@@ -232,7 +237,10 @@ export const TableRowIdentifierEditor = observer(
 
               value: tableRowIdentifierState.table,
             }}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
           />
         </div>
         <div className="panel__content__form__section">
@@ -298,7 +306,9 @@ export const SeedDataInputModal = observer(
         }}
       >
         <Modal
-          darkMode={true}
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
           className="editor-modal lambda-parameter-values__modal"
         >
           <ModalHeader title="Create Seed Data Input (BETA)" />
@@ -322,7 +332,11 @@ export const SeedDataInputModal = observer(
             </button>
           </ModalBody>
           <ModalFooter>
-            <ModalFooterButton onClick={closeModal} text="Close" />
+            <ModalFooterButton
+              onClick={closeModal}
+              text="Close"
+              type="secondary"
+            />
             <ModalFooterButton onClick={generateWithSeedData} text="Generate" />
           </ModalFooter>
         </Modal>
@@ -335,6 +349,7 @@ export const UseDataElementModal = observer(
   (props: { connectionTestDataState: ConnectionTestDataState }) => {
     const { connectionTestDataState } = props;
     const editorStore = connectionTestDataState.editorStore;
+    const applicationStore = editorStore.applicationStore;
     const useSharedModal = connectionTestDataState.useSharedModal;
     const closeModal = (): void =>
       connectionTestDataState.setUseSharedModal(false);
@@ -373,7 +388,12 @@ export const UseDataElementModal = observer(
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
-        <Modal darkMode={true} className="service-test-data-modal">
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="service-test-data-modal"
+        >
           <ModalBody>
             <div className="panel__content__form__section">
               <div className="panel__content__form__section__header__label">
@@ -386,7 +406,10 @@ export const UseDataElementModal = observer(
                   options={dataElementOptions}
                   onChange={onDataElementChange}
                   value={selectedDataElement}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </div>
             </div>
@@ -689,6 +712,7 @@ export const NewConnectionDataModal = observer(
   (props: { testDataState: ServiceTestDataState }) => {
     const { testDataState } = props;
     const editorStore = useEditorStore();
+    const applicationStore = editorStore.applicationStore;
     const dataElementOptions =
       editorStore.graphManagerState.usableDataElements.map(buildElementOption);
     const newConnectionState = testDataState.newConnectionDataState;
@@ -804,7 +828,10 @@ export const NewConnectionDataModal = observer(
                   onChange={onConnectionSelectionChange}
                   value={selectedConnection}
                   isClearable={false}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </div>
             </div>
@@ -822,7 +849,10 @@ export const NewConnectionDataModal = observer(
                   onChange={onEmbeddedTypeChange}
                   value={selectedEmbeddedType}
                   isClearable={false}
-                  darkMode={true}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </div>
             </div>
@@ -838,23 +868,23 @@ export const NewConnectionDataModal = observer(
                     options={dataElementOptions}
                     onChange={onDataElementChange}
                     value={selectedDataElement}
-                    darkMode={true}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightColorThemeEnabled
+                    }
                   />
                 </div>
               </div>
             )}
           </ModalBody>
           <ModalFooter>
-            <button
-              type="button" // prevent this toggler being activated on form submission
-              className="btn btn--dark"
+            <ModalFooterButton
               onClick={closeModal}
-            >
-              Cancel
-            </button>
-            <button className="btn btn--dark" disabled={isDisabled}>
-              Create
-            </button>
+              text="Cancel"
+              type="secondary"
+              preventFormSubmit={true} // prevent this toggler being activated on form submission
+            />
+            <ModalFooterButton text="Create" disabled={isDisabled} />
           </ModalFooter>
         </form>
       </Dialog>

package/src/components/editor/editor-group/service-editor/testable/ServiceTestsEditor.tsx

@@ -88,6 +88,7 @@ import {
 export const NewParameterModal = observer(
   (props: { setupState: ServiceTestSetupState; isReadOnly: boolean }) => {
     const { setupState, isReadOnly } = props;
+    const applicationStore = setupState.editorStore.applicationStore;
     const currentOption = {
       value: setupState.newParameterValueName,
       label: setupState.newParameterValueName,
@@ -122,7 +123,10 @@ export const NewParameterModal = observer(
             onChange={onChange}
             value={currentOption}
             escapeClearsValue={true}
-            darkMode={true}
+            darkMode={
+              !applicationStore.layoutService
+                .TEMPORARY__isLightColorThemeEnabled
+            }
             disable={isReadOnly}
           />
           <div className="search-modal__actions">
@@ -296,6 +300,7 @@ const ServiceTestSetupEditor = observer(
   (props: { serviceTestState: ServiceTestState }) => {
     const { serviceTestState } = props;
     const setupState = serviceTestState.setupState;
+    const applicationStore = setupState.editorStore.applicationStore;
     const test = serviceTestState.test;
     const format = test.serializationFormat;
     const selectedSerializationFormat = setupState.getSelectedFormatOption();
@@ -365,7 +370,10 @@ const ServiceTestSetupEditor = observer(
                       value={selectedSerializationFormat}
                       isClearable={true}
                       escapeClearsValue={true}
-                      darkMode={true}
+                      darkMode={
+                        !applicationStore.layoutService
+                          .TEMPORARY__isLightColorThemeEnabled
+                      }
                       disable={isReadOnly}
                     />
                   </div>
@@ -386,7 +394,10 @@ const ServiceTestSetupEditor = observer(
                         value={selectedKeys}
                         isClearable={true}
                         escapeClearsValue={true}
-                        darkMode={true}
+                        darkMode={
+                          !applicationStore.layoutService
+                            .TEMPORARY__isLightColorThemeEnabled
+                        }
                         isMulti={true}
                         disable={isReadOnly}
                         placeholder="Choose keys..."