Merge branch 'main' into darkmode_new

frontend/src/lib/components/InputTransformForm.svelte

@@ -342,7 +342,7 @@
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			class="relative {$propPickerConfig?.propName == argName
-				? 'outline outline-offset-1 outline-1 outline-blue-500 rounded-md'
+				? 'outline outline-offset-1 outline-1 outline-blue-400/50 rounded-md'
 				: ''}"
 			on:keyup={stepInputGen?.onKeyUp}
 		>

frontend/src/lib/components/ScriptEditor.svelte

@@ -277,7 +277,7 @@
 <SplitPanesWrapper>
 	<Splitpanes class="!overflow-visible">
 		<Pane size={60} minSize={10} class="!overflow-visible">
-			<div class="pl-2 h-full !overflow-visible bg-gray-50 dark:bg-[#2F343F]">
+			<div class="pl-2 h-full !overflow-visible bg-gray-50 dark:bg-[#2A3648]">
 				{#key lang}
 					<Editor
 						folding

frontend/src/lib/components/apps/components/display/PlotlyHtmlV2.svelte

@@ -101,7 +101,7 @@
 					height: h,
 					margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 },
 					paper_bgcolor: $darkMode ? '#2e3440' : '#fff',
-					plot_bgcolor: $darkMode ? '#2e3440' : '#fff',
+					plot_bgcolor: $darkMode ? '#344358' : '#fff',
 					...resolvedConfig.layout,
 					xaxis: {
 						color: $darkMode ? '#f3f6f8' : '#000',

frontend/src/lib/components/apps/editor/ComponentHeader.svelte

@@ -62,7 +62,7 @@
 		class={twMerge(
 			'px-2 text-2xs font-semibold w-fit absolute shadow -top-[9px] -left-[8px] border rounded-sm z-50 cursor-move',
 			selected
-				? 'bg-indigo-500/90 border-indigo-600 text-white'
+				? 'bg-indigo-500/90 border-indigo-600 text-white dark:bg-indigo-500/90'
 				: $connectingInput.opened
 				? 'bg-red-500/90 border-red-600 text-white'
 				: 'bg-blue-500/90 border-blue-600 text-white'

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -163,7 +163,7 @@
 					? 'outline outline-orange-600'
 					: 'outline outline-blue-600'
 				: '',
-			selected && $mode !== 'preview' ? 'outline outline-indigo-600' : '',
+			selected && $mode !== 'preview' ? 'outline outline-indigo-600 dark:outline-indigo-400/80' : '',
 			$mode != 'preview' ? 'cursor-pointer' : '',
 			'relative z-auto',
 			$app.css?.['app']?.['component']?.class,

frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -38,8 +38,8 @@
 	}
 
 	const openBackground = {
-		blue: 'bg-blue-50 dark:bg-frost-800',
-		indigo: 'bg-indigo-50 dark:bg-indigo-800'
+		blue: 'bg-blue-50 dark:bg-frost-500/90',
+		indigo: 'bg-indigo-50 dark:bg-indigo-400/40'
 	}
 
 	const manuallyOpenColor = {
@@ -48,8 +48,8 @@
 	}
 
 	const idClass = {
-		blue: 'bg-blue-500 text-white',
-		indigo: 'bg-indigo-500 text-white'
+		blue: 'bg-blue-500 text-white dark:bg-blue-400/80',
+		indigo: 'bg-indigo-500 text-white dark:bg-indigo-500/60'
 	}
 
 	function renameId(newId: string): void {

frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphHeader.svelte

@@ -23,7 +23,7 @@
 <div class="relative h-full">
 	<div
 		class={twMerge(
-			'w-full h-full border border-gray-400',
+			'w-full h-full border border-gray-200',
 			'flex flex-row gap-2 items-center justify-between rounded-sm overflow-hidden'
 		)}
 		style="min-width: 275px; max-height: 80px; background-color: {document.documentElement.classList.contains(

frontend/src/lib/components/common/alert/Alert.svelte

@@ -40,28 +40,28 @@
 
 	const classes: Record<AlertType, Record<string, string>> = {
 		info: {
-			bgClass: 'bg-blue-50 border-blue-200 border dark:bg-blue-900/50 dark:border-blue-900',
-			iconClass: 'text-blue-500 dark:text-blue-400',
-			titleClass: 'text-blue-800 dark:text-blue-100',
-			descriptionClass: 'text-blue-700 dark:text-blue-200'
+			bgClass: 'bg-blue-50 border-blue-200 border dark:bg-blue-900/40 dark:border-blue-700/40',
+			iconClass: 'text-blue-500 dark:text-blue-300/90',
+			titleClass: 'text-blue-800 dark:text-blue-100/90',
+			descriptionClass: 'text-blue-700 dark:text-blue-100/90'
 		},
 		warning: {
-			bgClass: 'bg-yellow-50 border-yellow-200 border dark:bg-yellow-900/50 dark:border-yellow-900',
-			iconClass: 'text-yellow-500 dark:text-yellow-400',
-			titleClass: 'text-yellow-800 dark:text-yellow-100',
-			descriptionClass: 'text-yellow-700 dark:text-yellow-200'
+			bgClass: 'bg-yellow-50 border-yellow-200 border dark:bg-yellow-900/40 dark:border-yellow-700/40',
+			iconClass: 'text-yellow-500 dark:text-yellow-300/90',
+			titleClass: 'text-yellow-800 dark:text-yellow-100/90',
+			descriptionClass: 'text-yellow-700 dark:text-yellow-100/90'
 		},
 		error: {
-			bgClass: 'bg-red-50 border-red-200 border dark:bg-red-900/50 dark:border-red-900',
-			iconClass: 'text-red-500 dark:text-red-400',
-			titleClass: 'text-red-800 dark:text-red-100',
-			descriptionClass: 'text-red-700 dark:text-red-200'
+			bgClass: 'bg-red-50 border-red-200 border dark:bg-red-900/40 dark:border-red-700/40',
+			iconClass: 'text-red-500 dark:text-red-300/90',
+			titleClass: 'text-red-800 dark:text-red-100/90',
+			descriptionClass: 'text-red-700 dark:text-red-100/90'
 		},
 		success: {
-			bgClass: 'bg-green-50 border-green-200 border dark:bg-green-900/50 dark:border-green-900',
-			iconClass: 'text-green-500 dark:text-green-400',
-			titleClass: 'text-green-800 dark:text-green-100',
-			descriptionClass: 'text-green-700 dark:text-green-200'
+			bgClass: 'bg-green-50 border-green-200 border dark:bg-green-900/40 dark:border-green-700/40',
+			iconClass: 'text-green-500 dark:text-green-300/90',
+			titleClass: 'text-green-800 dark:text-green-100/90',
+			descriptionClass: 'text-green-700 dark:text-green-100/90'
 		}
 	}
 
@@ -91,7 +91,7 @@
 				size={16}
 			/>
 		</div>
-		<div class={twMerge('ml-2 w-full')}>
+		<div class={twMerge('ml-1 w-full')}>
 			<div class={twMerge('w-full flex flex-row items-center justify-between h-8')}>
 				<span
 					class={twMerge(
@@ -132,7 +132,7 @@
 					</div>
 				</div>
 			{:else if $$slots.default && !collapsible}
-				<div class="mt-2">
+				<div class="mb-2">
 					<div
 						class={twMerge(
 							size === 'sm' ? 'text-sm' : 'text-xs',

frontend/src/lib/components/common/button/Button.svelte

@@ -69,31 +69,31 @@
 			border:
 				'border-frost-500 dark:border-frost-300 hover:border-frost-700 dark:hover:border-frost-400 focus-visible:border-frost-700 bg-surface hover:bg-frost-100 dark:hover:bg-frost-900 focus-visible:bg-frost-100 focus-visible:dark:text-frost-100 dark:focus-visible:bg-frost-900 text-frost-500 dark:text-frost-300 dark:hover:text-frost-400 hover:text-frost-700 focus-visible:text-frost-700 focus-visible:ring-frost-300',
 			contained:
-				'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300',
+				'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300 dark:bg-frost-500/90 dark:hover:bg-frost-600/90',
 			divider: 'divide-x divide-frost-600'
 		},
 		red: {
 			border:
-				'border-red-600/60 hover:border-red-600 bg-surface hover:bg-red-100 text-red-600 hover:text-red-700 focus-visible:ring-red-300 ',
-			contained: 'bg-red-600 hover:bg-red-600 text-white focus-visible:ring-red-300',
+				'border-red-600/60 hover:border-red-600 bg-surface hover:bg-red-100 text-red-600 hover:text-red-700 focus-visible:ring-red-300 dark:border-red-400/70 dark:hover:bg-red-400/70 dark:hover:border-red-300 dark:hover:text-red-100 dark:text-red-400/90',
+			contained: 'bg-red-600 hover:bg-red-600 text-white focus-visible:ring-red-300 dark:bg-red-500/70 dark:text-white',
 			divider: 'divide-x divide-red-700'
 		},
 		green: {
 			border:
 				'border-green-600 hover:border-green-700 bg-surface hover:bg-green-100 text-green-600 hover:text-green-700 focus-visible:ring-green-300',
-			contained: 'bg-green-600 hover:bg-green-700 text-white focus-visible:ring-green-300',
+			contained: 'bg-green-600 hover:bg-green-700 text-white focus-visible:ring-green-300 dark:bg-green-700/90',
 			divider: 'divide-x divide-green-700'
 		},
 		dark: {
 			border:
 				'border-surface-inverse bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse',
 			contained:
-				'bg-surface-inverse hover:bg-surface-inverse-hover focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse',
+				'bg-blue-900/90 hover:bg-blue-950 focus-visible:bg-surface-hover-inverse text-white/90 focus-visible:ring-surface-selected-inverse dark:bg-blue-500/70 dark:hover:bg-blue-700/60 dark:text-primary',
 			divider: 'divide-x divide-gray-800 dark:divide-gray-200'
 		},
 		gray: {
 			border:
-				'border-gray-500 dark:border-gray-300 hover:border-gray-700 dark:hover:border-gray-400 focus-visible:border-gray-700 bg-surface hover:bg-gray-100 dark:hover:bg-gray-900 focus-visible:bg-gray-100 focus-visible:dark:text-gray-100 dark:focus-visible:bg-gray-900 text-gray-500 dark:text-gray-300 dark:hover:text-gray-400 hover:text-gray-700 focus-visible:text-gray-700 focus-visible:ring-gray-300',
+				'border-gray-500 dark:border-gray-300 hover:border-gray-700 dark:hover:border-gray-400 focus-visible:border-gray-700 bg-surface hover:bg-gray-100 dark:hover:bg-gray-900 focus-visible:bg-gray-100 focus-visible:dark:text-gray-100/90 dark:focus-visible:bg-gray-900 text-gray-500 dark:text-gray-300/90 dark:hover:text-gray-400/90 hover:text-gray-700 focus-visible:text-gray-700 focus-visible:ring-gray-300',
 			contained:
 				'bg-gray-500 hover:bg-gray-700 focus-visible:bg-gray-700 text-white focus-visible:ring-gray-300',
 			divider: 'divide-x divide-gray-600'

frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte

@@ -62,7 +62,7 @@
 						<div
 							class="flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-800/50"
 						>
-							<AlertTriangle class="text-red-500 dark:text-red-400" />
+							<AlertTriangle class="text-red-500 dark:text-red-400/90" />
 						</div>
 						<div class="ml-4 text-left flex-1">
 							<h3 class="text-lg font-medium text-primary">

frontend/src/lib/components/copilot/CodeCompletionStatus.svelte

@@ -33,8 +33,8 @@
 				: {
 						icon: $codeCompletionSessionEnabled ? SparklesIcon : SparklesOffIcon,
 						classes: $codeCompletionSessionEnabled
-							? 'text-violet-800 dark:text-violet-400'
-							: 'text-violet-800/50 dark:text-violet-400/50'
+							? 'text-violet-800 dark:text-violet-300'
+							: 'text-violet-800/50 dark:text-violet-300'
 				  }}
 			on:click={() => {
 				storeSetting()
@@ -51,7 +51,7 @@
 			startIcon={{
 				icon: SparklesOffIcon
 			}}
-			btnClasses="text-violet-800/50 dark:text-violet-400/50"
+			btnClasses="text-violet-800/50 dark:text-violet-300"
 		/>
 	</Popover>
 {/if}

frontend/src/lib/components/copilot/CronGen.svelte

@@ -62,7 +62,7 @@
 			startIcon={{ icon: Wand2 }}
 			iconOnly
 			title="AI Assistant"
-			btnClasses="min-h-[30px] text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+			btnClasses="min-h-[30px] text-violet-800 dark:text-violet-300 bg-violet-100 dark:bg-gray-700"
 			loading={genLoading}
 			clickableWhileLoading
 			on:click={genLoading ? () => abortController?.abort() : undefined}
@@ -87,7 +87,7 @@
 				color="light"
 				variant="contained"
 				buttonType="button"
-				btnClasses="!p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+				btnClasses="!p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-300 bg-violet-100 dark:bg-gray-700"
 				title="Generate CRON schedule from prompt"
 				aria-label="Generate"
 				iconOnly

frontend/src/lib/components/copilot/FlowCopilotStatus.svelte

@@ -38,7 +38,7 @@
 				$currentStepStore !== undefined ? 'z-[901]' : '',
 				copilotLoading || ($currentStepStore !== undefined && $currentStepStore !== 'Input')
 					? ''
-					: 'text-violet-800 dark:text-violet-400'
+					: 'text-violet-800 dark:text-violet-300'
 			)}
 			on:click={() => {
 				if (copilotLoading || ($currentStepStore !== undefined && $currentStepStore !== 'Input')) {
@@ -125,7 +125,7 @@
 				startIcon={{
 					icon: Wand2
 				}}
-				btnClasses="text-violet-800 dark:text-violet-500"
+				btnClasses="text-violet-800 dark:text-violet-300"
 				color={'light'}
 				variant={'border'}
 				nonCaptureEvent

frontend/src/lib/components/copilot/IteratorGen.svelte

@@ -137,7 +137,7 @@ Only output the expression, do not explain or discuss.`
 			size="xs"
 			color="light"
 			btnClasses={twMerge(
-				'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 dark:hover:bg-surface-hover',
+				'text-violet-800 dark:text-violet-300 bg-violet-100 dark:bg-gray-700 dark:hover:bg-surface-hover',
 				!loading && generatedContent.length > 0
 					? 'bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-400 dark:bg-green-700 dark:hover:bg-green-700'
 					: ''

frontend/src/lib/components/copilot/MetadataGen.svelte

@@ -230,7 +230,7 @@ Generate a description for the flow below:
 		{#if active}
 			<span
 				class={twMerge(
-					'absolute text-xs bg-violet-100 text-violet-800 dark:bg-gray-700 dark:text-violet-400 px-1 py-0.5 rounded-md flex flex-row items-center justify-center gap-2 transition-all shrink-0',
+					'absolute text-xs bg-violet-100 text-violet-800 dark:bg-gray-700 dark:text-violet-300 px-1 py-0.5 rounded-md flex flex-row items-center justify-center gap-2 transition-all shrink-0',
 					!loading && generatedContent.length > 0
 						? 'bg-green-100 text-green-800 dark:text-green-400 dark:bg-green-700'
 						: ''

frontend/src/lib/components/copilot/PredicateGen.svelte

@@ -96,7 +96,7 @@ Only return the expression without any wrapper. Do not explain or discuss.`
 				startIcon={{ icon: Wand2 }}
 				iconOnly
 				title="AI Assistant"
-				btnClasses="min-h-[30px] text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+				btnClasses="min-h-[30px] text-violet-800 dark:text-violet-300 bg-violet-100 dark:bg-gray-700"
 				{loading}
 				clickableWhileLoading
 				on:click={loading ? () => abortController?.abort() : undefined}
@@ -120,7 +120,7 @@ Only return the expression without any wrapper. Do not explain or discuss.`
 				color="light"
 				variant="contained"
 				buttonType="button"
-				btnClasses="!p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+				btnClasses="!p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-300 bg-violet-100 dark:bg-gray-700"
 				title="Generate predicate from prompt"
 				aria-label="Generate"
 				iconOnly

frontend/src/lib/components/copilot/ScriptFix.svelte

@@ -169,7 +169,7 @@
 						on:click={genLoading ? () => abortController?.abort() : undefined}
 						btnClasses={genLoading
 							? ''
-							: 'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700'}
+							: 'text-violet-800 dark:text-violet-300 bg-violet-100 dark:bg-gray-700'}
 						>{#if genLoading}
 							<WindmillIcon
 								white

frontend/src/lib/components/copilot/ScriptGen.svelte

@@ -322,14 +322,14 @@
 					title="Generate code from Prompt"
 					startIcon={genLoading
 						? { icon: Ban }
-						: { icon: Wand2, classes: 'text-violet-800 dark:text-violet-400' }}
+						: { icon: Wand2, classes: 'text-violet-800 dark:text-violet-300' }}
 				/>
 			{:else}
 				<Button
 					title="Generate code from prompt"
 					btnClasses={twMerge(
 						'!font-medium',
-						genLoading ? 'z-[5000]' : 'text-violet-800 dark:text-violet-400'
+						genLoading ? 'z-[5000]' : 'text-violet-800 dark:text-violet-300'
 					)}
 					size="xs"
 					color={genLoading ? 'red' : 'light'}
@@ -405,7 +405,7 @@
 							size="xs"
 							color="light"
 							buttonType="button"
-							btnClasses="h-[36px] !p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+							btnClasses="h-[36px] !p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-300 bg-violet-100 dark:bg-gray-700"
 							title="Generate code from prompt"
 							aria-label="Generate"
 							on:click={() => {

frontend/src/lib/components/copilot/StepGen.svelte

@@ -128,7 +128,7 @@
 			{#if funcDesc.length === 0}
 				<Wand2
 					size={14}
-					class="absolute right-4 top-1/2 -translate-y-1/2 fill-current opacity-70 text-violet-800 dark:text-violet-400"
+					class="absolute right-4 top-1/2 -translate-y-1/2 fill-current opacity-70 text-violet-800 dark:text-violet-300"
 				/>
 			{/if}
 		</div>
@@ -147,7 +147,7 @@
 							<div
 								class="rounded-md p-1 flex justify-center items-center bg-surface border w-6 h-6"
 							>
-								<Wand2 size={14} class="text-violet-800 dark:text-violet-400" />
+								<Wand2 size={14} class="text-violet-800 dark:text-violet-300" />
 							</div>
 
 							<div class="text-left text-xs text-secondary">
@@ -169,7 +169,7 @@
 							<div
 								class="rounded-md p-1 flex justify-center items-center bg-surface border w-6 h-6"
 							>
-								<Wand2 size={14} class="text-violet-800 dark:text-violet-400" />
+								<Wand2 size={14} class="text-violet-800 dark:text-violet-300" />
 							</div>
 
 							<div class="text-left text-xs text-secondary">

frontend/src/lib/components/copilot/StepInputGen.svelte

@@ -200,7 +200,7 @@ Only return the expression without any wrapper.`
 			size="xs"
 			color="light"
 			btnClasses={twMerge(
-				'text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700 dark:hover:bg-surface-hover',
+				'text-violet-800 dark:text-violet-300 bg-violet-100 dark:bg-gray-700 dark:hover:bg-surface-hover',
 				!loading && generatedContent.length > 0
 					? 'bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-400 dark:bg-green-700 dark:hover:bg-green-700'
 					: ''

frontend/src/lib/components/copilot/StepInputsGen.svelte

@@ -173,7 +173,7 @@ input_name2: expression2
 			size="xs"
 			color="light"
 			btnClasses={twMerge(
-				'text-violet-800 dark:text-violet-400',
+				'text-violet-800 dark:text-violet-300',
 				!loading && Object.keys($generatedExprs || {}).length > 0
 					? 'bg-green-100 text-green-800 hover:bg-green-100 dark:text-green-400 dark:bg-green-700 dark:hover:bg-green-700'
 					: ''
@@ -219,7 +219,7 @@ input_name2: expression2
 				<Button
 					size="xs"
 					color="light"
-					btnClasses="text-violet-800 dark:text-violet-400"
+					btnClasses="text-violet-800 dark:text-violet-300"
 					nonCaptureEvent
 					startIcon={{
 						icon: Wand2

frontend/src/lib/components/flows/map/FlowConstantsItem.svelte

@@ -8,7 +8,7 @@
 
 	$: settingsClass = classNames(
 		'border w-full rounded-sm p-2 bg-surface  text-sm cursor-pointer flex items-center',
-		$selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900' : ''
+		$selectedId == 'constants' ? 'outline outline-offset-1 outline-2  outline-slate-900 dark:bg-surface-secondary dark:outline-slate-800/50 dark:border-gray-400/80' : ''
 	)
 </script>
 

frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte

@@ -55,7 +55,7 @@
 		'z-10',
 		$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : 'cursor-pointer',
 		'border transition-colors duration-[400ms] ease-linear rounded-sm px-2 py-1 bg-surface text-sm flex justify-between items-center flex-row overflow-x-hidden relative',
-		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
+		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900 dark:outline-slate-900/0 dark:bg-surface-secondary dark:border-gray-400' : ''
 	)}
 	style={small ? 'min-width: 200px' : 'min-width: 275px'}
 >

frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte

@@ -131,7 +131,7 @@
 	</div>
 	<div
 		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
-			border border-gray-400 p-2 text-2xs module text-primary"
+			border border-gray-400/20 p-2 text-2xs module text-primary"
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />

frontend/src/lib/components/flows/map/FlowSettingsItem.svelte

@@ -10,7 +10,7 @@
 	$: settingsClass = classNames(
 		'border w-full rounded-sm p-2 bg-surface text-sm cursor-pointer flex items-center',
 		$selectedId?.startsWith('settings')
-			? 'outline outline-offset-1 outline-2  outline-slate-900'
+			? 'outline outline-offset-1 outline-2  outline-slate-900 dark:bg-white/5 dark:outline-slate-800/60 dark:border-gray-400'
 			: ''
 	)
 </script>

frontend/src/lib/components/flows/map/VirtualItem.svelte

@@ -82,7 +82,7 @@
 	<div
 		class="flex gap-1 justify-between {center
 			? 'items-center'
-			: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400"
+			: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400/20"
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />
@@ -172,7 +172,7 @@
 						: undefined}
 					slot="trigger"
 					type="button"
-					class=" bg-surface text-violet-800 dark:text-violet-400 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-8 h-8 flex items-center justify-center"
+					class=" bg-surface text-violet-800 dark:text-violet-300 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-8 h-8 flex items-center justify-center"
 				>
 					<Wand2 size={16} />
 				</button>

frontend/src/lib/components/graph/FlowGraph.svelte

@@ -290,7 +290,7 @@
 			case false:
 				return getStateColor(FlowStatusModule.type.FAILURE)
 			default:
-				return isDark ? '#2e3440' : '#fff'
+				return isDark ? '#344358' : '#fff'
 		}
 	}
 
@@ -679,7 +679,7 @@
 							label == 'Result'
 								? getResultColor()
 								: document.documentElement.classList.contains('dark')
-								? '#2e3440'
+								? '#344358'
 								: '#dfe6ee',
 						selected: $selectedId == label,
 						index,

frontend/src/lib/components/graph/util.ts

@@ -32,7 +32,7 @@ export function getStateColor(state: FlowStatusModule.type | undefined): string
 		case FlowStatusModule.type.WAITING_FOR_EXECUTOR:
 			return isDark ? '#ea580c' : 'rgb(255, 208, 193)'
 		default:
-			return isDark ? '#2e3440' : '#fff'
+			return isDark ? '#344358' : '#fff'
 	}
 }
 

frontend/src/lib/components/sidebar/MenuButton.svelte

@@ -16,7 +16,7 @@
 				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
 				lightMode
 					? 'text-primary hover:bg-surface-hover '
-					: '  hover:bg-[#34363c] text-primary-inverse dark:text-primary',
+					: '  hover:bg-[#2A3648] text-primary-inverse dark:text-primary',
 				'transition-all',
 				$$props.class
 			)}

frontend/src/lib/components/sidebar/MenuLink.svelte

@@ -33,7 +33,7 @@
 						: 'bg-frost-700 hover:bg-[#30404e]'
 					: lightMode
 					? 'hover:bg-surface-hover rounded-none'
-					: 'hover:bg-[#34363c]',
+					: 'hover:bg-[#2A3648]',
 
 				'hover:transition-all',
 				$$props.class

frontend/src/lib/components/vscode.ts

@@ -101,7 +101,7 @@ export async function initializeVscode() {
 				],
 				colors: {
 					'editor.foreground': '#D8DEE9',
-					'editor.background': '#2E3440',
+					'editor.background': '#2A3648',
 					'editor.selectionBackground': '#434C5ECC',
 					'editor.lineHighlightBackground': '#3B4252',
 					'editorCursor.foreground': '#D8DEE9',

frontend/src/routes/(root)/(logged)/+layout.svelte

@@ -337,7 +337,8 @@
 					class={classNames(
 						'hidden md:flex md:flex-col md:fixed md:inset-y-0 transition-all ease-in-out duration-200 shadow-md z-40 ',
 						isCollapsed ? 'md:w-12' : 'md:w-40',
-						devOnly ? '!hidden' : ''
+						devOnly ? '!hidden' : '',
+						'border-r border-opacity-50'
 					)}
 				>
 					<div
@@ -392,7 +393,7 @@
 
 			<div
 				class={classNames(
-					'fixed inset-0 dark:bg-[#1e232e] bg-[#202125] dark:bg-opacity-75 bg-opacity-75 transition-opacity ease-linear duration-300  !dark',
+					'fixed inset-0 dark:bg-[#1e232e] bg-[#202125] dark:bg-opacity-75 bg-opacity-75 transition-opacity ease-linear duration-300 !dark',
 					'opacity-0'
 				)}
 			>

frontend/tailwind.config.cjs

@@ -19,18 +19,18 @@ const lightTheme = {
 const lightThemeRgb = makeRgb(lightTheme)
 
 const darkTheme = {
-	surface: '#2e3440',
-	surfaceSecondary: '#3b4252',
-	surfaceHover: '#4c566a',
-	surfaceDisabled: '#2a2f3a',
+	surface: '#1F2937',
+	surfaceSecondary: '#2A3648',
+	surfaceHover: '#344358',
+	surfaceDisabled: '#171F2D',
 	surfaceSelected: '#434c5e',
 
-	textPrimary: '#f3f6f8',
-	textSecondary: '#e0e7ed',
-	textTertiary: '#c7ccd6',
-	textDisabled: '#a0aec0',
+	textPrimary: '#E2E8F0',
+	textSecondary: '#CBD5E1',
+	textTertiary: '#94A3B8',
+	textDisabled: '#4A5668',
 
-	border: '#3e4c60',
+	border: '#344358',
 	borderHover: '#3e4c60'
 }
 
@@ -353,7 +353,8 @@ const config = {
 				600: '#2563eb',
 				700: '#1d4ed8',
 				800: '#1e40af',
-				900: '#1e3a8a'
+				900: '#1e3a8a',
+				950: '#172554'
 			},
 
 			indigo: {
@@ -663,7 +664,7 @@ const config = {
 				'button:disabled,button[disabled=true],a:disabled,a[disabled=true]': {
 					pointerEvents: 'none',
 					cursor: 'default',
-					filter: 'grayscale(1)'
+					opacity: '0.50'
 				},
 				'pre code.hljs': {
 					padding: '0px !important',