From 8fa9e3ca4ce9ea3aff16231f1fcf3183201c34b5 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 25 Jul 2023 10:43:04 +0200
Subject: [PATCH] Dark mode v0 (#1893)

* feat(frontend): wip

* wip

* wip

* wip

* wip

* add toggle

* correctly handle monaco theme

* wip

* wip

* wip

* wip

* wip

* feat(frontend): Dark mode v0

* feat(frontend): Adap AI gen poppup

* feat(frontend): Adap script metadata labels

* feat(frontend): Fix unreadable texts

* feat(frontend): Fix unreadable texts

* feat(frontend): Fix unreadable texts

* feat(frontend): Fix ressource picker

* feat(frontend): Fix unreadable texts

* feat(frontend): Fix unreadable texts

* feat(frontend): Fix unreadable texts

* feat(frontend): Add theme toggle in the login page

* feat(frontend): Fix unreadable texts

* feat(frontend): Fix language selection

* feat(frontend): Fix FlowStatusViewer colors

* feat(frontend): Fix divide colors

* feat(frontend): Fix flow graph buttons

* feat(frontend): add theme toggle in login modal

* feat(frontend): small ui fix

* feat(frontend): fix graph dark mode toggle
---
 frontend/src/lib/assets/app.css               |   7 +
 .../src/lib/components/ApiConnectForm.svelte  |   2 +-
 frontend/src/lib/components/AppConnect.svelte |   6 +-
 frontend/src/lib/components/ArgInfo.svelte    |   4 +-
 frontend/src/lib/components/ArgInput.svelte   |  10 +-
 .../lib/components/ArrayTypeNarrowing.svelte  |   2 +-
 frontend/src/lib/components/Badge.svelte      |   2 +-
 .../src/lib/components/CenteredModal.svelte   |  20 +-
 .../src/lib/components/ChevronButton.svelte   |   2 +-
 frontend/src/lib/components/CliHelpBox.svelte |   4 +-
 .../src/lib/components/CollapseLink.svelte    |   2 +-
 frontend/src/lib/components/CronInput.svelte  |  10 +-
 .../lib/components/DarkModeObserver.svelte    |  23 ++
 .../src/lib/components/DeployWorkspace.svelte |   2 +-
 frontend/src/lib/components/DiffDrawer.svelte |   4 +-
 frontend/src/lib/components/DiffEditor.svelte |  11 -
 .../src/lib/components/DisplayResult.svelte   |  16 +-
 frontend/src/lib/components/Dropdown.svelte   |  16 +-
 frontend/src/lib/components/Editor.svelte     |  11 -
 frontend/src/lib/components/EditorBar.svelte  |  16 +-
 .../src/lib/components/EditorTheme.svelte     | 137 +++++++++++
 .../src/lib/components/FieldHeader.svelte     |   4 +-
 .../src/lib/components/FlowBuilder.svelte     |   2 +-
 .../src/lib/components/FlowGraphViewer.svelte |  20 +-
 .../src/lib/components/FlowJobResult.svelte   |   4 +-
 .../src/lib/components/FlowMetadata.svelte    |  30 +--
 .../lib/components/FlowPreviewContent.svelte  |   8 +-
 .../lib/components/FlowStatusViewer.svelte    |  32 +--
 .../FlowStatusWaitingForEvents.svelte         |   2 +-
 frontend/src/lib/components/FlowViewer.svelte |   2 +-
 .../src/lib/components/FolderEditor.svelte    |   4 +-
 frontend/src/lib/components/FolderInfo.svelte |   4 +-
 .../src/lib/components/FolderUsageInfo.svelte |   2 +-
 .../src/lib/components/GroupEditor.svelte     |   2 +-
 frontend/src/lib/components/GroupInfo.svelte  |   4 +-
 .../lib/components/IconedResourceType.svelte  |   2 +-
 .../src/lib/components/InlineCodeCopy.svelte  |   3 +-
 .../lib/components/InputTransformForm.svelte  |   6 +-
 .../InputTransformSchemaForm.svelte           |   4 +-
 .../components/InputTransformsViewer.svelte   |   4 +-
 .../lib/components/InviteGlobalUser.svelte    |   6 +-
 frontend/src/lib/components/ItemPicker.svelte |  20 +-
 frontend/src/lib/components/JobArgs.svelte    |   8 +-
 .../lib/components/LightweightArgInput.svelte |   4 +-
 frontend/src/lib/components/LogViewer.svelte  |   8 +-
 .../src/lib/components/LoginPageHeader.svelte |  16 ++
 frontend/src/lib/components/Modal.svelte      |   4 +-
 .../src/lib/components/ModulePreview.svelte   |   2 +-
 .../src/lib/components/ModuleStatus.svelte    |   4 +-
 frontend/src/lib/components/MoveDrawer.svelte |   6 +-
 frontend/src/lib/components/Password.svelte   |   2 +-
 frontend/src/lib/components/Path.svelte       |  24 +-
 frontend/src/lib/components/Required.svelte   |   2 +-
 .../src/lib/components/ResourceEditor.svelte  |  16 +-
 .../src/lib/components/ResourcePicker.svelte  |  32 ++-
 frontend/src/lib/components/RunForm.svelte    |   4 +-
 .../lib/components/RunPageSchedules.svelte    |   2 +-
 .../src/lib/components/SavedInputs.svelte     |  20 +-
 .../src/lib/components/ScheduleEditor.svelte  |   4 +-
 .../src/lib/components/SchemaEditor.svelte    |   2 +-
 frontend/src/lib/components/SchemaForm.svelte |  11 +-
 .../src/lib/components/SchemaModal.svelte     |   8 +-
 .../src/lib/components/SchemaViewer.svelte    |   2 +-
 .../src/lib/components/ScriptBuilder.svelte   |  46 ++--
 .../src/lib/components/ScriptEditor.svelte    |   2 +-
 .../src/lib/components/ScriptPicker.svelte    |  22 +-
 .../components/ScriptVersionHistory.svelte    |   4 +-
 .../src/lib/components/SimpleEditor.svelte    |  11 -
 .../lib/components/StringTypeNarrowing.svelte |   4 +-
 .../lib/components/SuperadminSettings.svelte  |   4 +-
 .../src/lib/components/TableCustom.svelte     |   4 +-
 .../src/lib/components/TableSimple.svelte     |  10 +-
 .../src/lib/components/TemplateEditor.svelte  |  11 -
 frontend/src/lib/components/Toast.svelte      |  12 +-
 frontend/src/lib/components/Toggle.svelte     |   6 +-
 .../lib/components/ToggleHubWorkspace.svelte  |  13 +-
 frontend/src/lib/components/Tooltip.svelte    |   4 +-
 frontend/src/lib/components/Uptodate.svelte   |   4 +-
 .../src/lib/components/UserSettings.svelte    |  18 +-
 .../src/lib/components/VariableEditor.svelte  |  29 +--
 frontend/src/lib/components/Version.svelte    |   4 +-
 .../src/lib/components/WhitelistIp.svelte     |   2 +-
 .../apps/components/helpers/Loader.svelte     |   2 +-
 .../helpers/MissingConnectionWarning.svelte   |   2 +-
 .../apps/components/layout/AppTabs.svelte     |   2 +-
 .../components/apps/editor/AppEditor.svelte   |   4 +-
 .../components/apps/editor/AppPreview.svelte  |   4 +-
 .../apps/editor/DeploymentHistory.svelte      |   4 +-
 .../components/apps/editor/GridEditor.svelte  |   6 +-
 .../apps/editor/RecomputeAllComponents.svelte |   4 +-
 .../components/apps/editor/TabsDebug.svelte   |   2 +-
 .../componentsPanel/ComponentList.svelte      |  16 +-
 .../editor/componentsPanel/CssProperty.svelte |   8 +-
 .../editor/componentsPanel/CssSettings.svelte |   2 +-
 .../editor/componentsPanel/ListItem.svelte    |   6 +-
 .../componentsPanel/QuickStyleMenu.svelte     |   4 +-
 .../componentsPanel/QuickStyleProperty.svelte |   2 +-
 .../contextPanel/ComponentOutputViewer.svelte |   4 +-
 .../editor/contextPanel/ContextPanel.svelte   |  14 +-
 .../editor/contextPanel/SubGridOutput.svelte  |   2 +-
 .../contextPanel/components/IdEditor.svelte   |   8 +-
 .../components/OutputHeader.svelte            |  17 +-
 .../InlineScriptEditor.svelte                 |   2 +-
 .../InlineScriptEditorPanel.svelte            |   2 +-
 .../InlineScriptHiddenRunnable.svelte         |   2 +-
 .../InlineScriptsPanel.svelte                 |   4 +-
 .../InlineScriptsPanelList.svelte             |  30 ++-
 .../settingsPanel/AlignmentEditor.svelte      |   2 +-
 .../ArrayStaticInputEditor.svelte             |   2 +-
 .../settingsPanel/ComponentPanel.svelte       |  16 +-
 .../editor/settingsPanel/GridCondition.svelte |   2 +-
 .../apps/editor/settingsPanel/GridPane.svelte |   2 +-
 .../apps/editor/settingsPanel/GridTab.svelte  |   2 +-
 .../settingsPanel/InputsSpecEditor.svelte     |   6 +-
 .../settingsPanel/InputsSpecsEditor.svelte    |   2 +-
 .../editor/settingsPanel/Recompute.svelte     |   4 +-
 .../editor/settingsPanel/TableActions.svelte  |  10 +-
 .../settingsPanel/common/PanelSection.svelte  |   2 +-
 .../inputEditor/IconSelectInput.svelte        |   4 +-
 .../inputEditor/JsonEditor.svelte             |   4 +-
 .../inputEditor/TabSelectInput.svelte         |   2 +-
 .../mainInput/InlineScriptList.svelte         |   8 +-
 .../mainInput/WorkspaceFlowList.svelte        |   6 +-
 .../mainInput/WorkspaceScriptList.svelte      |   8 +-
 .../script/ComponentScriptSettings.svelte     |   2 +-
 .../script/shared/ScriptSettingHeader.svelte  |   2 +-
 .../secondaryMenu/SecondaryMenu.svelte        |   4 +-
 .../apps/svelte-select/lib/tailwind.css       |  10 +-
 .../lib/components/codeGen/ScriptGen.svelte   |   8 +-
 .../lib/components/common/CloseButton.svelte  |   6 +-
 .../common/actionRow/ActionRow.svelte         |   2 +-
 .../lib/components/common/alert/Alert.svelte  |  36 +--
 .../common/breadcrumb/Breadcrumb.svelte       |   2 +-
 .../components/common/button/Button.svelte    |  29 +--
 .../common/button/ButtonDropdown.svelte       |   2 +-
 .../calendarPicker/CalendarPicker.svelte      |   4 +-
 .../ConfirmationModal.svelte                  |  12 +-
 .../components/common/drawer/Drawer.svelte    |   4 +-
 .../common/drawer/DrawerContent.svelte        |   2 +-
 .../common/fileInput/FileInput.svelte         |   2 +-
 .../src/lib/components/common/kbd/Kbd.svelte  |   2 +-
 .../lib/components/common/menu/Menu.svelte    |   2 +-
 .../components/common/menu/MenuItem.svelte    |   2 +-
 .../common/modal/AlwaysMountedModal.svelte    |   2 +-
 .../lib/components/common/modal/Modal.svelte  |   6 +-
 .../common/skeleton/SkeletonElement.svelte    |   2 +-
 .../components/common/stepper/Stepper.svelte  |   6 +-
 .../lib/components/common/table/Row.svelte    |  20 +-
 .../components/common/table/RowIcon.svelte    |   8 +-
 .../lib/components/common/table/Table.svelte  |   2 +-
 .../src/lib/components/common/tabs/Tab.svelte |   2 +-
 .../lib/components/common/tabs/Tabs.svelte    |   5 +-
 .../toggleButton-v2/ToggleButton.svelte       |   5 +-
 .../toggleButton-v2/ToggleButtonGroup.svelte  |   2 +-
 .../components/details/ClipboardPanel.svelte  |   2 +-
 .../details/DetailPageHeader.svelte           |   2 +-
 .../src/lib/components/details/Menu.svelte    |   2 +-
 .../lib/components/flows/FlowEditor.svelte    |   2 +-
 .../flows/common/FlowCardHeader.svelte        |   6 +-
 .../flows/content/CapturePayload.svelte       |   4 +-
 .../flows/content/DynamicInputHelpBox.svelte  |   2 +-
 .../content/FlowBranchesAllWrapper.svelte     |   2 +-
 .../content/FlowBranchesOneWrapper.svelte     |   4 +-
 .../flows/content/FlowConstants.svelte        |   2 +-
 .../flows/content/FlowEditorPanel.svelte      |   2 +-
 .../flows/content/FlowInputs.svelte           |  49 ++--
 .../flows/content/FlowInputsFlow.svelte       |   4 +-
 .../components/flows/content/FlowLoop.svelte  |   2 +-
 .../flows/content/FlowModuleEarlyStop.svelte  |   4 +-
 .../flows/content/FlowModuleHeader.svelte     |  35 ++-
 .../flows/content/FlowRetries.svelte          |   6 +-
 .../flows/content/FlowSchedules.svelte        |   2 +-
 .../flows/content/FlowSettings.svelte         |  10 +-
 .../flows/content/ScriptEditorDrawer.svelte   |   2 +-
 .../lib/components/flows/flowStateUtils.ts    |   2 +-
 .../flows/map/FlowConstantsItem.svelte        |   2 +-
 .../flows/map/FlowErrorHandlerItem.svelte     |   2 +-
 .../flows/map/FlowModuleSchemaItem.svelte     |  24 +-
 .../flows/map/FlowModuleSchemaMap.svelte      |   4 +-
 .../flows/map/FlowSettingsItem.svelte         |   2 +-
 .../flows/map/InsertModuleButton.svelte       |  20 +-
 .../lib/components/flows/map/MapItem.svelte   |   2 +-
 .../components/flows/map/VirtualItem.svelte   |  11 +-
 .../flows/pickers/PickHubApp.svelte           |   6 +-
 .../flows/pickers/PickHubFlow.svelte          |   6 +-
 .../flows/pickers/PickHubScript.svelte        |  12 +-
 .../pickers/WorkspaceScriptPicker.svelte      |   4 +-
 .../src/lib/components/graph/FlowGraph.svelte |  78 ++++---
 .../svelvet/container/views/GraphView.svelte  |  10 +-
 .../svelvet/container/views/Svelvet.svelte    |   6 +-
 .../src/lib/components/home/ItemsList.svelte  |  13 +-
 .../lib/components/home/ListFilters.svelte    |   4 +-
 .../lib/components/home/NoItemFound.svelte    |   2 +-
 .../src/lib/components/jobs/JobDetail.svelte  |  42 ++--
 .../src/lib/components/jobs/JobPreview.svelte |  10 +-
 .../preview/FlowPreviewStatus.svelte          |   4 +-
 .../components/progressBar/ProgressBar.svelte |   4 +-
 .../propertyPicker/ObjectViewer.svelte        |  24 +-
 .../propertyPicker/PropPicker.svelte          |   7 +-
 .../components/scriptEditor/LogPanel.svelte   |   4 +-
 .../components/sidebar/DarkModeToggle.svelte  |  32 +++
 .../components/sidebar/FavoriteMenu.svelte    |   6 +-
 .../lib/components/sidebar/MenuLink.svelte    |   4 +-
 .../components/sidebar/MultiplayerMenu.svelte |   2 +-
 .../components/sidebar/SidebarContent.svelte  |  10 +-
 .../lib/components/sidebar/UserMenu.svelte    |  20 +-
 .../components/sidebar/WorkspaceMenu.svelte   |  20 +-
 frontend/src/lib/components/theme/nord.json   |  93 ++++++++
 frontend/src/lib/defaults.ts                  |   4 +-
 .../src/routes/(root)/(logged)/+layout.svelte |  12 +-
 .../src/routes/(root)/(logged)/+page.svelte   |   2 +-
 .../(logged)/flows/get/[...path]/+page.svelte |   8 +-
 .../(root)/(logged)/folders/+page.svelte      |   2 +-
 .../(root)/(logged)/resources/+page.svelte    |  16 +-
 .../(root)/(logged)/run/[...run]/+page.svelte |   4 +-
 .../(logged)/runs/[...path]/+page.svelte      |   2 +-
 .../(root)/(logged)/schedules/+page.svelte    |  16 +-
 .../(root)/(logged)/scripts/dev/+page.svelte  |   5 -
 .../scripts/get/[...hash]/+page.svelte        |  10 +-
 .../user/(user)/accept_invite/+page.svelte    |   8 +-
 .../user/(user)/create_workspace/+page.svelte |   8 +-
 .../(logged)/user/(user)/login/+page.svelte   |  33 +--
 .../user/(user)/workspaces/+page.svelte       |  10 +-
 .../(root)/(logged)/variables/+page.svelte    |   8 +-
 .../(logged)/workspace_settings/+page.svelte  |  56 +++--
 .../workspace_settings/checkout/+page.svelte  |   4 +-
 frontend/src/routes/(root)/+layout.svelte     |  14 +-
 .../[workspace]/[...secret]/+page.svelte      |   2 +-
 frontend/tailwind.config.cjs                  | 214 ++++++++++++++----
 229 files changed, 1418 insertions(+), 947 deletions(-)
 create mode 100644 frontend/src/lib/components/DarkModeObserver.svelte
 create mode 100644 frontend/src/lib/components/EditorTheme.svelte
 create mode 100644 frontend/src/lib/components/LoginPageHeader.svelte
 create mode 100644 frontend/src/lib/components/sidebar/DarkModeToggle.svelte
 create mode 100644 frontend/src/lib/components/theme/nord.json

diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css
index d11eab5860..65e8cf6ce5 100644
--- a/frontend/src/lib/assets/app.css
+++ b/frontend/src/lib/assets/app.css
@@ -4,6 +4,13 @@
 @tailwind utilities;
 
 @layer base {
+
+	*,
+  ::before,
+  ::after {
+    @apply dark:border-gray-600;
+  }
+
 	@font-face {
 		font-family: 'Inter';
 		src: url('/Inter-Variable.ttf');
diff --git a/frontend/src/lib/components/ApiConnectForm.svelte b/frontend/src/lib/components/ApiConnectForm.svelte
index a4c02b1746..be544c9366 100644
--- a/frontend/src/lib/components/ApiConnectForm.svelte
+++ b/frontend/src/lib/components/ApiConnectForm.svelte
@@ -71,7 +71,7 @@
 		<TestConnection {resource_type} {args} />
 	</div>
 {:else}
-	<p class="italic text-gray-500 text-xs mb-4"
+	<p class="italic text-tertiary text-xs mb-4"
 		>No corresponding resource type found in your workspace for {resource_type}. Define the value in
 		JSON directly</p
 	>
diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte
index 5acaaf93b9..2a9f2e7edf 100644
--- a/frontend/src/lib/components/AppConnect.svelte
+++ b/frontend/src/lib/components/AppConnect.svelte
@@ -323,7 +323,7 @@
 						<Button
 							size="sm"
 							variant="border"
-							color={key === resource_type ? 'blue' : 'dark'}
+							color={key === resource_type ? 'blue' : 'light'}
 							btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 							on:click={() => {
 								manual = false
@@ -387,7 +387,7 @@
 						<Button
 							size="sm"
 							variant="border"
-							color={key === resource_type ? 'blue' : 'dark'}
+							color={key === resource_type ? 'blue' : 'light'}
 							btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 							on:click={() => {
 								manual = true
@@ -453,7 +453,7 @@
 				kind="resource"
 			/>
 			{#if apiTokenApps[resource_type] || !manual}
-				<ul class="mt-10 bg-white">
+				<ul class="mt-10">
 					<li>
 						1. A secret variable containing the {apiTokenApps[resource_type]?.key ?? 'token'}
 						<span class="font-bold">{truncateRev(value, 5, '*****')}</span>
diff --git a/frontend/src/lib/components/ArgInfo.svelte b/frontend/src/lib/components/ArgInfo.svelte
index df047b7992..9bc252684d 100644
--- a/frontend/src/lib/components/ArgInfo.svelte
+++ b/frontend/src/lib/components/ArgInfo.svelte
@@ -42,7 +42,7 @@
 </Drawer>
 
 {#if value == undefined || value == null}
-	<span class="text-gray-600">null</span>
+	<span class="text-tertiary">null</span>
 {:else if value == '<function call>'}
 	{'<function call>'}<Tooltip
 		>The arg was none and the default argument of the script is a function call, hence the actual
@@ -71,7 +71,7 @@
 	<div class="relative">
 		{#if JSON.stringify(value).length > 120}
 			<button
-				class="text-xs absolute top-0 right-4 text-gray-500"
+				class="text-xs absolute top-0 right-4 text-tertiary"
 				on:click={() => {
 					jsonViewerContent = value
 					jsonViewer.toggleDrawer()
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index f4aa92f611..58d3a5de62 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -185,7 +185,7 @@
 			<FieldHeader prettify={prettifyHeader} {label} {required} {type} {contentEncoding} {format} />
 		{/if}
 		{#if editableSchema}
-			<label class="text-gray-700">
+			<label class="text-secondary">
 				Description
 				<textarea
 					class="mb-1"
@@ -229,7 +229,7 @@
 		{/if}
 
 		{#if description}
-			<div class="text-sm italic pb-1">
+			<div class="text-sm italic pb-1 text-secondary">
 				{description}
 			</div>
 		{/if}
@@ -312,7 +312,7 @@
 											{/if}
 											<button
 												transition:fade|local={{ duration: 100 }}
-												class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 ml-2"
+												class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
 												aria-label="Clear"
 												on:click={() => {
 													value.splice(i, 1)
@@ -450,7 +450,7 @@
 						{/if}
 					</div>
 					{#if variableEditor}
-						<div class="text-sm text-gray-600">
+						<div class="text-sm text-tertiary-inverse">
 							{#if value && typeof value == 'string' && value?.startsWith('$var:')}
 								Linked to variable <button
 									class="text-blue-500 underline"
@@ -465,7 +465,7 @@
 			<slot name="actions" />
 		</div>
 		{#if !compact || (error && error != '')}
-			<div class="text-right text-xs text-red-600">
+			<div class="text-right text-xs text-red-600 dark:text-red-400">
 				{#if error === ''}
 					&nbsp;
 				{:else}
diff --git a/frontend/src/lib/components/ArrayTypeNarrowing.svelte b/frontend/src/lib/components/ArrayTypeNarrowing.svelte
index 7656e64604..4795463043 100644
--- a/frontend/src/lib/components/ArrayTypeNarrowing.svelte
+++ b/frontend/src/lib/components/ArrayTypeNarrowing.svelte
@@ -43,7 +43,7 @@
 </select>
 {#if Array.isArray(itemsType?.enum)}
 	<div class="pt-1" />
-	<label for="input" class="mb-2 text-gray-700 text-xs">
+	<label for="input" class="mb-2 text-secondary text-xs">
 		Enums
 		<div class="flex flex-col gap-1">
 			{#each itemsType?.enum || [] as e}
diff --git a/frontend/src/lib/components/Badge.svelte b/frontend/src/lib/components/Badge.svelte
index 5e82506e8d..11042b4f1e 100644
--- a/frontend/src/lib/components/Badge.svelte
+++ b/frontend/src/lib/components/Badge.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Tooltip from './Tooltip.svelte'
 	export let twBgColor = 'bg-blue-200'
-	export let twTextColor = 'text-gray-700'
+	export let twTextColor = 'text-secondary'
 	export let tooltip: string | undefined = undefined
 </script>
 
diff --git a/frontend/src/lib/components/CenteredModal.svelte b/frontend/src/lib/components/CenteredModal.svelte
index 6fbc317036..bfd66c46a3 100644
--- a/frontend/src/lib/components/CenteredModal.svelte
+++ b/frontend/src/lib/components/CenteredModal.svelte
@@ -1,34 +1,32 @@
 <script lang="ts">
 	import WindmillIcon from './icons/WindmillIcon.svelte'
-	import Uptodate from './Uptodate.svelte'
-	import Version from './Version.svelte'
+	import LoginPageHeader from './LoginPageHeader.svelte'
 
 	export let subtitle: string | undefined = undefined
 	export let title = 'Windmill'
 	export let disableLogo = false
 </script>
 
-<div class="center-center min-h-screen p-4 relative bg-gray-50">
+<div class="center-center min-h-screen p-4 relative bg-surface-secondary">
 	<div class="flex flex-col gap-2 items-center w-full">
 		{#if !disableLogo}
 			<div class="hidden lg:block">
 				<div>
 					<WindmillIcon height="100px" width="100px" spin="slow" />
 				</div>
-				<h2 class="text-center pt-2 text-gray-800">Windmill</h2>
+				<h2 class="text-center pt-2 text-primary">Windmill</h2>
 			</div>
 		{/if}
 
 		<div
-			class="border rounded-md shadow-md bg-white w-full max-w-[640px]
-	p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
+			class="border rounded-md shadow-md bg-surface w-full max-w-[640px] p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
 		>
 			<div class="mb-10">
-				<h1 class="text-center">
+				<h1 class="text-center text-primary">
 					{title}
 				</h1>
 				{#if subtitle}
-					<p class="text-sm text-center text-gray-600 mt-2">
+					<p class="text-sm text-center text-secondary mt-2">
 						{subtitle}
 					</p>
 				{/if}
@@ -37,9 +35,5 @@
 		</div>
 	</div>
 
-	<div class="absolute top-0 right-0 text-2xs text-gray-600 italic px-3 py-1">
-		<span class="font-mono flex flex-col">
-			<div>Windmill <Version /></div><div><Uptodate /></div>
-		</span>
-	</div>
+	<LoginPageHeader />
 </div>
diff --git a/frontend/src/lib/components/ChevronButton.svelte b/frontend/src/lib/components/ChevronButton.svelte
index 68a8a9d783..7c946ed9c1 100644
--- a/frontend/src/lib/components/ChevronButton.svelte
+++ b/frontend/src/lib/components/ChevronButton.svelte
@@ -10,7 +10,7 @@
 
 <button
 	type="submit"
-	class="mr-6 text-sm underline text-gray-700 inline-flex items-center"
+	class="mr-6 text-sm underline text-secondary inline-flex items-center"
 	on:click={() => {
 		viewOptions = !viewOptions
 	}}
diff --git a/frontend/src/lib/components/CliHelpBox.svelte b/frontend/src/lib/components/CliHelpBox.svelte
index 1e758ba7e3..ad24d694fd 100644
--- a/frontend/src/lib/components/CliHelpBox.svelte
+++ b/frontend/src/lib/components/CliHelpBox.svelte
@@ -7,8 +7,8 @@
 </script>
 
 <div>
-	<div class="text-sm font-semibold"> CLI quick setup </div>
-	<div class="text-sm text-gray-600" role="alert" id="dynamic-input-help-box">
+	<div class="text-sm font-semibold">CLI quick setup </div>
+	<div class="text-sm" role="alert" id="dynamic-input-help-box">
 		<ul class="pl-0 pt-2 list-decimal list-inside">
 			<li
 				>Install the latest wmill CLI from deno.land: <InlineCodeCopy
diff --git a/frontend/src/lib/components/CollapseLink.svelte b/frontend/src/lib/components/CollapseLink.svelte
index 2c595905fa..74142d5ee1 100644
--- a/frontend/src/lib/components/CollapseLink.svelte
+++ b/frontend/src/lib/components/CollapseLink.svelte
@@ -15,7 +15,7 @@
 	<Button
 		variant="border"
 		color="light"
-		btnClasses="text-gray-600 {small ? 'text-xs' : ''} "
+		btnClasses="text-tertiary {small ? 'text-xs' : ''} "
 		on:click={() => (open = !open)}
 	>
 		{text}&nbsp;<Icon data={open ? faChevronUp : faChevronDown} scale={0.5} />
diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte
index 4882f9afff..f569324d86 100644
--- a/frontend/src/lib/components/CronInput.svelte
+++ b/frontend/src/lib/components/CronInput.svelte
@@ -295,16 +295,16 @@
 						<div class="w-full flex flex-col gap-1">
 							<small class="font-bold">Preview New Cron</small>
 
-							<div class="flex p-2 px-4 rounded-md bg-gray-100">
+							<div class="flex p-2 px-4 rounded-md bg-surface-secondary">
 								<span>{nschedule}</span>
 							</div>
 						</div>
 					</div>
 
 					<div class="mt-4">
-						<Button color="dark" size="xs" on:click={() => (schedule = nschedule)}
-							>Set Cron Schedule</Button
-						>
+						<Button color="dark" size="xs" on:click={() => (schedule = nschedule)}>
+							Set Cron Schedule
+						</Button>
 					</div>
 				</CollapseLink>
 			</div>
@@ -316,7 +316,7 @@
 		<hr />
 		<div class="flex flex-col space-y-2">
 			<small>Estimated upcoming events ({timezone})</small>
-			<div class="flex flex-col rounded-md p-4 border text-gray-600">
+			<div class="flex flex-col rounded-md p-4 border text-tertiary bg-surface-secondary">
 				{#each preview as date}
 					<div class="flex items-center space-x-2 text-sm">
 						<span>{dateFormatter(new Date(date))}</span>
diff --git a/frontend/src/lib/components/DarkModeObserver.svelte b/frontend/src/lib/components/DarkModeObserver.svelte
new file mode 100644
index 0000000000..4b1875615e
--- /dev/null
+++ b/frontend/src/lib/components/DarkModeObserver.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte'
+	import { createEventDispatcher } from 'svelte'
+
+	const dispatch = createEventDispatcher()
+
+	let observer: MutationObserver
+	onMount(() => {
+		observer = new MutationObserver((mutationsList, observer) => {
+			for (let mutation of mutationsList) {
+				if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+					dispatch('change', document.documentElement.classList.contains('dark'))
+				}
+			}
+		})
+
+		observer.observe(document.documentElement, { attributes: true })
+	})
+
+	onDestroy(() => {
+		observer.disconnect()
+	})
+</script>
diff --git a/frontend/src/lib/components/DeployWorkspace.svelte b/frontend/src/lib/components/DeployWorkspace.svelte
index 227f68c9ef..fd97652165 100644
--- a/frontend/src/lib/components/DeployWorkspace.svelte
+++ b/frontend/src/lib/components/DeployWorkspace.svelte
@@ -502,7 +502,7 @@
 		<div class="grid grid-cols-9 justify-center max-w-3xl gap-2">
 			{#each dependencies ?? [] as { kind, path, include }}
 				{@const statusPath = computeStatusPath(kind, path)}
-				<div class="col-span-1 truncate text-gray-700 text-sm">{kind}</div><div
+				<div class="col-span-1 truncate text-secondary text-sm">{kind}</div><div
 					class="col-span-5 truncate font-semibold">{path}</div
 				><div class="col-span-1"><Toggle size="xs" bind:checked={include} /></div><div
 					class="col-span-1"
diff --git a/frontend/src/lib/components/DiffDrawer.svelte b/frontend/src/lib/components/DiffDrawer.svelte
index 20d105282f..42857ec102 100644
--- a/frontend/src/lib/components/DiffDrawer.svelte
+++ b/frontend/src/lib/components/DiffDrawer.svelte
@@ -42,7 +42,9 @@
 		{#if diffContent == undefined}
 			<Loader2 class="animate-spin" />
 		{:else}
-			<pre class="border bg-white p-2"><code>{@html diffContent}</code></pre>
+			<pre class="border bg-surface-secondary p-2 whitespace-pre-wrap"
+				><code>{@html diffContent}</code></pre
+			>
 			<div class="flex flex-row-reverse gap-2">
 				<div class="text-red-600">Removed</div>
 				<div class="text-green-600">Added</div></div
diff --git a/frontend/src/lib/components/DiffEditor.svelte b/frontend/src/lib/components/DiffEditor.svelte
index 23de875d88..fe5357a254 100644
--- a/frontend/src/lib/components/DiffEditor.svelte
+++ b/frontend/src/lib/components/DiffEditor.svelte
@@ -11,17 +11,6 @@
 	import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
 	import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
 
-	meditor.defineTheme('myTheme', {
-		base: 'vs',
-		inherit: true,
-		rules: [],
-		colors: {
-			'editorLineNumber.foreground': '#999',
-			'editorGutter.background': '#F9FAFB'
-		}
-	})
-	meditor.setTheme('myTheme')
-
 	const SIDE_BY_SIDE_MIN_WIDTH = 650
 
 	export let automaticLayout = true
diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index 2bc7d085f8..2e76105b06 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -125,13 +125,13 @@
 <div class="inline-highlight">
 	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
-			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
+			<div class="mb-2 text-tertiary text-sm bg-gray-50/20">
 				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
 				class="mb-2 w-full text-sm relative"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
 				{#if !disableExpand}
-					<div class="text-gray-500 text-xs absolute top-5.5 right-0">
+					<div class="text-tertiary text-xs absolute top-5.5 right-0">
 						<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
 					</div>
 				{/if}
@@ -179,7 +179,7 @@
 								Warning
 							</div>
 							<p
-								class="text-gray-600 mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
+								class="text-tertiary mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
 								>Rendering HTML can expose you to <a
 									href="https://owasp.org/www-community/attacks/xss/"
 									target="_blank"
@@ -229,7 +229,7 @@
 					>{#if result.error.name || result.error.message}{result.error.name}: {result.error
 							.message}{:else}{JSON.stringify(result.error, null, 4)}{/if}</span
 				>
-				<pre class="text-sm whitespace-pre-wrap text-gray-900">{result.error.stack ?? ''}</pre>
+				<pre class="text-sm whitespace-pre-wrap text-primary">{result.error.stack ?? ''}</pre>
 				{#if lang && editor && diffEditor}
 					<ScriptFix error={JSON.stringify(result.error)} {lang} {editor} {diffEditor} />
 				{/if}
@@ -255,7 +255,7 @@
 			</div>
 		{:else}
 			{#if jsonStr.length > 10000}
-				<div class="text-sm mb-2 text-gray-600">
+				<div class="text-sm mb-2 text-tertiary">
 					<a
 						download="{filename ?? 'result'}.json"
 						href={workspaceId && jobId
@@ -270,7 +270,7 @@
 			{/if}
 		{/if}
 	{:else}
-		<div class="text-gray-500 text-sm">No result: {jsonStr}</div>
+		<div class="text-tertiary text-sm">No result: {jsonStr}</div>
 	{/if}
 </div>
 
@@ -280,7 +280,7 @@
 			<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
 				<svelte:fragment slot="actions">
 					<a
-						class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+						class="text-sm text-secondary mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
 						download="{filename ?? 'result'}.json"
 						href={workspaceId && jobId
 							? `/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
@@ -292,7 +292,7 @@
 					</Button>
 				</svelte:fragment>
 				{#if jsonStr.length > 100000}
-					<div class="text-sm mb-2 text-gray-600">
+					<div class="text-sm mb-2 text-tertiary">
 						<a
 							download="{filename ?? 'result'}.json"
 							href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index ac625b5c99..d0ea077bec 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/frontend/src/lib/components/Dropdown.svelte
@@ -54,9 +54,9 @@
 							dispatch('click', { item: item?.eventName })
 						}
 					}}
-					class="block w-full whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
-					 px-4 py-2 text-sm text-gray-700 text-left
-					 {item.disabled ? 'bg-gray-200' : ''}
+					class="block w-full whitespace-nowrap hover:drop-shadow-sm hover:bg-surface-hover hover:bg-opacity-30
+					 px-4 py-2 text-sm text-primary text-left
+					 {item.disabled ? 'bg-surface-disabled' : ''}
 					 {item.separatorTop ? 'border-t' : ''} {item.separatorBottom ? 'border-b' : ''} {item.type ==
 					'delete'
 						? 'text-red-500'
@@ -70,7 +70,7 @@
 						<Icon
 							data={item.icon}
 							scale={0.6}
-							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-primary'}"
 						/>
 					{/if}
 					{item.displayName}
@@ -78,7 +78,7 @@
 			{:else if item.href && !item.disabled}
 				<a
 					href={item.href}
-					class="block w-full px-4 font-semibold text-left py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
+					class="block w-full px-4 font-semibold text-left py-2 text-sm text-secondary hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"
 					tabindex="-1"
@@ -89,7 +89,7 @@
 						<Icon
 							data={item.icon}
 							scale={0.6}
-							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-secondary'}"
 						/>
 					{/if}
 					{item.displayName}
@@ -98,7 +98,7 @@
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<span
 					class:bg-gray-200={item.disabled}
-					class="block font-semibold text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
+					class="block font-semibold text-left px-4 py-2 text-sm text-secondary cursor-auto"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
@@ -108,7 +108,7 @@
 						<Icon
 							data={item.icon}
 							scale={0.6}
-							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-secondary'}"
 						/>
 					{/if}
 					{item.displayName}
diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 57fe4974f3..67f15e5198 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -28,17 +28,6 @@
 	import { MonacoBinding } from 'y-monaco'
 	import { dbSchema } from '$lib/stores'
 
-	meditor.defineTheme('myTheme', {
-		base: 'vs',
-		inherit: true,
-		rules: [],
-		colors: {
-			'editorLineNumber.foreground': '#999',
-			'editorGutter.background': '#F9FAFB'
-		}
-	})
-	meditor.setTheme('myTheme')
-
 	import {
 		createHash as randomHash,
 		editorConfig,
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index e0534e7ffb..d20cef8574 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -411,7 +411,7 @@
 				<Button
 					title="Add context variable"
 					color="light"
-					btnClasses="!font-medium text-gray-600"
+					btnClasses="!font-medium text-scondary"
 					on:click={contextualVariablePicker.openDrawer}
 					size="xs"
 					spacingSize="md"
@@ -425,7 +425,7 @@
 				<Button
 					title="Add variable"
 					color="light"
-					btnClasses="!font-medium text-gray-600"
+					btnClasses="!font-medium text-scondary"
 					on:click={variablePicker.openDrawer}
 					size="xs"
 					spacingSize="md"
@@ -439,7 +439,7 @@
 			{#if showResourcePicker}
 				<Button
 					title="Add resource"
-					btnClasses="!font-medium text-gray-600"
+					btnClasses="!font-medium text-scondary"
 					size="xs"
 					spacingSize="md"
 					color="light"
@@ -454,7 +454,7 @@
 			{#if showResourceTypePicker}
 				<Button
 					title="Add resource"
-					btnClasses="!font-medium text-gray-600"
+					btnClasses="!font-medium text-scondary"
 					size="xs"
 					spacingSize="md"
 					color="light"
@@ -468,7 +468,7 @@
 
 			<Button
 				title="Reset Content"
-				btnClasses="!font-medium text-gray-600"
+				btnClasses="!font-medium text-scondary"
 				size="xs"
 				spacingSize="md"
 				color="light"
@@ -480,7 +480,7 @@
 			</Button>
 
 			<Button
-				btnClasses="!font-medium text-gray-600"
+				btnClasses="!font-medium text-scondary"
 				size="xs"
 				spacingSize="md"
 				color="light"
@@ -570,7 +570,7 @@
 	<div class="flex flex-row items-center gap-2">
 		{#if scriptPath}
 			<Button
-				btnClasses="!font-medium text-gray-600"
+				btnClasses="!font-medium text-scondary"
 				size="xs"
 				spacingSize="md"
 				color="light"
@@ -584,7 +584,7 @@
 		{/if}
 		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
 			<Button
-				btnClasses="!font-medium text-gray-600"
+				btnClasses="!font-medium text-scondary"
 				size="xs"
 				spacingSize="md"
 				color="light"
diff --git a/frontend/src/lib/components/EditorTheme.svelte b/frontend/src/lib/components/EditorTheme.svelte
new file mode 100644
index 0000000000..e2ddf22cd2
--- /dev/null
+++ b/frontend/src/lib/components/EditorTheme.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api'
+	import { onMount } from 'svelte'
+	import DarkModeObserver from './DarkModeObserver.svelte'
+	import github from 'svelte-highlight/styles/github'
+	import nord from 'svelte-highlight/styles/nord'
+
+	meditor.defineTheme('nord', {
+		base: 'vs-dark',
+		inherit: true,
+		rules: [
+			{
+				background: '2E3440',
+				token: ''
+			},
+			{
+				foreground: '616e88',
+				token: 'comment'
+			},
+			{
+				foreground: 'a3be8c',
+				token: 'string'
+			},
+			{
+				foreground: 'b48ead',
+				token: 'constant.numeric'
+			},
+			{
+				foreground: '81a1c1',
+				token: 'constant.language'
+			},
+			{
+				foreground: '81a1c1',
+				token: 'keyword'
+			},
+			{
+				foreground: '81a1c1',
+				token: 'storage'
+			},
+			{
+				foreground: '81a1c1',
+				token: 'storage.type'
+			},
+			{
+				foreground: '8fbcbb',
+				token: 'entity.name.class'
+			},
+			{
+				foreground: '8fbcbb',
+				fontStyle: '  bold',
+				token: 'entity.other.inherited-class'
+			},
+			{
+				foreground: '88c0d0',
+				token: 'entity.name.function'
+			},
+			{
+				foreground: '81a1c1',
+				token: 'entity.name.tag'
+			},
+			{
+				foreground: '8fbcbb',
+				token: 'entity.other.attribute-name'
+			},
+			{
+				foreground: '88c0d0',
+				token: 'support.function'
+			},
+			{
+				foreground: 'f8f8f0',
+				background: 'f92672',
+				token: 'invalid'
+			},
+			{
+				foreground: 'f8f8f0',
+				background: 'ae81ff',
+				token: 'invalid.deprecated'
+			},
+			{
+				foreground: 'b48ead',
+				token: 'constant.color.other.rgb-value'
+			},
+			{
+				foreground: 'ebcb8b',
+				token: 'constant.character.escape'
+			},
+			{
+				foreground: '8fbcbb',
+				token: 'variable.other.constant'
+			}
+		],
+		colors: {
+			'editor.foreground': '#D8DEE9',
+			'editor.background': '#2E3440',
+			'editor.selectionBackground': '#434C5ECC',
+			'editor.lineHighlightBackground': '#3B4252',
+			'editorCursor.foreground': '#D8DEE9',
+			'editorWhitespace.foreground': '#434C5ECC'
+		}
+	})
+
+	meditor.defineTheme('myTheme', {
+		base: 'vs',
+		inherit: true,
+		rules: [],
+		colors: {
+			'editorLineNumber.foreground': '#999',
+			'editorGutter.background': '#F9FAFB'
+		}
+	})
+
+	let darkMode: boolean = false
+
+	function onThemeChange() {
+		if (document.documentElement.classList.contains('dark')) {
+			meditor.setTheme('nord')
+			darkMode = true
+		} else {
+			meditor.setTheme('myTheme')
+			darkMode = false
+		}
+	}
+
+	onMount(() => {
+		onThemeChange()
+	})
+</script>
+
+<DarkModeObserver on:change={onThemeChange} />
+
+<svelte:head>
+	{#if darkMode}
+		{@html nord}
+	{:else}
+		{@html github}
+	{/if}
+</svelte:head>
diff --git a/frontend/src/lib/components/FieldHeader.svelte b/frontend/src/lib/components/FieldHeader.svelte
index 5ff5a96b26..39a4437538 100644
--- a/frontend/src/lib/components/FieldHeader.svelte
+++ b/frontend/src/lib/components/FieldHeader.svelte
@@ -25,11 +25,11 @@
 
 	{#if displayType}
 		{#if format && !format.startsWith('resource')}
-			<span class="text-xs italic ml-2 text-gray-500 dark:text-indigo-400">
+			<span class="text-xs italic ml-2 text-tertiary dark:text-indigo-400">
 				{format}
 			</span>
 		{:else}
-			<span class="text-xs italic ml-2 text-gray-500 dark:text-indigo-400">
+			<span class="text-xs italic ml-2 text-tertiary dark:text-indigo-400">
 				{type ?? 'any'}{contentEncoding && contentEncoding != ''
 					? `, encoding: ${contentEncoding}`
 					: ''}
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index a1edddcedd..6cca16ff6a 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -405,7 +405,7 @@
 						>
 							<Badge
 								color="gray"
-								class="center-center !bg-gray-300 !text-gray-600 !h-[28px]  !w-[70px] rounded-r-none"
+								class="center-center !bg-gray-300 !text-tertiary dark:!bg-gray-700 dark:!text-gray-300 !h-[28px]  !w-[70px] rounded-r-none"
 							>
 								<Pen size={12} class="mr-2" /> Path
 							</Badge>
diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte
index f47f4b07ca..03f44c1f05 100644
--- a/frontend/src/lib/components/FlowGraphViewer.svelte
+++ b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -71,9 +71,7 @@
 </Drawer>
 <div class="grid grid-cols-3 w-full h-full">
 	<div
-		class="{noSide
-			? 'col-span-3'
-			: 'sm:col-span-2 col-span-3'} w-full border border-gray-200 max-h-full"
+		class="{noSide ? 'col-span-3' : 'sm:col-span-2 col-span-3'} w-full border max-h-full"
 		class:overflow-auto={overflowAuto}
 	>
 		<FlowGraph
@@ -91,7 +89,7 @@
 		>
 			{#if stepDetail == undefined}
 				<div>
-					<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+					<p class="font-medium text-tertiary text-center pt-4 pb-8">
 						Click on a step to see its details
 					</p>
 					<h3 class="mb-2 font-semibold">Flow Inputs</h3>
@@ -100,10 +98,10 @@
 			{:else if stepDetail == 'Input'}
 				<SchemaViewer schema={flow?.schema} />
 			{:else if stepDetail == 'Result'}
-				<p class="font-medium text-gray-600 text-center pt-4 pb-8"> End of the flow </p>
+				<p class="font-medium text-tertiary text-center pt-4 pb-8"> End of the flow </p>
 			{:else if typeof stepDetail != 'string' && stepDetail.value}
 				<div class="">
-					<div class="sticky top-0 bg-white w-full flex items-center py-2">
+					<div class="sticky top-0 bg-surface w-full flex items-center py-2">
 						{#if stepDetail.id}
 							<Badge color="indigo">
 								{stepDetail.id}
@@ -141,7 +139,7 @@
 					{/if}
 				</div>
 				{#if stepDetail.value.type == 'identity'}
-					<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+					<p class="font-medium text-tertiary text-center pt-4 pb-8">
 						An identity step returns its inputs as outputs
 					</p>
 				{:else if stepDetail.value.type == 'rawscript'}
@@ -189,7 +187,7 @@
 					{/if}
 				{:else if stepDetail.value.type == 'forloopflow'}
 					<div>
-						<p class="font-medium text-gray-600 pb-2"> Iterator expression: </p>
+						<p class="font-medium text-tertiary pb-2"> Iterator expression: </p>
 						{#if stepDetail.value.iterator.type == 'static'}
 							<ObjectViewer json={stepDetail.value.iterator.value} />
 						{:else}
@@ -199,18 +197,18 @@
 						{/if}
 					</div>
 				{:else if stepDetail.value.type == 'branchall'}
-					<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+					<p class="font-medium text-tertiary text-center pt-4 pb-8">
 						All branches will run, regardless of the inputs
 					</p>
 				{:else if stepDetail.value.type == 'branchone'}
-					<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+					<p class="font-medium text-tertiary text-center pt-4 pb-8">
 						Only one branch will run based on a predicate
 					</p>
 				{:else if stepDetail.value.type == 'flow'}
 					<FlowPathViewer noSide path={stepDetail.value.path} />
 				{/if}
 			{:else}
-				<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+				<p class="font-medium text-tertiary text-center pt-4 pb-8">
 					Step {stepDetail} selected
 				</p>
 			{/if}
diff --git a/frontend/src/lib/components/FlowJobResult.svelte b/frontend/src/lib/components/FlowJobResult.svelte
index 8c40e51e6c..58219d727a 100644
--- a/frontend/src/lib/components/FlowJobResult.svelte
+++ b/frontend/src/lib/components/FlowJobResult.svelte
@@ -17,8 +17,8 @@
 	class:border={!noBorder}
 	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow border-gray-400 h-full max-h-screen"
 >
-	<div class="bg-white {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
-		<span class="text-gray-500">Result</span>
+	<div class="bg-surface {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
+		<span class="text-tertiary">Result</span>
 		{#if result}
 			<DisplayResult {workspaceId} {jobId} {filename} {result} />
 		{:else if loading}
diff --git a/frontend/src/lib/components/FlowMetadata.svelte b/frontend/src/lib/components/FlowMetadata.svelte
index 85ba65ab9a..a807081103 100644
--- a/frontend/src/lib/components/FlowMetadata.svelte
+++ b/frontend/src/lib/components/FlowMetadata.svelte
@@ -34,24 +34,26 @@
 
 <ScheduleEditor bind:this={scheduleEditor} />
 
-<div class="rounded-md p-3 bg-gray-50 shadow-sm sm:text-sm md:text-base" style="min-height: 150px;">
+<div
+	class="rounded-md p-3 bg-surface-secondary shadow-sm sm:text-sm md:text-base"
+	style="min-height: 150px;"
+>
 	<JobStatus {job} />
 	<div>
-		<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
-			class="mx-2 text-2xs text-gray-600"
-		>
+		<Icon class="text-secondary" data={faClock} scale={SMALL_ICON_SCALE} />
+		<span class="mx-2 text-2xs text-secondary">
 			{#if job['success'] != undefined}
 				Received job: {displayDate(job.created_at ?? '')}
 			{:else}
 				{#key time}
 					Received job {displayDaysAgo(job.created_at ?? '')}
 				{/key}
-			{/if}</span
-		>
+			{/if}
+		</span>
 	</div>
 	{#if job && 'started_at' in job && job.started_at}
 		<div>
-			<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+			<Icon class="text-secondary" data={faClock} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 				{#if job['success'] != undefined}
 					Started: {displayDate(job.started_at ?? '')}
 				{:else}
@@ -63,7 +65,7 @@
 	{/if}
 	{#if job && job['mem_peak']}
 		<div>
-			<Icon class="text-gray-700" data={faMemory} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+			<Icon class="text-secondary" data={faMemory} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 				Mem peak: {(job['mem_peak'] / 1024).toPrecision(5)}MB</span
 			>
 		</div>
@@ -71,18 +73,18 @@
 	<div>
 		{#if job && job.parent_job}
 			{#if job.is_flow_step}
-				<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
+				<Icon class="text-secondary" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
 					class="mx-2"
 				>
 					Step of flow <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
 				>
 			{:else}
-				<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+				<Icon class="text-secondary" data={faRobot} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 					Triggered by parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
 				>
 			{/if}
 		{:else if job && job.schedule_path}
-			<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
+			<Icon class="text-secondary" data={faCalendar} scale={SMALL_ICON_SCALE} />
 			<span
 				>Triggered by the schedule: <button
 					class="break-words text-sm text-blue-600 font-normal"
@@ -97,21 +99,21 @@
 			{@const isScript = job?.job_kind === 'script'}
 			{@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
 			<div>
-				<Icon class="text-gray-700" data={faScroll} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+				<Icon class="text-secondary" data={faScroll} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 					<a href={viewHref}>{isScript ? job?.script_hash : job?.script_path}</a>
 				</span>
 			</div>
 		{/if}
 
 		<div>
-			<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+			<Icon class="text-secondary" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 				By {job.created_by}
 				{#if job.permissioned_as !== `u/${job.created_by}` && job.permissioned_as != job.created_by}but
 					permissioned as {job.permissioned_as}{/if}
 			</span>
 		</div>
 	</div>
-	<div class="text-gray-700 text-2xs pt-2">
+	<div class="text-secondary text-2xs pt-2">
 		run id: <a href={`/run/${job.id}?workspace=${job.workspace_id}`}>{job.id}</a>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index 65c5325ad0..4361dc4e0d 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -112,14 +112,14 @@
 	</DrawerContent>
 </Drawer>
 
-<div class="flex divide-y flex-col space-y-2 h-screen bg-white px-6 py-2 w-full">
+<div class="flex divide-y flex-col space-y-2 h-screen bg-surface px-6 py-2 w-full">
 	<div class="flex flex-row justify-between w-full items-center gap-x-2">
 		<div class="w-8">
 			<button
 				on:click={() => dispatch('close')}
-				class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
+				class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
 			>
-				<Icon data={faClose} class="text-gray-500" />
+				<Icon data={faClose} class="text-secondary" />
 			</button>
 		</div>
 
@@ -194,7 +194,7 @@
 			{#if jobId}
 				<FlowStatusViewer bind:flowState={$flowStateStore} {jobId} bind:job />
 			{:else}
-				<div class="italic text-gray-500 h-full grow"> Flow status will be displayed here </div>
+				<div class="italic text-tertiary h-full grow"> Flow status will be displayed here </div>
 			{/if}
 		</div>
 	</div>
diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index 6185c9e2b3..8a92c63127 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -204,16 +204,16 @@
 {#if job}
 	<div class="flow-root w-full space-y-4">
 		{#if innerModules.length > 0}
-			<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
+			<h3 class="text-md leading-6 font-bold text-primay border-b pb-2">Flow result</h3>
 		{/if}
 		{#if isListJob}
 			{#if render}
-				<div class="w-full h-full border border-gray-600 bg-white p-1">
+				<div class="w-full h-full border border-gray-600 bg-surface p-1">
 					<DisplayResult workspaceId={job?.workspace_id} {jobId} result={jobResults} />
 				</div>
 			{/if}
 		{:else if render}
-			<div class={innerModules.length > 0 ? 'border border-gray-400 shadow p-2' : ''}>
+			<div class={innerModules.length > 0 ? 'border rounded-md shadow p-2' : ''}>
 				<FlowPreviewStatus {job} />
 				{#if `result` in job}
 					<div class="w-full h-full">
@@ -240,7 +240,7 @@
 								<div
 									><span class="inline-flex gap-1"
 										><Badge color="indigo">{mod.id}</Badge>
-										<span class="font-medium text-gray-900">
+										<span class="font-medium text-primary">
 											{#if !emptyString(rawMod?.summary)}
 												{rawMod?.summary ?? ''}
 											{:else if rawMod?.value.type == 'script'}
@@ -269,7 +269,7 @@
 		{/if}
 		<div class={selected == 'graph' ? 'hidden' : ''}>
 			{#if isListJob}
-				<h3 class="text-md leading-6 font-bold text-gray-600 border-b mb-4">
+				<h3 class="text-md leading-6 font-bold text-tertiary border-b mb-4">
 					Embedded flows: ({flowJobIds?.flowJobs.length} items)
 				</h3>
 				{#each flowJobIds?.flowJobs ?? [] as loopJobId, j}
@@ -352,23 +352,23 @@
 				{/each}
 			{:else if innerModules.length > 0}
 				<ul class="w-full">
-					<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4 py-2">
+					<h3 class="text-md leading-6 font-bold text-primary border-b mb-4 py-2">
 						Step-by-step results
 					</h3>
 
 					{#each innerModules as mod, i}
 						{#if render}
 							<div class="line w-8 h-10" />
-							<h3 class="text-gray-500 mb-2 w-full">
+							<h3 class="text-tertiary mb-2 w-full">
 								{#if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length}
 									Step
-									<span class="font-medium text-gray-900">
+									<span class="font-medium text-primary">
 										{i + 1}
 									</span>
 									out of
-									<span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
+									<span class="font-medium text-primary">{job?.raw_flow?.modules.length}</span>
 									{#if job.raw_flow?.modules[i]?.summary}
-										: <span class="font-medium text-gray-900">
+										: <span class="font-medium text-primary">
 											{job.raw_flow?.modules[i]?.summary ?? ''}
 										</span>
 									{/if}
@@ -378,7 +378,7 @@
 							</h3>
 							<div class="line w-8 h-10" />
 						{/if}
-						<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
+						<li class="w-full border p-6 space-y-2 bg-blue-50/50 dark:bg-frost-900/50">
 							{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 								{#if job.raw_flow?.modules[i]?.value.type == 'flow'}
 									<svelte:self
@@ -422,8 +422,8 @@
 	{#if render}
 		{#if job.raw_flow && !isListJob}
 			<div class="{selected != 'graph' ? 'hidden' : ''} mt-4">
-				<div class="grid grid-cols-3 border border-gray-300">
-					<div class="col-span-2 bg-gray-50">
+				<div class="grid grid-cols-3 border">
+					<div class="col-span-2 bg-surface-secondary">
 						<div class="flex flex-col">
 							{#each Object.values(retry_status) as count}
 								<span class="text-sm">
@@ -484,7 +484,7 @@
 									<ModuleStatus type={node.type} scheduled_for={node['scheduled_for']} />
 									{#if node.job_id}
 										<div class="truncate"
-											><div class=" text-gray-900 whitespace-nowrap truncate">
+											><div class=" text-primary whitespace-nowrap truncate">
 												<span class="font-bold">Job Id</span>
 												<a
 													rel="noreferrer"
@@ -511,12 +511,12 @@
 									logs={node.logs ?? ''}
 								/>
 							{:else}
-								<p class="p-2 text-gray-600 italic"
+								<p class="p-2 text-tertiary italic"
 									>The execution of this node has no information attached to it. The job likely did
 									not run yet</p
 								>
 							{/if}
-						{:else}<p class="p-2 text-gray-600 italic">Select a node to see its details here</p
+						{:else}<p class="p-2 text-tertiary italic">Select a node to see its details here</p
 							>{/if}
 					</div>
 				</div>
diff --git a/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte b/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
index 9ae44d6b79..8c322df5c7 100644
--- a/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
+++ b/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
@@ -28,7 +28,7 @@
 	}
 </script>
 
-<div class="w-full h-full mt-2 text-sm text-gray-600">
+<div class="w-full h-full mt-2 text-sm text-tertiary">
 	<p>Waiting to be resumed</p>
 	<div>
 		{#if is_owner}
diff --git a/frontend/src/lib/components/FlowViewer.svelte b/frontend/src/lib/components/FlowViewer.svelte
index 31d7fcc6dc..c261ac3c91 100644
--- a/frontend/src/lib/components/FlowViewer.svelte
+++ b/frontend/src/lib/components/FlowViewer.svelte
@@ -86,7 +86,7 @@
 						{/each}
 					</ul>
 				{:else}
-					<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
+					<div class="text-secondary text-xs italic mb-4">No inputs</div>
 				{/if}
 				<FlowGraphViewer download {noSide} {flow} overflowAuto />
 			</div>
diff --git a/frontend/src/lib/components/FolderEditor.svelte b/frontend/src/lib/components/FolderEditor.svelte
index a07af51eb5..2b0246a73e 100644
--- a/frontend/src/lib/components/FolderEditor.svelte
+++ b/frontend/src/lib/components/FolderEditor.svelte
@@ -147,7 +147,7 @@
 	<h2>Permissions ({perms?.length ?? 0})</h2>
 	{#if can_write}
 		<Alert role="info" title="New permissions may take up to 60s to apply"
-			><span class="text-xs text-gray-500">Due to permissions cache invalidation</span></Alert
+			><span class="text-xs text-tertiary">Due to permissions cache invalidation</span></Alert
 		>
 		<div class="flex items-center gap-1">
 			<div>
@@ -341,7 +341,7 @@
 			</div>
 		{/if} -->
 		<!-- {#if managing_folders.length == 0}
-			<p class="text-gray-600 text-sm">No folder is managing this folder</p>
+			<p class="text-tertiary text-sm">No folder is managing this folder</p>
 		{:else}
 			<TableCustom>
 				<tr slot="header-row">
diff --git a/frontend/src/lib/components/FolderInfo.svelte b/frontend/src/lib/components/FolderInfo.svelte
index e00e68ce37..9259b6eb21 100644
--- a/frontend/src/lib/components/FolderInfo.svelte
+++ b/frontend/src/lib/components/FolderInfo.svelte
@@ -6,9 +6,9 @@
 
 <Popover
 	><div class="inline-flex gap-1 items-end"
-		><span class="text-gray-500 text-xs mb-0.5">({members.length})</span>
+		><span class="text-tertiary text-xs mb-0.5">({members.length})</span>
 		<div class="max-w-xs truncate"
-			><span class="text-gray-600 text-xs ">{members?.join(', ')}</span></div
+			><span class="text-tertiary text-xs">{members?.join(', ')}</span></div
 		></div
 	>
 	<span slot="text">{members?.join(', ')}</span></Popover
diff --git a/frontend/src/lib/components/FolderUsageInfo.svelte b/frontend/src/lib/components/FolderUsageInfo.svelte
index f2f57030d9..ed62fad611 100644
--- a/frontend/src/lib/components/FolderUsageInfo.svelte
+++ b/frontend/src/lib/components/FolderUsageInfo.svelte
@@ -22,7 +22,7 @@
 		</td>
 	{/each}
 {:else}
-	<div class="flex flex-col text-xs text-gray-600">
+	<div class="flex flex-col text-xs text-tertiary">
 		{#each Object.entries(usage) as [k, v]}
 			<div>
 				{k}: {v}
diff --git a/frontend/src/lib/components/GroupEditor.svelte b/frontend/src/lib/components/GroupEditor.svelte
index 14490177a3..191a9a87c9 100644
--- a/frontend/src/lib/components/GroupEditor.svelte
+++ b/frontend/src/lib/components/GroupEditor.svelte
@@ -295,7 +295,7 @@
 			</div>
 		{/if}
 		{#if managing_groups.length == 0}
-			<p class="text-gray-600 text-sm">No group is managing this group</p>
+			<p class="text-tertiary text-sm">No group is managing this group</p>
 		{:else}
 			<TableCustom>
 				<tr slot="header-row">
diff --git a/frontend/src/lib/components/GroupInfo.svelte b/frontend/src/lib/components/GroupInfo.svelte
index de79f23720..75a443cd04 100644
--- a/frontend/src/lib/components/GroupInfo.svelte
+++ b/frontend/src/lib/components/GroupInfo.svelte
@@ -17,9 +17,9 @@
 {#if members}
 	<Popover
 		><div class="inline-flex gap-1 items-end"
-			><span class="text-gray-500 text-xs mb-0.5">({members.length})</span>
+			><span class="text-tertiary text-xs mb-0.5">({members.length})</span>
 			<div class="max-w-xs truncate"
-				><span class="text-gray-600 text-xs ">{members?.join(', ')}</span></div
+				><span class="text-tertiary text-xs">{members?.join(', ')}</span></div
 			></div
 		>
 		<span slot="text">{members?.join(', ')}</span></Popover
diff --git a/frontend/src/lib/components/IconedResourceType.svelte b/frontend/src/lib/components/IconedResourceType.svelte
index 4d2abf6f80..4d2b5d1da3 100644
--- a/frontend/src/lib/components/IconedResourceType.svelte
+++ b/frontend/src/lib/components/IconedResourceType.svelte
@@ -16,7 +16,7 @@
 		{name}
 	{/if}
 	{#if iconComponent}
-		<span class="text-gray-700 grayscale">
+		<span class="text-secondary grayscale">
 			<svelte:component this={iconComponent} {height} {width} />
 		</span>
 	{:else}
diff --git a/frontend/src/lib/components/InlineCodeCopy.svelte b/frontend/src/lib/components/InlineCodeCopy.svelte
index ccb5146d02..0600ab598c 100644
--- a/frontend/src/lib/components/InlineCodeCopy.svelte
+++ b/frontend/src/lib/components/InlineCodeCopy.svelte
@@ -7,7 +7,8 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<pre class="bg-gray-700 text-gray-100 p-2 font-mono text-sm whitespace-pre-wrap my-2 rounded-md"
+<pre
+	class="bg-surface-secondary text-secondary p-2 font-mono text-sm whitespace-pre-wrap my-2 rounded-md"
 	>{content} <span on:click={() => copyToClipboard(content)} class="cursor-pointer ml-2"
 		><Icon data={faClipboard} /></span
 	></pre
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 5362d5fcac..8c609d56d3 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -208,24 +208,20 @@
 							<ToggleButton
 								tooltip={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
 								light
-								position="left"
 								value="static"
 								size="xs2"
-								small
 								label={'${}'}
 							/>
 						{:else}
-							<ToggleButton small label="Static" position="left" value="static" size="xs2" />
+							<ToggleButton small label="Static" value="static" />
 						{/if}
 
 						<ToggleButton
 							small
 							light
 							tooltip="Javascript expression ('flow_input' or 'results')."
-							position="right"
 							value="javascript"
 							icon={Code}
-							size="xs2"
 						/>
 					</ToggleButtonGroup>
 				</div>
diff --git a/frontend/src/lib/components/InputTransformSchemaForm.svelte b/frontend/src/lib/components/InputTransformSchemaForm.svelte
index 5eabf98622..553e4d01bf 100644
--- a/frontend/src/lib/components/InputTransformSchemaForm.svelte
+++ b/frontend/src/lib/components/InputTransformSchemaForm.svelte
@@ -78,7 +78,7 @@
 			{/if}
 		{/each}
 	{:else}
-		<div class="text-gray-500 text-sm">No inputs</div>
+		<div class="text-tertiary text-sm">No inputs</div>
 	{/if}
 </div>
 
@@ -99,7 +99,7 @@
 >
 	<div
 		slot="submission"
-		class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+		class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
 	>
 		<Button
 			variant="border"
diff --git a/frontend/src/lib/components/InputTransformsViewer.svelte b/frontend/src/lib/components/InputTransformsViewer.svelte
index b4c00b5732..2d79eac2eb 100644
--- a/frontend/src/lib/components/InputTransformsViewer.svelte
+++ b/frontend/src/lib/components/InputTransformsViewer.svelte
@@ -11,7 +11,7 @@
 	<ul class="mb-1">
 		{#each entries as [key, val]}
 			<li class="flex pb-2 last:pb-0">
-				<span class="font-black text-gray-700 text-xs">{key}:</span>
+				<span class="font-black text-secondary text-xs">{key}:</span>
 				{#if val.type == 'static'}
 					{#if typeof val.value == 'object'}
 						<ObjectViewer json={val.value} />
@@ -29,5 +29,5 @@
 		{/each}
 	</ul>
 {:else}
-	<div class="text-gray-600 text-sm"> No inputs </div>
+	<div class="text-tertiary text-sm"> No inputs </div>
 {/if}
diff --git a/frontend/src/lib/components/InviteGlobalUser.svelte b/frontend/src/lib/components/InviteGlobalUser.svelte
index 00dc946a25..eb369d70b8 100644
--- a/frontend/src/lib/components/InviteGlobalUser.svelte
+++ b/frontend/src/lib/components/InviteGlobalUser.svelte
@@ -33,11 +33,11 @@
 
 <div class="flex flex-row gap-2 mb-2 items-end">
 	<label class="block shrink min-w-0">
-		<span class="text-gray-700 text-sm">Email</span>
+		<span class="text-secondary text-sm">Email</span>
 		<input type="email" placeholder="email" bind:value={$globalEmailInvite} />
 	</label>
 	<label class="block shrink min-w-0">
-		<span class="text-gray-700 text-sm">Password</span>
+		<span class="text-secondary text-sm">Password</span>
 		<input bind:value={password} />
 	</label>
 
@@ -63,5 +63,5 @@
 	<div>
 		<input type="text" placeholder="company (optional)" bind:value={company} />
 	</div>
-	<div class="text-xs text-gray-600 grow text-right"> Email will be sent if SMTP configured </div>
+	<div class="text-xs text-tertiary grow text-right"> Email will be sent if SMTP configured </div>
 </div>
diff --git a/frontend/src/lib/components/ItemPicker.svelte b/frontend/src/lib/components/ItemPicker.svelte
index 3a7e5f8f3e..e97079272c 100644
--- a/frontend/src/lib/components/ItemPicker.svelte
+++ b/frontend/src/lib/components/ItemPicker.svelte
@@ -50,7 +50,13 @@
 />
 
 <Drawer bind:this={drawer} size="600px">
-	<DrawerContent {tooltip} {documentationLink} overflow_y={false} title="Search {itemName}s" on:close={drawer.closeDrawer}>
+	<DrawerContent
+		{tooltip}
+		{documentationLink}
+		overflow_y={false}
+		title="Search {itemName}s"
+		on:close={drawer.closeDrawer}
+	>
 		<div class="w-full h-full flex flex-col">
 			<div class="w-12/12 pb-4">
 				<input
@@ -65,20 +71,20 @@
 					<Skeleton layout={[[2], 0.7]} />
 				{/each}
 			{:else if !items?.length}
-				<div class="text-center text-sm text-gray-600 mt-2">
+				<div class="text-center text-sm text-tertiary mt-2">
 					{@html noItemMessage}
 				</div>
 			{:else if filteredItems?.length}
-				<div class="border rounded-md divide-y divide-gray-200 w-full overflow-auto pb-12 grow">
+				<div class="border rounded-md divide-y w-full overflow-auto pb-12 grow">
 					{#each filteredItems as obj}
 						<div
-							class="hover:bg-gray-50 w-full flex items-center p-4 gap-4 first-of-type:!border-t-0 
+							class="hover:bg-surface-hover w-full flex items-center p-4 gap-4 first-of-type:!border-t-0
 						first-of-type:rounded-t-md last-of-type:rounded-b-md"
 						>
 							<div class="inline-flex items-center grow">
 								<button
 									class="py-2 px-1 gap-1 flex grow border-gray-300 border-opacity-0
-									 text-black"
+									 text-primary"
 									on:click={() => {
 										if (closeOnClick) {
 											drawer.closeDrawer()
@@ -87,12 +93,12 @@
 									}}
 								>
 									{#if `app` in obj}
-										<div class="mr-2 text-sm text-left center-center  w-30">
+										<div class="mr-2 text-sm text-left center-center w-30">
 											<IconedResourceType after={true} silent={false} name={obj['app']} />
 										</div>
 									{/if}
 									{#if `resource_type` in obj}
-										<div class="mr-2  text-left w-30  center-center  text-sm">
+										<div class="mr-2 text-left w-30 center-center text-sm">
 											<IconedResourceType after={true} name={obj['resource_type']} />
 										</div>
 									{/if}
diff --git a/frontend/src/lib/components/JobArgs.svelte b/frontend/src/lib/components/JobArgs.svelte
index 89ab418d6c..9b1fcdcaf5 100644
--- a/frontend/src/lib/components/JobArgs.svelte
+++ b/frontend/src/lib/components/JobArgs.svelte
@@ -46,7 +46,7 @@ ${Object.entries(args)
 </script>
 
 <div class="relative">
-	<div class="text-gray-500 text-xs absolute top-8 right-0">
+	<div class="text-tertiary text-xs absolute top-8 right-0">
 		<button
 			on:click={() => {
 				jsonStr = JSON.stringify(args, null, 4)
@@ -68,7 +68,7 @@ ${Object.entries(args)
 					</tr>
 				{/each}
 			{:else if args}
-				<tr><div class="text-gray-600 pt-2 pl-1 text-sm">No arguments</div></tr>
+				<tr><div class="text-secondary pt-2 pl-1 text-sm">No arguments</div></tr>
 			{:else}
 				<tr>
 					<td>
@@ -88,7 +88,7 @@ ${Object.entries(args)
 		<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
 			<svelte:fragment slot="actions">
 				<a
-					class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+					class="text-sm text-secondary mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-surface-hover rounded-lg"
 					download="windmill-args.json"
 					href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}"
 					>Download <Download size={14} /></a
@@ -101,7 +101,7 @@ ${Object.entries(args)
 				</Button>
 			</svelte:fragment>
 			{#if jsonStr.length > 100000}
-				<div class="text-sm mb-2 text-gray-600">
+				<div class="text-sm mb-2 text-tertiary">
 					<a
 						download="windmill-args.json"
 						href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
diff --git a/frontend/src/lib/components/LightweightArgInput.svelte b/frontend/src/lib/components/LightweightArgInput.svelte
index e6ca392307..70a8ac63a4 100644
--- a/frontend/src/lib/components/LightweightArgInput.svelte
+++ b/frontend/src/lib/components/LightweightArgInput.svelte
@@ -238,7 +238,7 @@
 								{/if}
 								<button
 									transition:fade|local={{ duration: 100 }}
-									class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 ml-2"
+									class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
 									aria-label="Clear"
 									on:click={() => {
 										value = value.filter((el) => el != v)
@@ -352,7 +352,7 @@
 			<slot name="actions" />
 		</div>
 		{#if error && error != ''}
-			<div class="text-right text-xs text-red-600">
+			<div class="text-right text-xs text-red-600 dark:text-red-400">
 				{#if error === ''}
 					&nbsp;
 				{:else}
diff --git a/frontend/src/lib/components/LogViewer.svelte b/frontend/src/lib/components/LogViewer.svelte
index 995df88a6d..d7145b4179 100644
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/frontend/src/lib/components/LogViewer.svelte
@@ -35,7 +35,7 @@
 	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
 		<svelte:fragment slot="actions">
 			<a
-				class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+				class="text-sm text-secondary mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-surface-hover rounded-lg"
 				download="windmill-logs.json"
 				href="/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}">Download <Download size={14} /></a
 			>
@@ -44,7 +44,7 @@
 			</Button>
 		</svelte:fragment>
 		<div>
-			<pre class="bg-gray-50 text-xs w-full p-2"
+			<pre class="bg-surface-secondary text-secondary text-xs w-full p-2"
 				>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
 			>
 		</div>
@@ -65,12 +65,12 @@
 		{#if isLoading}
 			<Loader2 class="animate-spin absolute top-2 left-2" />
 		{:else if duration}
-			<span class="absolute text-xs text-gray-500 dark:text-gray-400 top-2 left-2"
+			<span class="absolute text-xs text-tertiary dark:text-gray-400 top-2 left-2"
 				>took {duration}ms</span
 			>
 		{/if}
 		{#if mem}
-			<span class="absolute text-xs text-gray-500 dark:text-gray-400 top-2 left-36"
+			<span class="absolute text-xs text-tertiary dark:text-gray-400 top-2 left-36"
 				>mem peak: {(mem / 1024).toPrecision(4)}MB</span
 			>
 		{/if}
diff --git a/frontend/src/lib/components/LoginPageHeader.svelte b/frontend/src/lib/components/LoginPageHeader.svelte
new file mode 100644
index 0000000000..d841f48aa1
--- /dev/null
+++ b/frontend/src/lib/components/LoginPageHeader.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Uptodate from './Uptodate.svelte'
+	import Version from './Version.svelte'
+	import DarkModeToggle from './sidebar/DarkModeToggle.svelte'
+</script>
+
+<div class="absolute top-0 right-0 text-2xs text-gray-800 italic px-3 py-1">
+	<div class="flex flex-row gap-2">
+		<DarkModeToggle forcedDarkMode={false} />
+
+		<div class="font-mono flex-col flex p-2 justify-center">
+			<Version />
+			<Uptodate />
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index f7154e61f9..775ea7ec08 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -40,7 +40,7 @@
 			class="fixed right-0 top-0 flex flex-col w-3/4 sm:w-2/3 lg:w-1/2 h-screen border border-gray-300 shadow-xl"
 		>
 			{#if open}
-				<div class="flex flex-row justify-between p-2 bg-white border-b border-gray-200">
+				<div class="flex flex-row justify-between p-2 bg-surface border-b border-gray-200">
 					<button
 						on:click={() => {
 							open = false
@@ -68,7 +68,7 @@
 				<div class="flex flex-col bg-gray-50 pt-3 px-6 grow overflow-y-auto">
 					<slot name="content" />
 				</div>
-				<div class="flex flex-col bg-white border-gray-200 p-2">
+				<div class="flex flex-col bg-surface border-gray-200 p-2">
 					<div class="flex flex-row justify-between p-2">
 						<button
 							on:click={() => {
diff --git a/frontend/src/lib/components/ModulePreview.svelte b/frontend/src/lib/components/ModulePreview.svelte
index cd0854ade1..37425f6f2b 100644
--- a/frontend/src/lib/components/ModulePreview.svelte
+++ b/frontend/src/lib/components/ModulePreview.svelte
@@ -114,7 +114,7 @@
 					isLoading={testIsLoading}
 				/>
 			</Pane>
-			<Pane size={50} minSize={10} class="text-sm text-gray-600">
+			<Pane size={50} minSize={10} class="text-sm text-tertiary">
 				{#if testJob != undefined && 'result' in testJob && testJob.result != undefined}
 					<pre class="overflow-x-auto break-words relative h-full px-2">
 						<DisplayResult
diff --git a/frontend/src/lib/components/ModuleStatus.svelte b/frontend/src/lib/components/ModuleStatus.svelte
index be8fee2415..40a030aa39 100644
--- a/frontend/src/lib/components/ModuleStatus.svelte
+++ b/frontend/src/lib/components/ModuleStatus.svelte
@@ -14,12 +14,12 @@
 		Waiting to be resumed by resume events such as approvals
 	</span>
 {:else if type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
-	<span class="italic text-gray-600">
+	<span class="italic text-tertiary">
 		<Icon data={faHourglassHalf} class="mr-2" />
 		Waiting for prior steps to complete
 	</span>
 {:else if type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
-	<span class="italic text-gray-600">
+	<span class="italic text-tertiary">
 		<Icon data={faHourglassHalf} class="mr-2" />
 		{#if scheduled_for}
 			Job has been {scheduled_for} and will be executed after that time
diff --git a/frontend/src/lib/components/MoveDrawer.svelte b/frontend/src/lib/components/MoveDrawer.svelte
index 26eceaffc0..a55f240ea1 100644
--- a/frontend/src/lib/components/MoveDrawer.svelte
+++ b/frontend/src/lib/components/MoveDrawer.svelte
@@ -96,9 +96,9 @@
 <Drawer bind:this={drawer}>
 	<DrawerContent title="Move/Rename {initialPath}" on:close={drawer.closeDrawer}>
 		{#if !own}
-			<Alert type="warning" title="Not owner"
-				>Since you do not own this item, you cannot move this item (you can however fork it)</Alert
-			>
+			<Alert type="warning" title="Not owner">
+				Since you do not own this item, you cannot move this item (you can however fork it)
+			</Alert>
 		{/if}
 		<h2 class="border-b pb-1 mt-2 mb-4">Summary</h2>
 		<input
diff --git a/frontend/src/lib/components/Password.svelte b/frontend/src/lib/components/Password.svelte
index 7632efe8b6..ddefd2365c 100644
--- a/frontend/src/lib/components/Password.svelte
+++ b/frontend/src/lib/components/Password.svelte
@@ -32,7 +32,7 @@
 	<div class="absolute inset-y-0 right-0 flex items-center px-2">
 		<input class="!hidden js-password-toggle" id="toggle" type="checkbox" />
 		<label
-			class="bg-gray-300 hover:bg-gray-400 rounded px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label"
+			class="bg-gray-300 hover:bg-gray-400 rounded px-2 py-1 text-sm text-tertiary font-mono cursor-pointer js-password-label"
 			for="toggle">show</label
 		>
 	</div>
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index f787a396c0..6b94790c75 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -279,7 +279,7 @@
 			<div class="flex gap-x-4 shrink">
 				<!-- svelte-ignore a11y-label-has-associated-control -->
 				<label class="block">
-					<span class="text-gray-700 text-sm whitespace-nowrap">&nbsp;</span>
+					<span class="text-secondary text-sm whitespace-nowrap">&nbsp;</span>
 
 					<ToggleButtonGroup
 						class="mt-0.5"
@@ -320,7 +320,7 @@
 				</label>
 				{#if meta.ownerKind === 'user'}
 					<label class="block shrink min-w-0">
-						<span class="text-gray-700 text-sm">User</span>
+						<span class="text-secondary text-sm">User</span>
 						<input
 							class="!w-36"
 							type="text"
@@ -331,13 +331,15 @@
 					</label>
 				{:else if meta.ownerKind === 'folder'}
 					<label class="block grow w-48">
-						<span class="text-gray-700 text-sm"
-							>Folder <Tooltip
+						<span class="text-secondary text-sm">
+							Folder
+							<Tooltip
 								documentationLink="https://www.windmill.dev/docs/core_concepts/groups_and_folders"
-								>Read and write permissions are given to groups and users at the folder level and
-								shared by all items inside the folder.</Tooltip
-							></span
-						>
+							>
+								Read and write permissions are given to groups and users at the folder level and
+								shared by all items inside the folder.
+							</Tooltip>
+						</span>
 
 						<div class="flex flex-row items-center gap-1 w-full">
 							<select class="grow w-full" {disabled} bind:value={meta.owner}>
@@ -375,7 +377,7 @@
 				{/if}
 			</div>
 			<label class="block grow w-full max-w-md">
-				<span class="text-gray-700 text-sm">
+				<span class="text-secondary text-sm">
 					Name
 					<Required required={true} />
 				</span>
@@ -402,7 +404,7 @@
 		<div class="flex justify-start w-full">
 			<Badge
 				color="gray"
-				class="center-center !bg-gray-300 !text-gray-600 !w-[70px] !h-[24px] rounded-r-none"
+				class="center-center !bg-surface-secondary !text-tertiary !w-[70px] !h-[24px] rounded-r-none border"
 			>
 				Full path
 			</Badge>
@@ -418,7 +420,7 @@
 			/>
 			<!-- <span class="font-mono text-sm break-all">{path}</span> -->
 		</div>
-		<div class="text-red-600 text-2xs">{error}</div>
+		<div class="text-red-600 dark:text-red-400 text-2xs">{error}</div>
 	</div>
 </div>
 
diff --git a/frontend/src/lib/components/Required.svelte b/frontend/src/lib/components/Required.svelte
index ef7c980ff1..c6e5a1427a 100644
--- a/frontend/src/lib/components/Required.svelte
+++ b/frontend/src/lib/components/Required.svelte
@@ -6,7 +6,7 @@
 {#if required}
 	<span class="text-red-500 dark:text-red-400 text-sm font-normal {$$props.class}">*</span>
 {:else if detail || detail != ''}
-	<span class="text-sm text-gray-500 ml-2 font-normal {$$props.class}"
+	<span class="text-sm text-tertiary ml-2 font-normal {$$props.class}"
 		>({detail != '' ? `${detail}` : ''})</span
 	>
 {/if}
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index 2e6b538448..8e1a273d5a 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -133,13 +133,13 @@
 		on:close={drawer.closeDrawer}
 	>
 		<div>
-			<div class="flex flex-col gap-3 py-3 text-gray-700">
+			<div class="flex flex-col gap-3 py-3">
 				<div>
 					{#if !can_write}
 						<div class="m-2">
-							<Alert type="warning" title="Only read access"
-								>You only have read access to this resource and cannot edit it</Alert
-							>
+							<Alert type="warning" title="Only read access">
+								You only have read access to this resource and cannot edit it
+							</Alert>
 						</div>
 					{/if}
 					<Path
@@ -175,10 +175,10 @@
 						<input type="text" disabled value={rawCode} />
 					{:else}
 						{#if !viewJsonSchema}
-							<p class="italic text-gray-500 text-xs mb-4"
-								>No corresponding resource type found in your workspace for {selectedResourceType}.
-								Define the value in JSON directly</p
-							>
+							<p class="italic text-secondary text-xs mb-4">
+								No corresponding resource type found in your workspace for {selectedResourceType}.
+								Define the value in JSON directly
+							</p>
 						{/if}
 
 						{#if !emptyString(jsonError)}<span
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index f59e7ca78b..a7d9b33ddf 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -2,7 +2,7 @@
 	import { ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { faPen, faPlus, faRotateRight } from '@fortawesome/free-solid-svg-icons'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, onMount } from 'svelte'
 	import Icon from 'svelte-awesome'
 	import Select from './apps/svelte-select/lib/index'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
@@ -10,6 +10,7 @@
 	import { Button } from './common'
 	import ResourceEditor from './ResourceEditor.svelte'
 	import DbSchemaExplorer from './DBSchemaExplorer.svelte'
+	import DarkModeObserver from './DarkModeObserver.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -54,8 +55,24 @@
 
 	let appConnect: AppConnect
 	let resourceEditor: ResourceEditor
+
+	let darkMode: boolean = false
+
+	function onThemeChange() {
+		if (document.documentElement.classList.contains('dark')) {
+			darkMode = true
+		} else {
+			darkMode = false
+		}
+	}
+
+	onMount(() => {
+		onThemeChange()
+	})
 </script>
 
+<DarkModeObserver on:change={onThemeChange} />
+
 <AppConnect
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
@@ -93,8 +110,11 @@
 		class="text-clip grow min-w-0"
 		placeholder="{resourceType ?? 'any'} resource"
 		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-		containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+		containerStyles={darkMode
+			? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+			: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 	/>
+
 	{#if value && value != ''}
 		<Button variant="border" size="xs" on:click={() => resourceEditor?.initEdit?.(value ?? '')}>
 			<Icon scale={0.8} data={faPen} /></Button
@@ -107,16 +127,18 @@
 		size="xs"
 		on:click={() => appConnect?.open?.(resourceType)}
 	>
-		<Icon scale={0.8} data={faPlus} /></Button
-	>
+		<Icon scale={0.8} data={faPlus} />
+	</Button>
 	<Button
 		variant="border"
 		color="light"
 		size="xs"
 		on:click={() => {
 			loadResources(resourceType)
-		}}><Icon scale={0.8} data={faRotateRight} /></Button
+		}}
 	>
+		<Icon scale={0.8} data={faRotateRight} />
+	</Button>
 </div>
 <DbSchemaExplorer {resourceType} pg={value} />
 
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 4b1226e155..909df6df90 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -88,7 +88,7 @@
 						{/if}
 
 						<div class="flex items-center gap-2">
-							<span class="text-sm text-gray-500">
+							<span class="text-sm text-tertiary">
 								{#if runnable}
 									Edited {displayDaysAgo(runnable.created_at || '')} by {runnable.created_by ||
 										'unknown'}
@@ -143,7 +143,7 @@
 			{/key}
 		{/if}
 	{:else}
-		<div class="text-xs text-gray-600">No arguments</div>
+		<div class="text-xs text-tertiary">No arguments</div>
 	{/if}
 	{#if schedulable}
 		<div class="mt-10" />
diff --git a/frontend/src/lib/components/RunPageSchedules.svelte b/frontend/src/lib/components/RunPageSchedules.svelte
index 3d67b4b23d..bb9ee46091 100644
--- a/frontend/src/lib/components/RunPageSchedules.svelte
+++ b/frontend/src/lib/components/RunPageSchedules.svelte
@@ -159,7 +159,7 @@
 
 {#if schedules}
 	{#if schedules.length == 0}
-		<div class="text-xs text-gray-700 px-2"> No other schedules </div>
+		<div class="text-xs text-secondary px-2"> No other schedules </div>
 	{:else}
 		<div class="flex flex-col divide-y px-2 pt-2">
 			{#each schedules as schedule}
diff --git a/frontend/src/lib/components/SavedInputs.svelte b/frontend/src/lib/components/SavedInputs.svelte
index 9b127168ae..384ba2dfc1 100644
--- a/frontend/src/lib/components/SavedInputs.svelte
+++ b/frontend/src/lib/components/SavedInputs.svelte
@@ -166,8 +166,8 @@
 						{#each savedInputs as i}
 							<button
 								class={classNames(
-									`w-full flex items-center group justify-between gap-4 py-2 px-4 text-left border rounded-md hover:bg-gray-100 transition-all`,
-									selectedInput === i ? 'border-blue-500 bg-blue-50' : ''
+									`w-full flex items-center group justify-between gap-4 py-2 px-4 text-left border rounded-md hover:bg-surface-hover transition-all`,
+									selectedInput === i ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : ''
 								)}
 								on:click={() => {
 									if (!i.isEditing) {
@@ -189,7 +189,7 @@
 											}}
 											class="w-full"
 										>
-											<input type="text" bind:value={i.name} class="text-gray-700" />
+											<input type="text" bind:value={i.name} class="text-secondary" />
 										</form>
 									{:else}
 										<small
@@ -243,13 +243,13 @@
 											</Button>
 										</div>
 									{:else}
-										<span class="text-xs text-gray-600">By {i.created_by}</span>
+										<span class="text-xs text-tertiary">By {i.created_by}</span>
 									{/if}
 								</div>
 							</button>
 						{/each}
 					{:else}
-						<div class="text-center text-gray-500">No saved Inputs</div>
+						<div class="text-center text-tertiary">No saved Inputs</div>
 					{/if}
 				</div>
 			</div>
@@ -264,8 +264,8 @@
 						{#each previousInputs as i}
 							<button
 								class={classNames(
-									`w-full flex items-center justify-between gap-4 py-2 px-4 text-left border rounded-sm hover:bg-gray-100 transition-a`,
-									selectedInput === i ? 'border-blue-500 bg-blue-50' : ''
+									`w-full flex items-center justify-between gap-4 py-2 px-4 text-left border rounded-sm hover:bg-surface-hover transition-a`,
+									selectedInput === i ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : ''
 								)}
 								on:click={() => {
 									if (selectedInput === i) {
@@ -293,7 +293,7 @@
 										<a
 											target="_blank"
 											href="/runs/{i.id}"
-											class="text-right float-right text-gray-600"
+											class="text-right float-right text-secondary"
 											title="See run detail in a new tab"
 										>
 											<ExternalLink size={16} />
@@ -303,7 +303,7 @@
 							</button>
 						{/each}
 					{:else}
-						<div class="text-center text-gray-500">No previous Runs</div>
+						<div class="text-center text-tertiary">No previous Runs</div>
 					{/if}
 				</div>
 			</div>
@@ -320,7 +320,7 @@
 								<ObjectViewer json={selectedInput?.args} />
 							</div>
 						{:else}
-							<div class="text-center text-gray-500">
+							<div class="text-center text-tertiary">
 								Select an Input to preview scripts arguments
 							</div>
 						{/if}
diff --git a/frontend/src/lib/components/ScheduleEditor.svelte b/frontend/src/lib/components/ScheduleEditor.svelte
index 54f5544ee5..2fcb006d0a 100644
--- a/frontend/src/lib/components/ScheduleEditor.svelte
+++ b/frontend/src/lib/components/ScheduleEditor.svelte
@@ -225,7 +225,7 @@
 
 			<h2 class="border-b pb-1 mt-8 mb-2">Runnable</h2>
 			{#if !edit}
-				<p class="text-xs mb-1 text-gray-600">
+				<p class="text-xs mb-1 text-tertiary">
 					Pick a script or flow to be triggered by the schedule<Required required={true} />
 				</p>
 				<ScriptPicker
@@ -277,7 +277,7 @@
 				canRefresh
 			/>
 			<div class="flex gap-20 items-start mt-3">
-				<div class="text-gray-600 text-sm"
+				<div class="text-tertiary text-sm"
 					>The following args will be passed to the error handler:
 					<ul class="mt-1 ml-2">
 						<li><b>path</b>: The path of the script or flow that errored.</li>
diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
index d8cec1bd43..866ee7e3fb 100644
--- a/frontend/src/lib/components/SchemaEditor.svelte
+++ b/frontend/src/lib/components/SchemaEditor.svelte
@@ -293,7 +293,7 @@
 						</tbody>
 					</TableCustom>
 				{:else}
-					<div class="text-gray-700 text-xs italic mt-2">This schema has no arguments.</div>
+					<div class="text-secondary text-xs italic mt-2">This schema has no arguments.</div>
 				{/if}
 			</div>
 		{:else}
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index 5dc1b6be31..75b76cc67f 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -139,7 +139,7 @@
 			{/if}
 		{/each}
 	{:else if !shouldHideNoInputs}
-		<div class="text-gray-500 text-sm">No inputs</div>
+		<div class="text-secondary text-sm">No inputs</div>
 	{/if}
 </div>
 
@@ -161,18 +161,13 @@
 				...x
 			}))}
 	>
-		<div
-			slot="submission"
-			class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
-		>
+		<div slot="submission">
 			<Button
 				variant="border"
 				color="blue"
 				size="sm"
 				startIcon={{ icon: faPlus }}
-				on:click={() => {
-					variableEditor?.initNew?.()
-				}}
+				on:click={() => variableEditor?.initNew?.()}
 			>
 				New variable
 			</Button>
diff --git a/frontend/src/lib/components/SchemaModal.svelte b/frontend/src/lib/components/SchemaModal.svelte
index 23663d1ea8..47fec358f4 100644
--- a/frontend/src/lib/components/SchemaModal.svelte
+++ b/frontend/src/lib/components/SchemaModal.svelte
@@ -124,7 +124,7 @@
 		<div class="flex flex-col gap-6">
 			<div>
 				<label class="block">
-					<div class="mb-1 font-semibold text-gray-700">
+					<div class="mb-1 font-semibold text-secondary">
 						Name
 						<Required required={true} />
 					</div>
@@ -144,14 +144,14 @@
 			</div>
 
 			<label class="block">
-				<div class="mb-1 font-semibold text-gray-700">
+				<div class="mb-1 font-semibold text-secondary">
 					Description
 					<Required required={false} />
 				</div>
 				<textarea placeholder="Enter a description" rows="3" bind:value={property.description} />
 			</label>
 			<div>
-				<div class="mb-1 font-semibold text-gray-700">Type<Required required={true} /></div>
+				<div class="mb-1 font-semibold text-secondary">Type<Required required={true} /></div>
 				<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2 w-full">
 					{#each ARG_TYPES as argType}
 						{@const isSelected = argType == property.selectedType}
@@ -216,7 +216,7 @@
 			</div>
 			{#if property.selectedType !== 'boolean'}
 				<div>
-					<div class="font-semibold text-gray-700 mb-1">Advanced</div>
+					<div class="font-semibold text-secondary mb-1">Advanced</div>
 					{#if property.selectedType == 'string'}
 						<StringTypeNarrowing
 							bind:format={property.format}
diff --git a/frontend/src/lib/components/SchemaViewer.svelte b/frontend/src/lib/components/SchemaViewer.svelte
index 14a7dba1b2..d9ea8eaaf7 100644
--- a/frontend/src/lib/components/SchemaViewer.svelte
+++ b/frontend/src/lib/components/SchemaViewer.svelte
@@ -72,7 +72,7 @@
 							</TableCustom>
 						</div>
 					{:else}
-						<div class="text-gray-700 text-xs italic m-1">No arguments</div>
+						<div class="text-secondary text-xs italic m-1">No arguments</div>
 					{/if}
 				</TabContent>
 				<TabContent value="advanced">
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 4f1e5c5d72..af6765c054 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -282,7 +282,7 @@
 			<h2 class="border-b pb-1 mt-10 mb-4">Language</h2>
 
 			{#if lockedLanguage}
-				<div class="text-sm text-gray-600 italic mb-2">
+				<div class="text-sm text-tertiary italic mb-2">
 					As a forked script, the language '{script.language}' cannot be modified.
 				</div>
 			{/if}
@@ -293,7 +293,7 @@
 						size="sm"
 						variant="border"
 						color={isPicked ? 'blue' : 'light'}
-						btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+						btnClasses={isPicked ? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75' : 'm-[1px]'}
 						on:click={() => {
 							template = 'script'
 							initContent(lang, script.kind, template)
@@ -309,7 +309,9 @@
 					size="sm"
 					variant="border"
 					color={template == 'docker' ? 'blue' : 'light'}
-					btnClasses={template == 'docker' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+					btnClasses={template == 'docker'
+						? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
+						: 'm-[1px]'}
 					disabled={lockedLanguage}
 					on:click={() => {
 						if (isCloudHosted()) {
@@ -338,7 +340,9 @@
 					size="sm"
 					variant="border"
 					color={template == 'powershell' ? 'blue' : 'light'}
-					btnClasses={template == 'docker' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+					btnClasses={template == 'powershell'
+						? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
+						: 'm-[1px]'}
 					disabled={lockedLanguage}
 					on:click={() => {
 						template = 'powershell'
@@ -352,7 +356,9 @@
 					size="xs"
 					variant="border"
 					color={script.language == 'bun' ? 'blue' : 'light'}
-					btnClasses={script.language == 'bun' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+					btnClasses={script.language == 'bun'
+						? '!border-2 !bg-blue-50/75 dark:!bg-frost-900/75'
+						: 'm-[1px]'}
 					disabled={lockedLanguage}
 					on:click={() => {
 						initContent(Script.language.BUN, script.kind, template)
@@ -390,11 +396,11 @@
 			<h2 class="border-b pb-1 mt-10 mb-4">Concurrency limits</h2>
 			<div class="flex gap-x-4 shrink">
 				<label class="block shrink min-w-0">
-					<span class="text-gray-700 text-sm">Maximum number of runs</span>
+					<span class="text-secondary text-sm">Maximum number of runs</span>
 					<input class="!w-55" type="number" bind:value={script.concurrent_limit} />
 				</label>
 				<label class="block shrink min-w-0">
-					<span class="text-gray-700 text-sm">Per time window (seconds)</span>
+					<span class="text-secondary text-sm">Per time window (seconds)</span>
 					<input class="!w-18" type="number" bind:value={script.concurrency_time_window_s} />
 				</label>
 			</div>
@@ -427,21 +433,23 @@
 							{/each}
 						</select>
 					{:else}
-						<div class="text-sm text-gray-600 italic mb-2">
+						<div class="text-sm text-secondary italic mb-2">
 							No custom worker group defined on this instance
 						</div>
 					{/if}
 				{/if}
 			</div>
 			{#if !isCloudHosted()}
-				<h2 class="border-b pb-1 mt-10 mb-4"
-					>Custom env variables<Tooltip
-						documentationLink="https://www.windmill.dev/docs/script_editor/custom_environment_variables"
-						>Additional static custom env variables to pass to the script.</Tooltip
-					></h2
-				>
+				<h2 class="border-b pb-1 mt-10 mb-4">
+					Custom env variables
+					<Tooltip
+						documentationLink="https://www.windmill.dev/docs/reference#custom-environment-variables"
+					>
+						Additional static custom env variables to pass to the script.
+					</Tooltip>
+				</h2>
 				<div class="w-full">
-					<span class="text-gray-600 text-xs pb-2">Format is: `{'<KEY>=<VALUE>'}`</span>
+					<span class="text-tertiary text-xs pb-2">Format is: `{'<KEY>=<VALUE>'}`</span>
 					{#if Array.isArray(script.envs ?? [])}
 						{#each script.envs ?? [] as v, i}
 							<div class="flex max-w-md mt-1 w-full items-center">
@@ -509,7 +517,7 @@
 							>
 								<Badge
 									color="gray"
-									class="center-center !bg-gray-300 !text-gray-600 !h-[28px]  !w-[70px] rounded-r-none"
+									class="center-center !bg-surface-selected !text-tertiary !h-[28px]  !w-[70px] rounded-r-none"
 								>
 									<Pen size={12} class="mr-2" /> Path
 								</Badge>
@@ -540,7 +548,7 @@
 					<Awareness />
 				{/if}
 
-				<div class="flex flex-row gap-x-1 lg:gap-x-4">
+				<div class="flex flex-row gap-x-1 lg:gap-x-2">
 					<Button
 						color="light"
 						variant="border"
@@ -552,7 +560,7 @@
 						Metadata
 					</Button>
 					<Button
-						color="dark"
+						color="light"
 						variant="border"
 						size="xs"
 						on:click={() => {
@@ -602,7 +610,7 @@
 								size="sm"
 								variant="border"
 								color={isPicked ? 'blue' : 'dark'}
-								btnClasses="font-medium {isPicked ? '!bg-blue-50/75' : ''}"
+								btnClasses="font-medium {isPicked ? '!bg-blue-50/75 !dark:bg-blue-900/75' : ''}"
 								on:click={() => {
 									template = 'script'
 									script.kind = value
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index b1ecc61308..15027c60a2 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -219,7 +219,7 @@
 	<div>Have others join by sharing the following url:</div>
 	<div class="flex gap-2 pr-4">
 		<input type="text" disabled value={collabUrl()} />
-		<button on:click={() => copyToClipboard(collabUrl())} class="text-gray-700 ml-2">
+		<button on:click={() => copyToClipboard(collabUrl())} class="text-secondary ml-2">
 			<Icon data={faClipboard} />
 		</button>
 	</div>
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index 67db1c1902..6d8d6cc710 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -2,7 +2,7 @@
 	import { ScriptService, FlowService, Script } from '$lib/gen'
 
 	import { hubScripts, workspaceStore } from '$lib/stores'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, onMount } from 'svelte'
 
 	import Select from './apps/svelte-select/lib/index'
 
@@ -18,6 +18,7 @@
 	import { faRotateRight } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 	import FlowIcon from './home/FlowIcon.svelte'
+	import DarkModeObserver from './DarkModeObserver.svelte'
 
 	export let initialPath: string | undefined = undefined
 	export let scriptPath: string | undefined = undefined
@@ -62,8 +63,23 @@
 	}
 
 	$: itemKind && $workspaceStore && loadItems()
+	let darkMode: boolean = false
+
+	function onThemeChange() {
+		if (document.documentElement.classList.contains('dark')) {
+			darkMode = true
+		} else {
+			darkMode = false
+		}
+	}
+
+	onMount(() => {
+		onThemeChange()
+	})
 </script>
 
+<DarkModeObserver on:change={onThemeChange} />
+
 <Drawer bind:this={drawerViewer} size="900px">
 	<DrawerContent title="Script {scriptPath}" on:close={drawerViewer.closeDrawer}>
 		<HighlightCode {code} language={lang} />
@@ -105,7 +121,9 @@
 			{items}
 			placeholder="Pick a {itemKind}"
 			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-			containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+			containerStyles={darkMode
+				? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+				: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 			portal={false}
 		/>
 	{/if}
diff --git a/frontend/src/lib/components/ScriptVersionHistory.svelte b/frontend/src/lib/components/ScriptVersionHistory.svelte
index b0abae7c46..67d92a4bae 100644
--- a/frontend/src/lib/components/ScriptVersionHistory.svelte
+++ b/frontend/src/lib/components/ScriptVersionHistory.svelte
@@ -61,7 +61,7 @@
 							{/each}
 						</div>
 					{:else}
-						<div class="text-sm text-gray-500">No items</div>
+						<div class="text-sm text-tertiary">No items</div>
 					{/if}
 				{:else}
 					<Skeleton layout={[[40], [40], [40], [40], [40]]} />
@@ -76,7 +76,7 @@
 					<FlowModuleScript path={scriptPath} hash={selectedVersion} />
 				{/key}
 			{:else}
-				<div class="text-sm p-2 text-gray-500">Select a deployment version to see its details</div>
+				<div class="text-sm p-2 text-tertiary">Select a deployment version to see its details</div>
 			{/if}
 		</div>
 	</Pane>
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 7deaf56e49..aeda58b769 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -23,17 +23,6 @@
 	import libStdContent from '$lib/es5.d.ts.txt?raw'
 	import { buildWorkerDefinition } from 'monaco-editor-workers'
 
-	meditor.defineTheme('myTheme', {
-		base: 'vs',
-		inherit: true,
-		rules: [],
-		colors: {
-			'editorLineNumber.foreground': '#999',
-			'editorGutter.background': '#F9FAFB'
-		}
-	})
-	meditor.setTheme('myTheme')
-
 	languages.typescript.javascriptDefaults.setCompilerOptions({
 		target: languages.typescript.ScriptTarget.Latest,
 		allowNonTsExtensions: true,
diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
index e0f7275c2b..057745b6fd 100644
--- a/frontend/src/lib/components/StringTypeNarrowing.svelte
+++ b/frontend/src/lib/components/StringTypeNarrowing.svelte
@@ -77,7 +77,7 @@
 <div class="my-2" />
 
 {#if kind == 'pattern'}
-	<label for="input" class="mb-2 text-gray-700 text-xs">
+	<label for="input" class="mb-2 text-secondary text-xs">
 		Pattern (Regex)
 		<div class="flex flex-row">
 			<input
@@ -100,7 +100,7 @@
 		</div>
 	</label>
 {:else if kind == 'enum'}
-	<label for="input" class="mb-2 text-gray-700 text-xs">
+	<label for="input" class="mb-2 text-secondary text-xs">
 		Enums
 		<div class="flex flex-col gap-1">
 			{#each enum_ || [] as e}
diff --git a/frontend/src/lib/components/SuperadminSettings.svelte b/frontend/src/lib/components/SuperadminSettings.svelte
index 83f6510e46..9d6f19aa16 100644
--- a/frontend/src/lib/components/SuperadminSettings.svelte
+++ b/frontend/src/lib/components/SuperadminSettings.svelte
@@ -50,7 +50,7 @@
 	<DrawerContent overflow_y={false} title="Superadmin Settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full">
 			<div>
-				<div class="text-xs pt-1 text-gray-500 flex flex-col">
+				<div class="text-xs pt-1 text-tertiary flex flex-col">
 					<div>Windmill <Version /></div><div><Uptodate /></div>
 				</div>
 
@@ -65,7 +65,7 @@
 			</div>
 			<div class="mt-2 overflow-auto">
 				<TableCustom>
-					<tr slot="header-row" class="sticky top-0 bg-white border-b">
+					<tr slot="header-row" class="sticky top-0 bg-surface border-b">
 						<th>email</th>
 						<th>auth</th>
 						<th>name</th>
diff --git a/frontend/src/lib/components/TableCustom.svelte b/frontend/src/lib/components/TableCustom.svelte
index 59f83bcd6d..7b0416b474 100644
--- a/frontend/src/lib/components/TableCustom.svelte
+++ b/frontend/src/lib/components/TableCustom.svelte
@@ -14,7 +14,7 @@
 -->
 <div class="flex flex-col {$$props.class} min-w-full">
 	<div class="inline-block min-w-full py-2 align-middle">
-		<table class="table-custom min-w-full table-auto divide-y divide-gray-300">
+		<table class="table-custom min-w-full table-auto divide-y">
 			<thead>
 				<slot name="header-row" />
 			</thead>
@@ -22,7 +22,7 @@
 		</table>
 	</div>
 	{#if paginated}
-		<div class="sticky flex flex-row-reverse text-gray-500 mb-6">
+		<div class="sticky flex flex-row-reverse text-tertiary mb-6">
 			<button
 				class="ml-2 drop-shadow-md {showNext ? 'visible' : 'invisible'}"
 				on:click={() => dispatch('next')}
diff --git a/frontend/src/lib/components/TableSimple.svelte b/frontend/src/lib/components/TableSimple.svelte
index 6a8b5bb27e..c53be026d8 100644
--- a/frontend/src/lib/components/TableSimple.svelte
+++ b/frontend/src/lib/components/TableSimple.svelte
@@ -13,13 +13,13 @@
 
 <div class="mt-2 flex flex-col {$$props.class}">
 	<div class="inline-block min-w-full align-middle">
-		<table class="min-w-full divide-y divide-gray-300 table-auto">
+		<table class="min-w-full divide-y table-auto">
 			<thead>
 				<tr class={twTextSize}>
 					{#if headers}
 						{#each headers as header, i}
 							<th
-								class="py-3.5 text-left text-sm font-semibold text-gray-900 capitalize {i == 0
+								class="py-3.5 text-left text-sm font-semibold text-primary capitalize {i == 0
 									? 'sm:pl-6 md:pl-0 pl-4 pr-3'
 									: 'px-3 '}">{header}</th
 							>
@@ -27,13 +27,13 @@
 					{/if}
 				</tr>
 			</thead>
-			<tbody class="divide-y divide-gray-200">
+			<tbody class="divide-y">
 				{#if data && keys && data.length > 0}
 					{#each data as row}
 						<tr>
 							{#each keys as key, i}
 								<td
-									class="py-2 text-sm text-gray-700 break-words {i == 0
+									class="py-2 text-sm text-secondary break-words {i == 0
 										? 'pl-4 pr-3 sm:pl-6 md:pl-0 font-semibold'
 										: 'px-3'} {twTextSize}"
 								>
@@ -52,7 +52,7 @@
 	</div>
 </div>
 {#if paginated}
-	<div class="flex flex-row-reverse text-gray-500">
+	<div class="flex flex-row-reverse text-tertiary">
 		<button
 			on:click={() => {
 				dispatch('next')
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index 09af14bcd1..1265bc47ca 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -369,17 +369,6 @@
 
 	languages.setLanguageConfiguration('template', conf)
 
-	meditor.defineTheme('myTheme', {
-		base: 'vs',
-		inherit: true,
-		rules: [],
-		colors: {
-			'editorLineNumber.foreground': '#999',
-			'editorGutter.background': '#F9FAFB'
-		}
-	})
-	meditor.setTheme('myTheme')
-
 	let divEl: HTMLDivElement | null = null
 	let editor: meditor.IStandaloneCodeEditor
 	let model: meditor.ITextModel
diff --git a/frontend/src/lib/components/Toast.svelte b/frontend/src/lib/components/Toast.svelte
index a369dffd14..3189a47b6a 100644
--- a/frontend/src/lib/components/Toast.svelte
+++ b/frontend/src/lib/components/Toast.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div
-	class="pointer-events-auto w-full max-w-sm overflow-hidden bg-white shadow-lg ring-1 ring-black ring-opacity-5 border"
+	class="pointer-events-auto w-full max-w-sm overflow-hidden bg-surface shadow-lg ring-1 ring-black ring-opacity-5 border"
 >
 	<div class="p-2 min-h-[60px] flex flex-col">
 		<div class="flex items-start w-full">
@@ -36,9 +36,11 @@
 				{/if}
 			</div>
 			<div class="ml-3 flex-1 w-0">
-				<p class="text-sm text-gray-500">{message}</p>
+				<p class="text-sm text-secondary">{message}</p>
 				{#if errorMessage}
-					<p class="text-sm text-gray-500 border bg-gray-50 p-2 w-full overflow-auto mt-2">
+					<p
+						class="text-sm text-secondary border bg-surface-secondary p-2 w-full overflow-auto mt-2"
+					>
 						{errorMessage}
 					</p>
 				{/if}
@@ -48,7 +50,7 @@
 				<button
 					type="button"
 					on:click={handleClose}
-					class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none"
+					class="inline-flex rounded-md bg-surface-secondary text-gray-400 hover:text-tertiary focus:outline-none"
 				>
 					<span class="sr-only">Close</span>
 					<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -66,7 +68,7 @@
 						action.callback()
 						toast.pop(toastId)
 					}}
-					class="text-sm !text-black"
+					class="text-sm !text-primary"
 				>
 					{action.label}
 				</Button>
diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index ff5e0520e8..310a810e36 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -31,7 +31,7 @@
 			<span
 				class={twMerge(
 					'mr-2 font-medium duration-50',
-					disabled ? 'text-gray-500' : 'text-gray-900',
+					disabled ? 'text-disabled' : 'text-primary',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass
 				)}
@@ -57,7 +57,7 @@
 			/>
 			<div
 				class={classNames(
-					"transition-all bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-white after:border-white after:border after:rounded-full after:transition-all ",
+					"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-white after:border-white after:border after:rounded-full after:transition-all ",
 					color == 'red' ? 'peer-checked:bg-red-600' : 'peer-checked:bg-blue-600',
 					size === 'sm'
 						? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
@@ -69,7 +69,7 @@
 			<span
 				class={twMerge(
 					'ml-2 font-medium duration-50',
-					disabled ? 'text-gray-500' : 'text-gray-900',
+					disabled ? 'text-disabled' : 'text-primary',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass
 				)}
diff --git a/frontend/src/lib/components/ToggleHubWorkspace.svelte b/frontend/src/lib/components/ToggleHubWorkspace.svelte
index 9fbc47e201..f80480439e 100644
--- a/frontend/src/lib/components/ToggleHubWorkspace.svelte
+++ b/frontend/src/lib/components/ToggleHubWorkspace.svelte
@@ -1,17 +1,14 @@
 <script lang="ts">
-	import { faBuilding } from '@fortawesome/free-solid-svg-icons'
-	import { ToggleButton, ToggleButtonGroup } from './common'
 	import { WindmillIcon } from './icons'
+	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
+	import { Building } from 'lucide-svelte'
 	export let selected: 'hub' | 'workspace' = 'hub'
 </script>
 
 <div class="max-w-min">
 	<ToggleButtonGroup bind:selected>
-		<ToggleButton position="left" value="hub" size="sm">
-			<WindmillIcon white={selected == 'hub'} height="16px" width="16px" /><div class="mr-1" />Hub
-		</ToggleButton>
-		<ToggleButton position="right" value="workspace" size="sm" startIcon={{ icon: faBuilding }}>
-			Workspace
-		</ToggleButton>
+		<ToggleButton value="hub" icon={WindmillIcon} label="Hub" />
+		<ToggleButton value="workspace" icon={Building} label="Workspace" />
 	</ToggleButtonGroup>
 </div>
diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
index d082d0d9e7..f62b5eff2b 100644
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -15,8 +15,8 @@
 <Popover notClickable {placement} class={wrapperClass}>
 	<Icon
 		class="{light
-			? 'text-gray-400 hover:text-gray-500'
-			: ' text-gray-500 hover:text-gray-600'}  cursor-pointer transition-all font-thin flex h-4 p-0.5 w-4 justify-center items-center {$$props.class}"
+			? 'text-gray-400 dark:text-gray-200 hover:text-tertiary dark:hover:text-gray-300'
+			: ' text-tertiary dark:text-gray-300 hover:text-tertiary dark:hover:text-gray-400'}  cursor-pointer transition-all font-thin flex h-4 p-0.5 w-4 justify-center items-center {$$props.class}"
 		data={faInfoCircle}
 		{scale}
 	/>
diff --git a/frontend/src/lib/components/Uptodate.svelte b/frontend/src/lib/components/Uptodate.svelte
index fb7b9163a2..b64acb1ed3 100644
--- a/frontend/src/lib/components/Uptodate.svelte
+++ b/frontend/src/lib/components/Uptodate.svelte
@@ -24,6 +24,6 @@
 			How to update?<br />
 			- docker: `docker compose up`<br />-
 			<a href="https://github.com/windmill-labs/windmill-helm-charts#install">helm</a>
-		</Tooltip></span
-	>
+		</Tooltip>
+	</span>
 {/if}
diff --git a/frontend/src/lib/components/UserSettings.svelte b/frontend/src/lib/components/UserSettings.svelte
index dde9d9aa89..7357475ff4 100644
--- a/frontend/src/lib/components/UserSettings.svelte
+++ b/frontend/src/lib/components/UserSettings.svelte
@@ -92,7 +92,7 @@
 	<DrawerContent title="User Settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full">
 			<div>
-				<div class="text-xs pt-1 pb-2 text-gray-500 flex-col flex">
+				<div class="text-xs pt-1 pb-2 text-tertiary flex-col flex">
 					Windmill <Version />
 				</div>
 
@@ -104,8 +104,8 @@
 						{/if}
 						<div class="flex flex-col gap-2 w-full">
 							<div class="mt-4">
-								<label class="block w-60 mb-2 text-gray-500">
-									<div class="text-gray-700">email</div>
+								<label class="block w-60 mb-2 text-tertiary">
+									<div class="text-secondary">email</div>
 									<input
 										type="text"
 										disabled
@@ -115,7 +115,7 @@
 								</label>
 								{#if login_type == 'password'}
 									<label class="block w-120">
-										<div class="text-gray-700">password</div>
+										<div class="text-secondary">password</div>
 										<input
 											type="password"
 											bind:value={newPassword}
@@ -162,7 +162,7 @@
 						</Button>
 					</div>
 				</div>
-				<div class="text-2xs text-gray-500 italic pb-6">
+				<div class="text-2xs text-tertiary italic pb-6">
 					Authentify to the Windmill API with access tokens.
 				</div>
 
@@ -186,7 +186,7 @@
 					<div
 						class="{displayCreateToken
 							? ''
-							: 'hidden'} py-3 px-3 border rounded-md mb-6 bg-gray-50 min-w-min"
+							: 'hidden'} py-3 px-3 border rounded-md mb-6 bg-surface-secondary min-w-min"
 					>
 						<h3 class="pb-3 font-semibold">Add a new token</h3>
 						{#if scopes != undefined}
@@ -207,13 +207,13 @@
 						<div class="flex flex-row flex-wrap gap-x-2 w-full justify-between">
 							<div class="flex flex-col">
 								<label for="label"
-									>Label <span class="text-xs text-gray-500">(optional)</span></label
+									>Label <span class="text-xs text-tertiary">(optional)</span></label
 								>
 								<input type="text" bind:value={newTokenLabel} />
 							</div>
 							<div class="flex flex-col">
 								<label for="expires"
-									>Expires In &nbsp;<span class="text-xs text-gray-500">(optional)</span>
+									>Expires In &nbsp;<span class="text-xs text-tertiary">(optional)</span>
 								</label>
 								<select bind:value={newTokenExpiration}>
 									<option value={undefined}>No expiration</option>
@@ -257,7 +257,7 @@
 								{/each}
 							{:else if tokens && tokens.length === 0}
 								<tr class="px-6"
-									><td class="text-gray-700 italic text-xs"> There are no tokens yet</td></tr
+									><td class="text-secondary italic text-xs"> There are no tokens yet</td></tr
 								>
 							{:else}
 								<tr> Loading...</tr>
diff --git a/frontend/src/lib/components/VariableEditor.svelte b/frontend/src/lib/components/VariableEditor.svelte
index 04bba04e93..3d2e48e411 100644
--- a/frontend/src/lib/components/VariableEditor.svelte
+++ b/frontend/src/lib/components/VariableEditor.svelte
@@ -5,7 +5,7 @@
 	import { userStore, workspaceStore } from '$lib/stores'
 	import Required from './Required.svelte'
 	import Tooltip from './Tooltip.svelte'
-	import { Button, ToggleButton, ToggleButtonGroup } from './common'
+	import { Button } from './common'
 	import Drawer from './common/drawer/Drawer.svelte'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import Alert from './common/alert/Alert.svelte'
@@ -15,6 +15,8 @@
 	import SimpleEditor from './SimpleEditor.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { canWrite, isOwner } from '$lib/utils'
+	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -144,7 +146,7 @@
 							>
 						</div>
 					{/if}
-					<span class="font-semibold text-gray-700">Path</span>
+					<span class="font-semibold text-secondary">Path</span>
 					<Path
 						disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
 						bind:error={pathError}
@@ -173,10 +175,10 @@
 
 			<div>
 				<div class="mb-1">
-					<span class="font-semibold text-gray-700">Variable value</span>
-					<span class="text-sm text-gray-500 mr-4"
-						>({variable.value.length}/{MAX_VARIABLE_LENGTH} characters)</span
-					>
+					<span class="font-semibold text-secondary">Variable value</span>
+					<span class="text-sm text-tertiary mr-4">
+						({variable.value.length}/{MAX_VARIABLE_LENGTH} characters)
+					</span>
 					{#if edit && variable.is_secret}<Button
 							variant="border"
 							size="xs"
@@ -184,7 +186,12 @@
 							>Load secret value<Tooltip>Will generate an audit log</Tooltip></Button
 						>{/if}
 				</div>
-				<div class="flex flex-row">
+				<div class="flex flex-col gap-2">
+					<ToggleButtonGroup bind:selected={editorKind}>
+						<ToggleButton value="plain" label="Plain" />
+						<ToggleButton value="json" label="Json" />
+						<ToggleButton value="yaml" label="YAML" />
+					</ToggleButtonGroup>
 					{#if editorKind == 'plain'}
 						<textarea
 							disabled={!can_write}
@@ -215,18 +222,12 @@
 							/>
 						</div>
 					{/if}
-
-					<ToggleButtonGroup col bind:selected={editorKind}>
-						<ToggleButton light position="center" value="plain" size="xs">Plain</ToggleButton>
-						<ToggleButton light position="center" value="json" size="xs">Json</ToggleButton>
-						<ToggleButton light position="center" value="yaml" size="xs">YAML</ToggleButton>
-					</ToggleButtonGroup>
 				</div>
 			</div>
 			<!-- {/if} -->
 
 			<div>
-				<div class="mb-1 font-semibold text-gray-700">
+				<div class="mb-1 font-semibold text-secondary">
 					Description
 					<Required required={false} />
 				</div>
diff --git a/frontend/src/lib/components/Version.svelte b/frontend/src/lib/components/Version.svelte
index c7d9c11070..9406bed01f 100644
--- a/frontend/src/lib/components/Version.svelte
+++ b/frontend/src/lib/components/Version.svelte
@@ -10,4 +10,6 @@
 	}
 </script>
 
-{version}
+<div class="text-secondary text-xs">
+	{version}
+</div>
diff --git a/frontend/src/lib/components/WhitelistIp.svelte b/frontend/src/lib/components/WhitelistIp.svelte
index 75480caf21..34fc39c4df 100644
--- a/frontend/src/lib/components/WhitelistIp.svelte
+++ b/frontend/src/lib/components/WhitelistIp.svelte
@@ -20,7 +20,7 @@
 {#if ips}
 	<div class="mt-2" />
 	<Alert size="xs" type="info" title="IPs to whitelist">
-		<span class="text-gray-600">If necessary, the workers IPs to whitelist are:</span>
+		<span class="text-tertiary">If necessary, the workers IPs to whitelist are:</span>
 		{ips.join(', ')}
 	</Alert>
 {/if}
diff --git a/frontend/src/lib/components/apps/components/helpers/Loader.svelte b/frontend/src/lib/components/apps/components/helpers/Loader.svelte
index 650e749b59..c5cba0beef 100644
--- a/frontend/src/lib/components/apps/components/helpers/Loader.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/Loader.svelte
@@ -11,7 +11,7 @@
 	<div class="w-full h-full">
 		<div
 			out:fade|local={{ duration: 50 }}
-			class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+			class="absolute inset-0 center-center flex-col bg-white text-tertiary border"
 		>
 			<Loader2 class="animate-spin" size={16} />
 			<span class="text-xs mt-1">Loading</span>
diff --git a/frontend/src/lib/components/apps/components/helpers/MissingConnectionWarning.svelte b/frontend/src/lib/components/apps/components/helpers/MissingConnectionWarning.svelte
index 7ade3eb6df..72c24c0ea4 100644
--- a/frontend/src/lib/components/apps/components/helpers/MissingConnectionWarning.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/MissingConnectionWarning.svelte
@@ -8,7 +8,7 @@
 	<div class="flex gap-2 flex-col">
 		<div>This component is expecting a connected input: </div>
 		<div>
-			<code class="bg-gray-50 border text-gray-600">{input.connection?.path} </code>
+			<code class="bg-gray-50 border text-tertiary">{input.connection?.path} </code>
 		</div>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 347b957b82..62537f15c9 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -107,7 +107,7 @@
 						selectedStyle={css?.selectedTab?.style}
 						disabled={resolvedDisabledTabs[index]}
 					>
-						<span class="font-semibold">{res}</span>
+						<span class="font-semibold text-primary">{res}</span>
 					</Tab>
 				{/each}
 			</Tabs>
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index cea53c0adf..2d1a3f53fd 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -243,7 +243,7 @@
 											$focusedGrid = undefined
 										}}
 										class={twMerge(
-											'bg-gray-100 h-full w-full relative',
+											'bg-white h-full w-full relative',
 											$appStore.css?.['app']?.['viewer']?.class
 										)}
 										style={$appStore.css?.['app']?.['viewer']?.style}
@@ -308,7 +308,7 @@
 											<SettingsPanel />
 											<SecondaryMenu />
 										{:else}
-											<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
+											<div class="min-w-[150px] text-sm text-secondary text-center py-8 px-2">
 												Select a component to see the settings&nbsp;for&nbsp;it
 											</div>
 										{/if}
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
index 83e3305364..402d8738aa 100644
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -106,12 +106,12 @@
 
 <svelte:window on:hashchange={hashchange} on:resize={resizeWindow} />
 
-<div class="relative">
+<div class="relative h-full">
 	<div id="app-editor-top-level-drawer" />
 	<div id="app-editor-select" />
 
 	<div
-		class="{$$props.class} {lockedClasses} {width} h-full {app.fullscreen
+		class="{$$props.class} {lockedClasses} {width} light h-full bg-white {app.fullscreen
 			? ''
 			: 'max-w-6xl'} mx-auto"
 	>
diff --git a/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte b/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
index 24f13a99a3..e7740c8284 100644
--- a/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
+++ b/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
@@ -47,7 +47,7 @@
 						{/each}
 					</div>
 				{:else}
-					<div class="text-sm text-gray-500">No items</div>
+					<div class="text-sm text-tertiary">No items</div>
 				{/if}
 			</div>
 		</PanelSection>
@@ -73,7 +73,7 @@
 					<Skeleton layout={[[40]]} />
 				{/if}
 			{:else}
-				<div class="text-sm p-2 text-gray-500">Select a deployment version to see its details</div>
+				<div class="text-sm p-2 text-tertiary">Select a deployment version to see its details</div>
 			{/if}
 		</div>
 	</Pane>
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 67ad99bdad..65c97dec59 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -47,15 +47,15 @@
 	<div
 		class="w-full sticky top-0 flex justify-between border-b {$connectingInput?.opened
 			? ''
-			: 'bg-gray-50 '} px-4 py-1 items-center gap-4"
+			: 'bg-surface'} px-4 py-1 items-center gap-4"
 		style="z-index: 1000;"
 	>
 		<h2 class="truncate">{$summary}</h2>
 		{#if !$connectingInput.opened}
 			<RecomputeAllComponents />
 		{/if}
-		<div class="flex text-2xs text-gray-600 gap-8 items-center">
-			<div class="py-2 pr-2 text-gray-600 flex gap-1 items-center">
+		<div class="flex text-2xs gap-8 items-center">
+			<div class="py-2 pr-2 text-secondary flex gap-1 items-center">
 				Hide bar on view
 				<Toggle size="xs" bind:checked={$app.norefreshbar} />
 			</div>
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
index c86479cdb2..54778e82a6 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
@@ -121,7 +121,7 @@
 	<ButtonDropdown hasPadding={true}>
 		<svelte:fragment slot="label">
 			<span
-				class={classNames('text-xs min-w-[2rem]', interval ? 'text-blue-500' : 'text-gray-600')}
+				class={classNames('text-xs min-w-[2rem]', interval ? 'text-blue-500' : 'text-tertiary')}
 			>
 				{interval ? `${interval / 1000}s` : 'once'}
 			</span>
@@ -139,7 +139,7 @@
 				>
 					<div
 						class={classNames(
-							'!text-gray-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
 						)}
 					>
 						{#if index === 0}
diff --git a/frontend/src/lib/components/apps/editor/TabsDebug.svelte b/frontend/src/lib/components/apps/editor/TabsDebug.svelte
index 4a4aa83328..1cd6bb24e4 100644
--- a/frontend/src/lib/components/apps/editor/TabsDebug.svelte
+++ b/frontend/src/lib/components/apps/editor/TabsDebug.svelte
@@ -39,7 +39,7 @@
 				>
 					<div
 						class={classNames(
-							'!text-gray-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
 						)}
 					>
 						{#if index === tabs.length - 1}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 78ba635d51..bea66636da 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -66,7 +66,7 @@
 	}))
 </script>
 
-<section class="p-2 sticky bg-white w-full z-10 top-0">
+<section class="p-2 sticky w-full z-10 top-0">
 	<ClearableInput bind:value={search} placeholder="Search components..." />
 </section>
 
@@ -75,7 +75,7 @@
 		<div
 			in:fade|local={{ duration: 50, delay: 50 }}
 			out:fade|local={{ duration: 50 }}
-			class="absolute left-0 top-0 w-full text-sm text-gray-500 text-center py-6 px-2"
+			class="absolute left-0 top-0 w-full text-sm text-tertiary text-center py-6 px-2"
 		>
 			No components found
 		</div>
@@ -92,11 +92,11 @@
 											on:click={() => addComponent(item)}
 											title={componentsRecord[item].name}
 											class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
-											justify-center bg-white rounded-md hover:bg-blue-50 duration-200 hover:border-blue-500"
+											justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 										>
-											<svelte:component this={componentsRecord[item].icon} class="text-gray-600" />
+											<svelte:component this={componentsRecord[item].icon} class="text-primary" />
 										</button>
-										<div class="text-xs text-center flex-wrap text-gray-600 mt-1">
+										<div class="text-xs text-center flex-wrap text-secondary mt-1">
 											{componentsRecord[item].name}
 										</div>
 									</div>
@@ -108,14 +108,14 @@
 												on:click={() => addPresetComponent(presetItem)}
 												title={presetsRecord[presetItem].name}
 												class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
-										justify-center bg-white rounded-md hover:bg-blue-50 duration-200 hover:border-blue-500"
+										justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 											>
 												<svelte:component
 													this={presetsRecord[presetItem].icon}
-													class="text-gray-600"
+													class="text-secondary"
 												/>
 											</button>
-											<div class="text-xs text-center flex-wrap text-gray-600 mt-1">
+											<div class="text-xs text-center flex-wrap text-secondary mt-1">
 												{presetsRecord[presetItem].name}
 											</div>
 										</div>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
index 47f9eeadf4..35009e533a 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
@@ -30,20 +30,20 @@
 </script>
 
 <div
-	class="sticky top-0 z-20 text-lg bg-gray-100 font-semibold lowercase leading-none [font-variant:small-caps] text-gray-700 px-3 pb-1 mt-4 mb-1"
+	class="sticky top-0 z-20 text-lg bg-surface-secondary font-semibold lowercase leading-none [font-variant:small-caps] text-secondary px-3 pb-1 mt-4 mb-1"
 >
 	{addWhitespaceBeforeCapitals(name)}
 </div>
 {#if value}
 	<div class="px-3">
 		{#if tooltip}
-			<div class="text-gray-600 text-2xs py-2">{tooltip}</div>
+			<div class="text-tertiary text-2xs py-2">{tooltip}</div>
 		{/if}
 		{#if value.style !== undefined || forceStyle}
 			<div class="pb-2">
 				<!-- svelte-ignore a11y-label-has-associated-control -->
 				<label class="block">
-					<div class="text-sm font-medium text-gray-600 pb-0.5"> Plain CSS </div>
+					<div class="text-sm font-medium text-tertiary pb-0.5"> Plain CSS </div>
 					<div class="flex gap-1">
 						<div class="relative grow">
 							<ClearableInput
@@ -91,7 +91,7 @@
 		{#if value.class !== undefined || forceClass}
 			<!-- svelte-ignore a11y-label-has-associated-control -->
 			<label class="block">
-				<div class="text-sm font-medium text-gray-600 pb-0.5">
+				<div class="text-sm font-medium text-tertiary pb-0.5">
 					Tailwind classes<Tooltip documentationLink="https://tailwindcss.com/"
 						>Use any tailwind classes to style your component</Tooltip
 					></div
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
index d92082d2da..a53587de8b 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
@@ -69,7 +69,7 @@
 	let search = ''
 </script>
 
-<!-- <div class="w-full text-lg font-semibold text-center text-gray-600 p-2">Global Styling</div> -->
+<!-- <div class="w-full text-lg font-semibold text-center text-tertiary p-2">Global Styling</div> -->
 <Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="h-full">
 	<Tab value="ui" size="xs" class="w-1/2">
 		<div class="m-1 center-center">
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
index 98d875cf5a..3d83a26068 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
@@ -30,8 +30,8 @@
 	{#if prefix !== undefined}
 		<button
 			on:click|preventDefault={() => isOpenStore.toggle(storeTitle)}
-			class="w-full flex justify-between items-center text-gray-700 px-2 py-1
-			rounded-sm duration-200 hover:bg-gray-100 {toggleClasses}"
+			class="w-full flex justify-between items-center text-secondary px-2 py-1
+			rounded-sm duration-200 hover:bg-surface-hover {toggleClasses}"
 		>
 			<h1 class="text-sm font-semibold text-left">
 				<slot name="title">
@@ -46,7 +46,7 @@
 			</div>
 		{/if}
 	{:else}
-		<h1 class="text-sm font-semibold text-left px-2 py-1 text-gray-600">
+		<h1 class="text-sm font-semibold text-left px-2 py-1 text-secondary">
 			<slot name="title">
 				{title}
 			</slot>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
index d95720beaf..c780bbbaf4 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
@@ -188,7 +188,7 @@
 				{isOpen[prefix] ? '!bg-gray-100 hover:!bg-gray-200' : ''}"
 			>
 				<svelte:fragment slot="title">
-					<span class="font-semibold text-gray-600 capitalize">
+					<span class="font-semibold text-tertiary capitalize">
 						{group}
 					</span>
 				</svelte:fragment>
@@ -200,7 +200,7 @@
 						} = styleStore.getProp(p)}
 						{#if prop !== undefined && index !== undefined}
 							<div class="pb-2 pt-1">
-								<div class="text-sm font-medium text-gray-600 pb-0.5">
+								<div class="text-sm font-medium text-tertiary pb-0.5">
 									{formatKebabCase(prop.key)}
 								</div>
 								<div class="flex items-center gap-1">
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
index 2621833df8..b38378f70a 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
@@ -49,7 +49,7 @@
 
 <div class={inline && type !== StylePropertyType.color ? '' : 'w-full'}>
 	{#if prop.value['title']}
-		<div class="font-medium text-xs text-gray-500">
+		<div class="font-medium text-xs text-tertiary">
 			{prop.value['title']}
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
index f708bdf274..cd6f8fafb2 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
@@ -47,8 +47,8 @@
 			pureViewer={!$connectingInput.opened}
 		/>
 	{:else if $search.length > 0}
-		<div class="text-xs pl-2 text-gray-600">No results</div>
+		<div class="text-xs pl-2 text-tertiary">No results</div>
 	{:else}
-		<div class="text-xs pl-2 text-gray-600">No outputs</div>
+		<div class="text-xs pl-2 text-tertiary">No outputs</div>
 	{/if}
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index 15c9402a3f..e0df82ddca 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -20,18 +20,20 @@
 <PanelSection noPadding titlePadding="px-2 pt-2" title="Outputs">
 	<div
 		class={classNames(
-			'bg-white w-full h-full z-30',
-			$connectingInput.opened ? 'border-blue-500 border-t-2 border-r-2 bg-blue-50/50 z-50' : ''
+			'bg-surface w-full h-full z-30',
+			$connectingInput.opened
+				? 'border-blue-500 border-t-2 border-r-2 bg-blue-50/50 dark:bg-frost-900/50 z-50'
+				: ''
 		)}
 	>
 		<div class="min-w-[150px]">
-			<div class="sticky z-10 top-0 left-0 w-full bg-white p-1.5">
+			<div class="sticky z-10 top-0 left-0 w-full p-1.5">
 				<ClearableInput bind:value={$search} placeholder="Search outputs..." />
 			</div>
 
 			<div class="flex flex-col gap-4">
 				<div>
-					<span class="text-xs font-semibold text-gray-800 p-2">State & Context</span>
+					<span class="text-xs font-semibold text-secondary p-2">State & Context</span>
 
 					<OutputHeader selectable={false} id={'ctx'} name={'App Context'} first color="blue">
 						<ComponentOutputViewer
@@ -60,13 +62,13 @@
 				</div>
 
 				<div>
-					<span class="text-xs font-semibold text-gray-800 p-2">Components</span>
+					<span class="text-xs font-semibold text-secondary p-2">Components</span>
 					{#each $app.grid as gridItem, index (gridItem.id)}
 						<ComponentOutput {gridItem} first={index === 0} />
 					{/each}
 				</div>
 				<div>
-					<span class="text-xs font-semibold text-gray-800 p-2">Background runnables</span>
+					<span class="text-xs font-semibold text-secondary p-2">Background runnables</span>
 					<BackgroundScriptsOutput />
 				</div>
 			</div>
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte
index 11f52e288f..b928e9ac71 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/SubGridOutput.svelte
@@ -76,7 +76,7 @@
 						/>
 					{/each}
 				{:else}
-					<div class="text-xs text-gray-500 border-y border-l p-1">No components</div>
+					<div class="text-xs text-tertiary border-y border-l p-1">No components</div>
 				{/if}
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte
index b1a368d605..8d5f01cb8e 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte
@@ -45,7 +45,7 @@
 	}}
 	bind:this={button}
 	title="Edit ID"
-	class="flex items-center px-1 rounded-sm bg-gray-100 hover:text-black text-gray-600"
+	class="flex items-center px-1 rounded-sm bg-surface-selected hover:text-primary text-tertiary"
 	aria-label="Open component ID editor"
 >
 	<Pencil size={14} />
@@ -55,11 +55,11 @@
 	options={{ placement: 'top-start' }}
 	transition={fade}
 	wrapperClasses="!z-[1002]"
-	outerClasses="rounded shadow-xl bg-white border p-3"
+	outerClasses="rounded shadow-xl bg-surface border p-3"
 	on:close={() => (value = id)}
 >
-	<label class="block text-gray-900">
-		<div class="pb-1 text-sm text-gray-600">Component ID</div>
+	<label class="block text-primary">
+		<div class="pb-1 text-sm text-secondary">Component ID</div>
 		<div class="flex w-full">
 			<input
 				type="text"
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte
index 0782e85d4e..d43f4c34f9 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte
@@ -32,18 +32,19 @@
 		$allIdsInPath.includes(id) || id == $selectedComponent?.[0] || $manuallyOpened[id] || inSearch
 
 	const hoverColor = {
-		blue: 'hover:bg-blue-100 hover:text-blue-500',
-		indigo: 'hover:bg-indigo-100 hover:text-indigo-500'
+		blue: 'hover:bg-blue-100 hover:text-blue-500 dark:hover:bg-frost-900 dark:hover:text-frost-100',
+		indigo:
+			'hover:bg-indigo-100 hover:text-indigo-500 dark:hover:bg-frost-900 dark:hover:text-indigo-300'
 	}
 
 	const openBackground = {
-		blue: 'bg-blue-50',
-		indigo: 'bg-indigo-50'
+		blue: 'bg-blue-50 dark:bg-frost-800',
+		indigo: 'bg-indigo-50 dark:bg-indigo-800'
 	}
 
 	const manuallyOpenColor = {
-		blue: 'text-gray-900 bg-gray-300 rounded-sm',
-		indigo: 'text-gray-900 bg-gray-300 rounded-sm'
+		blue: 'text-primary bg-gray-300 rounded-sm',
+		indigo: 'text-primary bg-gray-300 rounded-sm'
 	}
 
 	const idClass = {
@@ -168,7 +169,7 @@
 				? openBackground[color]
 				: $connectingInput.hoveredComponent === id
 				? 'bg-orange-300 '
-				: 'bg-white',
+				: 'bg-surface-secondary',
 			first ? 'border-t' : '',
 			nested ? 'border-l' : '',
 			'transition-all'
@@ -184,7 +185,7 @@
 				disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
 				title="Select component"
 				on:click|stopPropagation={() => ($selectedComponent = [id])}
-				class="flex items-center ml-0.5 rounded-sm bg-gray-100 hover:text-black text-gray-600"
+				class="flex items-center ml-0.5 rounded-sm bg-surface-selected hover:text-primary text-tertiary"
 			>
 				<div
 					class={classNames(
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index aba44a0c41..c52d6abaad 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -176,7 +176,7 @@
 					<Button
 						size="xs"
 						color="light"
-						btnClasses="!px-2 !bg-gray-100 hover:!bg-gray-200"
+						btnClasses="!px-2 !bg-surface-secondary hover:!bg-surface-hover"
 						on:click={() => {
 							inlineScriptEditorDrawer?.openDrawer()
 						}}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
index 64d872c459..038e4ca537 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
@@ -47,7 +47,7 @@
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-gray-600">
+		<span class="px-2 text-tertiary">
 			Selected editor component is a transformer but component has no transformer
 		</span>
 	{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
index 01f9839ea9..b1fc261ae3 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
@@ -38,7 +38,7 @@
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-gray-600">
+		<span class="px-2 text-tertiary">
 			Selected editor component is a transformer but component has no transformer
 		</span>
 	{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index 43c839532c..286113ace5 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -59,7 +59,7 @@
 		</Pane>
 		<Pane size={75}>
 			{#if !$selectedComponentInEditor}
-				<div class="text-sm text-gray-500 text-center py-8 px-2">
+				<div class="text-sm text-secondary text-center py-8 px-2">
 					Select a script on the left panel
 				</div>
 			{:else if gridItem}
@@ -89,7 +89,7 @@
 							bind:runnable={$app.hiddenInlineScripts[hiddenInlineScript]}
 						/>{/if}{/key}
 			{:else}
-				<div class="text-sm text-gray-500 text-center py-8 px-2">
+				<div class="text-sm text-tertiary text-center py-8 px-2">
 					No script found at id {$selectedComponentInEditor}
 				</div>
 			{/if}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
index 4187dbcf26..f437711c70 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
@@ -80,7 +80,9 @@
 							<button
 								id={PREFIX + id}
 								class="panel-item
-				{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+				{$selectedComponentInEditor === id
+									? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
+									: 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id)}
 							>
 								<span class="text-2xs truncate">{name}</span>
@@ -94,7 +96,7 @@
 										id={PREFIX + id + '_transformer'}
 										class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
 			{$selectedComponentInEditor === id + '_transformer'
-											? 'border-blue-500 bg-blue-100'
+											? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
 											: 'hover:bg-blue-50'}"
 										on:click={() => selectScript(id + '_transformer')}
 									>
@@ -109,7 +111,9 @@
 					<button
 						id={PREFIX + id}
 						class="panel-item
-						{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+						{$selectedComponentInEditor === id
+							? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
+							: 'hover:bg-blue-50'}"
 						on:click={() => selectScript(id)}
 					>
 						<span class="text-2xs truncate">{name}</span>
@@ -121,7 +125,7 @@
 								id={PREFIX + id + '_transformer'}
 								class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
 {$selectedComponentInEditor === id + '_transformer'
-									? 'border-blue-500 bg-blue-100'
+									? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
 									: 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id + '_transformer')}
 							>
@@ -138,7 +142,9 @@
 							<button
 								id={PREFIX + id}
 								class="panel-item
-								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								{$selectedComponentInEditor === id
+									? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
+									: 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id)}
 							>
 								<span class="text-2xs truncate">{unusedInlineScript.name}</span>
@@ -148,14 +154,14 @@
 					</div>
 				{/if}
 				{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0 && runnables.imported.length == 0}
-					<div class="text-xs text-gray-500">No scripts/flows</div>
+					<div class="text-xs text-tertiary">No scripts/flows</div>
 				{/if}
 			</div>
 		</div>
 
 		<div>
 			<div class="w-full flex justify-between items-center mb-1">
-				<div class="text-xs text-gray-600 font-semibold truncate">
+				<div class="text-xs text-tertiary font-semibold truncate">
 					Background runnables
 					<Tooltip
 						class="mb-0.5"
@@ -174,7 +180,7 @@
 					aria-label="Create a new background runnable"
 					on:click={createBackgroundScript}
 				>
-					<Plus size={14} class="text-gray-500" />
+					<Plus size={14} class="!text-primary" />
 				</Button>
 			</div>
 			<div class="flex flex-col gap-1 w-full">
@@ -185,7 +191,9 @@
 							<button
 								id={PREFIX + id}
 								class="panel-item
-								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								{$selectedComponentInEditor === id
+									? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
+									: 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id)}
 							>
 								<span class="text-2xs truncate">{name}</span>
@@ -197,7 +205,7 @@
 										id={PREFIX + id + '_transformer'}
 										class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
 		{$selectedComponentInEditor === id + '_transformer'
-											? 'border-blue-500 bg-blue-100'
+											? 'border-blue-500 bg-blue-100 dark:bg-frost-900/50'
 											: 'hover:bg-blue-50'}"
 										on:click={() => selectScript(id + '_transformer')}
 									>
@@ -208,7 +216,7 @@
 						{/if}
 					{/each}
 				{:else}
-					<div class="text-xs text-gray-500">No background runnable</div>
+					<div class="text-xs text-tertiary">No background runnable</div>
 				{/if}
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
index 2eda7ea269..512e890255 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
@@ -20,7 +20,7 @@
 
 {#if component.horizontalAlignment || component.verticalAlignment}
 	<div class="flex flex-wrap gap-x-4 gap-y-1 w-full justify-end items-center">
-		<div class="text-gray-600 text-xs">Alignment</div>
+		<div class="text-tertiary text-xs">Alignment</div>
 		{#if component.horizontalAlignment}
 			<ToggleButtonGroup
 				noWFull
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
index 376e706126..8a88fe326f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
@@ -124,7 +124,7 @@
 <div class="flex gap-2 flex-col mt-2 w-full">
 	{#key redraw}
 		{#if Array.isArray(items) && componentInput.value}
-			<div class="text-xs text-gray-600 font-semibold">{pluralize(items.length, 'item')}</div>
+			<div class="text-xs text-tertiary font-semibold">{pluralize(items.length, 'item')}</div>
 			<section
 				use:dndzone={{
 					items,
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index ef984f27c6..1edeee15c3 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -130,14 +130,14 @@
 
 {#if componentSettings?.item?.data}
 	{@const component = componentSettings.item.data}
-	<div class="flex justify-between items-center px-3 py-2 bg-gray-100">
-		<div class="text-xs text-gray-900 font-semibold"
+	<div class="flex justify-between items-center px-3 py-2 bg-surface-selected">
+		<div class="text-xs text-primary font-semibold"
 			>{components[componentSettings.item.data.type].name}</div
 		>
 		<a
 			href={components[componentSettings.item.data.type].documentationLink}
 			target="_blank"
-			class="text-frost-500 font-semibold text-xs"
+			class="text-frost-500 dark:text-frost-300 font-semibold text-xs"
 		>
 			<div class="flex flex-row gap-2">
 				See documentation
@@ -243,7 +243,7 @@
 				/>
 			</PanelSection>
 		{:else}
-			<div class="h-full w-full text-sm text-gray-500 text-center py-8 px-2"
+			<div class="h-full w-full text-sm text-tertiary text-center py-8 px-2"
 				>{ccomponents[component.type].name} has no configuration</div
 			>
 		{/if}
@@ -344,23 +344,23 @@
 				</div>
 				<div class="flex flex-col gap-1">
 					<div>
-						<span class="text-gray-600 text-xs mr-2"> Copy:</span>
+						<span class="text-secondary text-xs mr-2"> Copy:</span>
 						<Kbd>{getModifierKey()}</Kbd>+<Kbd>C</Kbd>,
 						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
 					</div>
 					<div>
-						<span class="text-gray-600 text-xs mr-2">Move: </span>
+						<span class="text-secondary text-xs mr-2">Move: </span>
 						<Kbd>{getModifierKey()}</Kbd>+<Kbd>X</Kbd>,
 						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
 					</div>
 					<div>
-						<span class="text-gray-600 text-xs mr-2">Navigate:</span>
+						<span class="text-secondary text-xs mr-2">Navigate:</span>
 						<Kbd>&leftarrow;</Kbd>
 						<Kbd>&uparrow;</Kbd><Kbd>&rightarrow;</Kbd>
 						<Kbd>ESC</Kbd>
 					</div>
 					<div>
-						<span class="text-gray-600 text-xs mr-2">Add to selection:</span>
+						<span class="text-secondary text-xs mr-2">Add to selection:</span>
 						<Kbd>&DoubleUpArrow;</Kbd>+<Kbd>click</Kbd>
 					</div>
 				</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
index df125551ad..d7a1f05caf 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte
@@ -133,7 +133,7 @@
 		subgrid.
 	</Alert>
 	{#if items.length == 0}
-		<span class="text-xs text-gray-500">No Tabs</span>
+		<span class="text-xs text-tertiary">No Tabs</span>
 	{/if}
 	<div class="w-full flex flex-col mt-2">
 		<section
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
index 1f44393e1c..27829c4ee5 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
@@ -47,7 +47,7 @@
 
 <PanelSection title={`panes ${panes.length > 0 ? `(${panes.length})` : ''}`}>
 	{#if panes.length == 0}
-		<span class="text-xs text-gray-500">No panes</span>
+		<span class="text-xs text-tertiary">No panes</span>
 	{/if}
 	<div class="w-full flex gap-2 flex-col mt-2">
 		{#each panes as value, index (index)}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index fde6f20d6f..f8baecdb71 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -158,7 +158,7 @@
 
 <PanelSection title={`${word}s ${tabs.length > 0 ? `(${tabs.length})` : ''}`}>
 	{#if tabs.length == 0}
-		<span class="text-xs text-gray-500">No Tabs</span>
+		<span class="text-xs text-tertiary">No Tabs</span>
 	{/if}
 	<div class="w-full flex gap-2 flex-col mt-2">
 		<section
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
index 207c720364..6af5e240c3 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
@@ -60,7 +60,7 @@
 	>
 		<div class="flex justify-between items-end">
 			<div class="flex flex-row gap-4 items-center">
-				<span class="text-xs font-semibold truncate text-gray-800">
+				<span class="text-xs font-semibold truncate text-primary">
 					{customTitle
 						? customTitle
 						: shouldCapitalize
@@ -73,7 +73,7 @@
 					{/if}
 				</span>
 				{#if displayType}
-					<div class="text-xs text-gray-500">
+					<div class="text-xs text-tertiary">
 						{fieldType === 'array' && subFieldType
 							? `${fieldTypeToTsType(subFieldType)}[]`
 							: fieldTypeToTsType(fieldType)}
@@ -142,7 +142,7 @@
 		{:else if componentInput?.type === 'upload'}
 			<UploadInputEditor bind:componentInput {fileUpload} />
 		{:else if componentInput?.type === 'user'}
-			<span class="text-2xs italic text-gray-600">Field's value is set by the user</span>
+			<span class="text-2xs italic text-tertiary">Field's value is set by the user</span>
 		{/if}
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
index 27513d09d1..4475b5cc09 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
@@ -54,5 +54,5 @@
 		{/each}
 	</div>
 {:else}
-	<div class="text-gray-500 text-sm">No inputs</div>
+	<div class="text-tertiary text-sm">No inputs</div>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte
index 5e73a0e936..000da5f9fb 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte
@@ -28,10 +28,10 @@
 		<table class="divide-y divide-gray-300 border w-full">
 			<thead class="bg-gray-50">
 				<tr>
-					<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500">
+					<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-tertiary">
 						Component
 					</th>
-					<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500">
+					<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-tertiary">
 						Recompute
 					</th>
 				</tr>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
index a8c5b51d80..711a86d765 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
@@ -47,13 +47,13 @@
 
 <PanelSection title={`Table actions`}>
 	{#if components.length == 0}
-		<span class="text-xs text-gray-500">No action buttons</span>
+		<span class="text-xs text-tertiary">No action buttons</span>
 	{/if}
 	{#each components as component}
 		<div
 			class={classNames(
 				'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
-				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
+				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-secondary',
 				$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
 			)}
 			on:click={() => {
@@ -83,7 +83,7 @@
 	{/each}
 	<div class="w-full flex gap-2">
 		<Button
-			btnClasses="gap-1 flex items-center text-sm text-gray-600"
+			btnClasses="gap-1 flex items-center text-sm text-tertiary"
 			wrapperClasses="w-full"
 			color="light"
 			variant="border"
@@ -93,7 +93,7 @@
 			+ <Inspect size={14} />
 		</Button>
 		<Button
-			btnClasses="gap-1 flex items-center text-sm text-gray-600"
+			btnClasses="gap-1 flex items-center text-sm text-tertiary"
 			wrapperClasses="w-full"
 			color="light"
 			variant="border"
@@ -103,7 +103,7 @@
 			+ <ToggleRightIcon size={14} />
 		</Button>
 		<Button
-			btnClasses="gap-1 flex items-center text-sm text-gray-600"
+			btnClasses="gap-1 flex items-center text-sm text-tertiary"
 			wrapperClasses="w-full"
 			color="light"
 			variant="border"
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
index b25e95bfeb..dbd5fc48a0 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
@@ -17,7 +17,7 @@
 	)}
 >
 	<div class="flex justify-between flex-wrap items-center w-full gap-1">
-		<div class="text-sm inline-flex items-center font-semibold text-gray-800 {titlePadding} gap-1">
+		<div class="text-sm inline-flex items-center font-semibold text-primary {titlePadding} gap-1">
 			<span class="truncate">
 				{title}
 			</span>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
index 6147c20a04..f7bc3574a2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
@@ -107,13 +107,13 @@
 								</span>
 							</button>
 						{:else}
-							<div class="col-span-4 text-center text-gray-700 text-sm p-2">
+							<div class="col-span-4 text-center text-secondary text-sm p-2">
 								No icons match your search
 							</div>
 						{/each}
 					</div>
 				{:else}
-					<div class="text-center text-sm text-gray-600 p-2"> Couldn't load options </div>
+					<div class="text-center text-sm text-secondary p-2"> Couldn't load options </div>
 				{/if}
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte
index 347f0a2c7b..e30e2a3620 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte
@@ -24,10 +24,10 @@
 </script>
 
 {#if tooBig}
-	<span class="text-gray-600">JSON to edit is too big</span>
+	<span class="text-tertiary">JSON to edit is too big</span>
 {:else}
 	<div class="flex flex-col w-full">
-		<div class="border border-gray-300 w-full">
+		<div class="border w-full">
 			<SimpleEditor
 				{small}
 				on:focus
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte
index 19a96d3446..f22b11cbaf 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte
@@ -51,5 +51,5 @@
 		</div>
 	</div>
 {:else}
-	<div class="text-xs text-gray-500"> No tab component found in the app </div>
+	<div class="text-xs text-tertiary"> No tab component found in the app </div>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte
index d928e1b014..40eb28cd77 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte
@@ -28,23 +28,23 @@
 </div>
 
 {#if inlineScripts.length === 0}
-	<div class="flex flex-col  w-full h-full">
+	<div class="flex flex-col w-full h-full">
 		<div class="text-md">No detached inline scripts</div>
 	</div>
 {:else if filteredItems.length === 0}
 	<NoItemFound />
 {:else}
-	<ul class="divide-y divide-gray-200 border rounded-md">
+	<ul class="divide-y border rounded-md">
 		{#each filteredItems as item (item)}
 			<li class="flex flex-row w-full">
 				<button
-					class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+					class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
 					on:click={() => dispatch('pick', item.title)}
 				>
 					<div class="flex items-center gap-4">
 						<RowIcon kind="script" />
 
-						<div class="w-full text-left font-normal ">
+						<div class="w-full text-left font-normal">
 							<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
 								{#if item.marked}
 									{@html item.marked ?? ''}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte
index e7571219ca..f138459c46 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte
@@ -54,21 +54,21 @@
 			{#each filteredItems as item (item)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
 						on:click={() => dispatch('pick', item.path)}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />
 
 							<div class="w-full text-left font-normal">
-								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+								<div class="text-primary flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}
 										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs">
+								<div class="text-tertiary text-xs">
 									{item.path}
 								</div>
 							</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte
index 9278466d40..e04a72619c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte
@@ -50,25 +50,25 @@
 	{#if filteredItems.length == 0}
 		<NoItemFound />
 	{:else}
-		<ul class="divide-y divide-gray-200 border rounded-md">
+		<ul class="divide-y border rounded-md">
 			{#each filteredItems as item (item)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
 						on:click={() => dispatch('pick', item.path)}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="script" />
 
 							<div class="w-full text-left font-normal">
-								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+								<div class="text-primary flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}
 										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs">
+								<div class="text-tertiary text-xs">
 									{item.path}
 								</div>
 							</div>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte
index a3975a20e6..32f709f09b 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/ComponentScriptSettings.svelte
@@ -49,7 +49,7 @@
 	}
 </script>
 
-<div class={'border border-gray-200 divide-y'}>
+<div class={'border divide-y'}>
 	<ScriptSettingHeader
 		name={runnable?.type === 'runnableByName'
 			? runnable.name
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingHeader.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingHeader.svelte
index 3a161e404b..53d2ad67ab 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptSettingHeader.svelte
@@ -7,7 +7,7 @@
 	export let actions: ActionType[] = []
 </script>
 
-<div class="flex flex-row p-2 border-gray-200 justify-between bg-blue-50/60">
+<div class="flex flex-row p-2 border-gray-200 justify-between bg-blue-50/60 dark:bg-frost-900/60">
 	<div class="flex flex-row gap-2 items-center">
 		<FunctionSquare size={16} color="#3b82f6" />
 		<span class="text-xs font-semibold truncate">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
index 5a5b61a294..fa8ef2428f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
@@ -26,9 +26,9 @@
 		<div
 			transition:fly|local={{ duration: 300, x: width, y: 0, opacity: 1 }}
 			id={SECONDARY_MENU_ID}
-			class="flex flex-col w-full h-full bg-white"
+			class="flex flex-col w-full h-full bg-surface"
 		>
-			<div class="flex justify-between items-center bg-white gap-1 px-3 py-2">
+			<div class="flex justify-between items-center gap-1 px-3 py-2">
 				<Button
 					color="light"
 					size="xs2"
diff --git a/frontend/src/lib/components/apps/svelte-select/lib/tailwind.css b/frontend/src/lib/components/apps/svelte-select/lib/tailwind.css
index 637b4902e5..2b43fcab48 100644
--- a/frontend/src/lib/components/apps/svelte-select/lib/tailwind.css
+++ b/frontend/src/lib/components/apps/svelte-select/lib/tailwind.css
@@ -6,7 +6,7 @@
 }
 
 .svelte-select input {
-    @apply cursor-default border-none text-gray-600 h-10 leading-10 px-4 py-0 bg-transparent text-sm absolute left-0 m-0 w-full 
+    @apply cursor-default border-none text-tertiary h-10 leading-10 px-4 py-0 bg-transparent text-sm absolute left-0 m-0 w-full 
         focus:outline-none hover:border-gray-400;
 }
 
@@ -15,7 +15,7 @@
 }
 
 .svelte-select.disabled {
-    @apply bg-gray-200 border-gray-200 text-gray-600;
+    @apply bg-gray-200 border-gray-200 text-tertiary;
 }
 
 .svelte-select.disabled input {
@@ -42,7 +42,7 @@
 .svelte-select.focused .icons,
 .svelte-select .chevron:hover,
 .svelte-select .clear-select:hover {
-    @apply text-gray-600;
+    @apply text-tertiary;
 }
 
 .svelte-select .clear-select {
@@ -78,7 +78,7 @@
 }
 
 .list .empty {
-    @apply text-center py-5 text-gray-500;
+    @apply text-center py-5 text-tertiary;
 }
 
 .item {
@@ -118,7 +118,7 @@
 }
 
 .multi-item.disabled {
-    @apply hover:bg-gray-300 hover:text-gray-500;
+    @apply hover:bg-gray-300 hover:text-tertiary;
 }
 
 .multi-item-clear {
diff --git a/frontend/src/lib/components/codeGen/ScriptGen.svelte b/frontend/src/lib/components/codeGen/ScriptGen.svelte
index 347ac2d753..5c057ae80b 100644
--- a/frontend/src/lib/components/codeGen/ScriptGen.svelte
+++ b/frontend/src/lib/components/codeGen/ScriptGen.svelte
@@ -174,7 +174,7 @@
 			size="lg"
 			bind:element={button}
 			color="light"
-			btnClasses="!px-2 !bg-gray-100 hover:!bg-gray-200"
+			btnClasses="!px-2 !bg-surface-secondary hover:!bg-surface-hover"
 			loading={genLoading}
 		>
 			<Icon scale={0.8} data={faMagicWandSparkles} />
@@ -182,7 +182,7 @@
 	{:else}
 		<Button
 			title="Generate code from prompt"
-			btnClasses="!font-medium text-gray-600"
+			btnClasses="!font-medium text-scondary"
 			size="xs"
 			color="light"
 			spacingSize="md"
@@ -201,9 +201,9 @@
 			transition={fade}
 			closeOn={[]}
 			wrapperClasses="!z-[1002]"
-			outerClasses="rounded shadow-xl bg-white border p-3 w-96"
+			outerClasses="rounded shadow-xl bg-surface border p-3 w-96"
 		>
-			<label class="block text-gray-900">
+			<label class="block text-primary">
 				<div class="flex w-full">
 					<input
 						type="text"
diff --git a/frontend/src/lib/components/common/CloseButton.svelte b/frontend/src/lib/components/common/CloseButton.svelte
index ab792ced7e..1219e93a41 100644
--- a/frontend/src/lib/components/common/CloseButton.svelte
+++ b/frontend/src/lib/components/common/CloseButton.svelte
@@ -10,9 +10,9 @@
 
 <button
 	on:click={() => dispatch('close')}
-	class="hover:bg-gray-200 {noBg
+	class="hover:bg-surface-hover {noBg
 		? ''
-		: 'bg-gray-100'} rounded-full w-8 h-8 flex items-center justify-center transition-all"
+		: 'bg-surface-secondary'} rounded-full w-8 h-8 flex items-center justify-center transition-all"
 >
-	<Icon data={faClose} class="text-gray-500" />
+	<Icon data={faClose} class="text-secondary" />
 </button>
diff --git a/frontend/src/lib/components/common/actionRow/ActionRow.svelte b/frontend/src/lib/components/common/actionRow/ActionRow.svelte
index aff0a02fe8..912764bc62 100644
--- a/frontend/src/lib/components/common/actionRow/ActionRow.svelte
+++ b/frontend/src/lib/components/common/actionRow/ActionRow.svelte
@@ -10,7 +10,7 @@
 <svelte:window bind:scrollY />
 
 <div
-	class={'bg-white py-3 ' +
+	class={'bg-surface py-3 ' +
 		(stickToTop
 			? 'lg:sticky lg:top-0 z-[500] border-b border-gray-200 border-opacity-0 duration-300 ' +
 			  (scrollY >= 30 ? 'border-opacity-100 ' : '')
diff --git a/frontend/src/lib/components/common/alert/Alert.svelte b/frontend/src/lib/components/common/alert/Alert.svelte
index bbf87648fd..10cd822c98 100644
--- a/frontend/src/lib/components/common/alert/Alert.svelte
+++ b/frontend/src/lib/components/common/alert/Alert.svelte
@@ -27,28 +27,28 @@
 
 	const classes: Record<AlertType, Record<string, string>> = {
 		info: {
-			bgClass: 'bg-blue-50 border-blue-200 border',
-			iconClass: 'text-blue-500',
-			titleClass: 'text-blue-800',
-			descriptionClass: 'text-blue-700'
+			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'
 		},
 		warning: {
-			bgClass: 'bg-yellow-50 border-yellow-200 border',
-			iconClass: 'text-yellow-500',
-			titleClass: 'text-yellow-800',
-			descriptionClass: 'text-yellow-700'
+			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'
 		},
 		error: {
-			bgClass: 'bg-red-50 border-red-200 border',
-			iconClass: 'text-red-500',
-			titleClass: 'text-red-800',
-			descriptionClass: 'text-red-700'
+			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'
 		},
 		success: {
-			bgClass: 'bg-green-50 border-green-200 border',
-			iconClass: 'text-green-500',
-			titleClass: 'text-green-800',
-			descriptionClass: 'text-green-700'
+			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'
 		}
 	}
 </script>
@@ -75,8 +75,8 @@
 				)}
 			>
 				{title}&nbsp;{#if tooltip != '' || documentationLink}
-				<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
-			{/if}
+					<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
+				{/if}
 			</span>
 			<div
 				class={classNames(
diff --git a/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte b/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
index 00da5b3ab1..f228e4d160 100644
--- a/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
+++ b/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
@@ -17,7 +17,7 @@
 		<Button
 			size="sm"
 			color="light"
-			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-gray-500'}
+			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-tertiary'}
 			on:click={() => dispatch('select', { index })}
 			disabled={selectedIndex - 1 === index ? disabled : false}
 		>
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index debde0c401..68767b0aba 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -56,42 +56,43 @@
 
 		blue: {
 			border:
-				'border-frost-500 hover:border-frost-700 focus:border-frost-700 bg-white hover:bg-frost-100 focus:bg-frost-100 text-frost-500 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
+				'border-frost-500 dark:border-frost-300 hover:border-frost-700 dark:hover:border-frost-400 focus:border-frost-700 bg-surface hover:bg-frost-100 dark:hover:bg-frost-900 focus:bg-frost-100 text-frost-500 dark:text-frost-300 dark:hover:text-frost-400 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
 			contained:
 				'bg-frost-500 hover:bg-frost-700 focus:bg-frost-700 text-white focus:ring-frost-300',
 			divider: 'divide-x divide-frost-600'
 		},
 		red: {
 			border:
-				'border-red-600 hover:border-red-700 bg-white hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300',
+				'border-red-600 hover:border-red-700 bg-surface hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300',
 			contained: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-300',
 			divider: 'divide-x divide-red-700'
 		},
 		green: {
 			border:
-				'border-green-600 hover:border-green-700 bg-white hover:bg-green-100 text-green-600 hover:text-green-700 focus:ring-green-300',
+				'border-green-600 hover:border-green-700 bg-surface hover:bg-green-100 text-green-600 hover:text-green-700 focus:ring-green-300',
 			contained: 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-300',
 			divider: 'divide-x divide-green-700'
 		},
 		dark: {
 			border:
-				'border-gray-800 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
-			contained: 'bg-gray-700 hover:bg-gray-900 focus:bg-gray-900 text-white focus:ring-gray-300',
-			divider: 'divide-x divide-gray-800'
+				'border-surface-inverse bg-surface hover:bg-surface-hover focus:bg-surface-hover text-primary hover:text-secondary focus:text-secondary focus:ring-surface-selected-inverse',
+			contained:
+				'bg-surface-inverse hover:bg-surface-inverse-hover focus:bg-surface-hover-inverse text-primary-inverse focus:ring-surface-selected-inverse',
+			divider: 'divide-x divide-gray-800 dark:divide-gray-200'
 		},
 		gray: {
 			border:
-				'border-gray-600 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
+				'border-gray-600 hover:border-gray-900 focus:border-gray-900 bg-surface hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
 			contained:
 				'bg-gray-700/90 hover:bg-gray-900/90 focus:bg-gray-900/90 text-white focus:ring-gray-300',
-			divider: 'divide-x divide-gray-700'
+			divider: 'divide-x divide-gray-700 dark:divide-gray-200'
 		},
 		light: {
 			border:
-				'border border-gray-300 bg-white hover:bg-gray-100 focus:bg-gray-100 text-gray-700 hover:text-gray-800 focus:text-gray-800 focus:ring-gray-300',
+				'border bg-surface hover:bg-surface-hover focus:bg-surface-hover text-primary hover:text-secondary focus:text-secondary focus:ring-surface-selected',
 			contained:
-				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700 focus:ring-gray-300',
-			divider: 'divide-x divide-gray-200'
+				'bg-surface hover:bg-surface-hover focus:bg-surface-hover text-primary focus:ring-surface-selected',
+			divider: 'divide-x divide-gray-200 dark:divide-gray-700'
 		}
 	}
 
@@ -141,7 +142,7 @@
 			{download}
 			class={twMerge(
 				buttonClass,
-				disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''
+				disabled ? '!bg-surface-disabled !text-tertiary !cursor-not-allowed' : ''
 			)}
 			{id}
 			{target}
@@ -171,7 +172,7 @@
 			on:blur
 			class={twMerge(
 				buttonClass,
-				disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''
+				disabled ? '!bg-surface-disabled !text-disabled !cursor-not-allowed' : ''
 			)}
 			{id}
 			tabindex={disabled ? -1 : 0}
@@ -203,7 +204,7 @@
 						<MenuItem on:click={item.onClick} href={item.href}>
 							<div
 								class={classNames(
-									'!text-gray-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+									'!text-secondary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
 								)}
 							>
 								{#if item.icon}
diff --git a/frontend/src/lib/components/common/button/ButtonDropdown.svelte b/frontend/src/lib/components/common/button/ButtonDropdown.svelte
index c86aaedb7b..415c2781dc 100644
--- a/frontend/src/lib/components/common/button/ButtonDropdown.svelte
+++ b/frontend/src/lib/components/common/button/ButtonDropdown.svelte
@@ -46,7 +46,7 @@
 				leaveTo="transform opacity-0 scale-95"
 			>
 				<MenuItems
-					class="absolute border right-0 z-50 w-56 origin-top-right top-1 rounded-md bg-white shadow-md focus:outline-none"
+					class="absolute border right-0 z-50 w-56 origin-top-right top-1 rounded-md bg-surface shadow-md focus:outline-none"
 				>
 					<div class="my-1">
 						<slot name="items" />
diff --git a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
index d5976a770a..c9786134dd 100644
--- a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
+++ b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
@@ -48,8 +48,8 @@
 	outerClasses="rounded shadow-xl bg-white border p-3"
 	closeOn={[]}
 >
-	<label class="block text-gray-900">
-		<div class="pb-1 text-sm text-gray-600">{label}</div>
+	<label class="block text-primary">
+		<div class="pb-1 text-sm text-tertiary">{label}</div>
 		<div class="flex w-full">
 			<input type="datetime-local" bind:value class="!w-auto grow" bind:this={input} />
 			<Button
diff --git a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
index a3c0b0da84..16ada89cf5 100644
--- a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
@@ -52,21 +52,23 @@
 			<div class="flex min-h-full items-center justify-center p-4">
 				<div
 					class={classNames(
-						'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
+						'relative transform overflow-hidden rounded-lg bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
 						open
 							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
 							: 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
 					)}
 				>
 					<div class="flex">
-						<div class="flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-							<Icon data={faWarning} class="text-red-500" />
+						<div
+							class="flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-800/50"
+						>
+							<Icon data={faWarning} class="text-red-500 dark:text-red-400" />
 						</div>
 						<div class="ml-4 text-left flex-1">
-							<h3 class="text-lg font-medium text-gray-900">
+							<h3 class="text-lg font-medium text-primary">
 								{title}
 							</h3>
-							<div class="mt-2 text-sm text-gray-500">
+							<div class="mt-2 text-sm text-secondary">
 								<slot />
 							</div>
 						</div>
diff --git a/frontend/src/lib/components/common/drawer/Drawer.svelte b/frontend/src/lib/components/common/drawer/Drawer.svelte
index 969db81785..31d164af21 100644
--- a/frontend/src/lib/components/common/drawer/Drawer.svelte
+++ b/frontend/src/lib/components/common/drawer/Drawer.svelte
@@ -117,7 +117,7 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background: rgba(100, 100, 100, 0.5);
+		background: rgba(0, 0, 0, 0.5);
 		opacity: 0;
 		z-index: 2;
 		transition: opacity var(--duration) ease;
@@ -135,7 +135,7 @@
 	.panel {
 		position: fixed;
 		width: 100%;
-		background: white;
+		@apply bg-surface;
 		z-index: 3;
 		transition: transform var(--duration) ease;
 		height: 100%;
diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
index 96abf70212..55720735ec 100644
--- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte
+++ b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
@@ -18,7 +18,7 @@
 		<div class="flex items-center gap-2 min-w-0">
 			<CloseButton on:close />
 
-			<span class="font-semibold truncate text-gray-800"
+			<span class="font-semibold truncate text-primary"
 				>{title ?? ''}
 				{#if tooltip != '' || documentationLink}
 					<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
diff --git a/frontend/src/lib/components/common/fileInput/FileInput.svelte b/frontend/src/lib/components/common/fileInput/FileInput.svelte
index c141fd11b7..3d4f36eb1e 100644
--- a/frontend/src/lib/components/common/fileInput/FileInput.svelte
+++ b/frontend/src/lib/components/common/fileInput/FileInput.svelte
@@ -95,7 +95,7 @@
 
 <button
 	class={twMerge(
-		`relative center-center flex-col text-center font-medium text-gray-600 
+		`relative center-center flex-col text-center font-medium text-tertiary 
 		border-2 border-dashed border-gray-400 hover:border-blue-500 
 		focus-within:border-blue-500 hover:bg-blue-50 focus-within:bg-blue-50 
 		duration-200 rounded-lg p-1`,
diff --git a/frontend/src/lib/components/common/kbd/Kbd.svelte b/frontend/src/lib/components/common/kbd/Kbd.svelte
index c01fd93fca..3790a13c40 100644
--- a/frontend/src/lib/components/common/kbd/Kbd.svelte
+++ b/frontend/src/lib/components/common/kbd/Kbd.svelte
@@ -11,7 +11,7 @@
 <span
 	class="{$$props.class} {small
 		? 'h-4  center-center'
-		: ''} -py-0.5 ml-0.5 rounded border bg-white/70 text-gray-600 shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-500"
+		: ''} -py-0.5 ml-0.5 rounded border bg-surface-secondary text-primary shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-inverse"
 >
 	<kbd class={kbdClass}>
 		<slot />
diff --git a/frontend/src/lib/components/common/menu/Menu.svelte b/frontend/src/lib/components/common/menu/Menu.svelte
index 23d14b86d5..fa07ed7447 100644
--- a/frontend/src/lib/components/common/menu/Menu.svelte
+++ b/frontend/src/lib/components/common/menu/Menu.svelte
@@ -75,7 +75,7 @@
 		<div
 			transition:fade|local={{ duration: transitionDuration }}
 			class={classNames(
-				'z-50 absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
+				'z-50 absolute mt-2 rounded-md shadow-lg bg-surface ring-1 ring-black ring-opacity-5 focus:outline-none',
 				placementsClasses[placement],
 				noMinW ? 'min-w-0' : 'w-60',
 				popupClasses
diff --git a/frontend/src/lib/components/common/menu/MenuItem.svelte b/frontend/src/lib/components/common/menu/MenuItem.svelte
index b293cdd5c9..e737e30159 100644
--- a/frontend/src/lib/components/common/menu/MenuItem.svelte
+++ b/frontend/src/lib/components/common/menu/MenuItem.svelte
@@ -1,7 +1,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click class="py-1">
 	<span
-		class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+		class="text-secondary block px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 		role="menuitem"
 		tabindex="-1"
 	>
diff --git a/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte b/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
index 2ff426524e..5ee7086fb7 100644
--- a/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
+++ b/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
@@ -54,7 +54,7 @@
 							style={css?.button?.style}
 							class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
 						>
-							<X class="text-gray-500" />
+							<X class="text-tertiary" />
 						</button>
 					</div>
 				</div>
diff --git a/frontend/src/lib/components/common/modal/Modal.svelte b/frontend/src/lib/components/common/modal/Modal.svelte
index aca2788ea8..db01d95469 100644
--- a/frontend/src/lib/components/common/modal/Modal.svelte
+++ b/frontend/src/lib/components/common/modal/Modal.svelte
@@ -57,7 +57,7 @@
 				<div
 					on:click|stopPropagation
 					class={twMerge(
-						'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
+						'relative transform overflow-hidden rounded-lg bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
 						c,
 						open
 							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
@@ -67,10 +67,10 @@
 				>
 					<div class="flex">
 						<div class="ml-4 text-left flex-1">
-							<h3 class="text-lg font-medium text-gray-900">
+							<h3 class="text-lg font-medium text-primary">
 								{title}
 							</h3>
-							<div class="mt-2 text-sm text-gray-500">
+							<div class="mt-2 text-sm text-tertiary">
 								<slot />
 							</div>
 						</div>
diff --git a/frontend/src/lib/components/common/skeleton/SkeletonElement.svelte b/frontend/src/lib/components/common/skeleton/SkeletonElement.svelte
index ea652a8429..98c0d2891d 100644
--- a/frontend/src/lib/components/common/skeleton/SkeletonElement.svelte
+++ b/frontend/src/lib/components/common/skeleton/SkeletonElement.svelte
@@ -5,6 +5,6 @@
 </script>
 
 <div
-	class="animate-skeleton [animation-delay:1000ms]"
+	class="animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms]"
 	style="height: {element.h * HEIGHT_UNIT}px; width: {element.w}%; min-width: {element.minW}px;"
 />
diff --git a/frontend/src/lib/components/common/stepper/Stepper.svelte b/frontend/src/lib/components/common/stepper/Stepper.svelte
index 5528f5ec86..2ebac03251 100644
--- a/frontend/src/lib/components/common/stepper/Stepper.svelte
+++ b/frontend/src/lib/components/common/stepper/Stepper.svelte
@@ -44,7 +44,7 @@
 					: 'border-blue-500 border'
 			} else {
 				return current
-					? 'border-gray-500 border bg-gray-200 text-gray-600'
+					? 'border-gray-500 border bg-gray-200 text-tertiary'
 					: 'border-gray-500 border'
 			}
 		}
@@ -52,7 +52,7 @@
 </script>
 
 <div class="flex justify-between">
-	<ol class="relative z-20 flex justify-between items-centers text-sm font-medium text-gray-500">
+	<ol class="relative z-20 flex justify-between items-centers text-sm font-medium text-tertiary">
 		{#each tabs ?? [] as step, index}
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<li
@@ -81,7 +81,7 @@
 				<span
 					class={classNames(
 						'hidden sm:block',
-						selectedIndex === index ? 'font-semibold text-gray-900' : 'font-normal text-gray-600'
+						selectedIndex === index ? 'font-semibold text-gray-900' : 'font-normal text-tertiary'
 					)}
 				>
 					{step}
diff --git a/frontend/src/lib/components/common/table/Row.svelte b/frontend/src/lib/components/common/table/Row.svelte
index d577e4b6da..b7b6111d00 100644
--- a/frontend/src/lib/components/common/table/Row.svelte
+++ b/frontend/src/lib/components/common/table/Row.svelte
@@ -14,33 +14,25 @@
 	export let path: string
 	export let href: string
 	export let workspaceId: string
-	const color = {
-		script: 'hover:bg-blue-50 hover:border-blue-200',
-		flow: 'hover:bg-[#f0fdfa] hover:border-[#99f6e4]',
-		app: 'hover:bg-[#fff7ed] hover:border-orange-300'
-	}[kind]
 </script>
 
 <div
-	class="hover:bg-gray-50 w-full inline-flex items-center gap-4 first-of-type:!border-t-0
-first-of-type:rounded-t-md last-of-type:rounded-b-md {color}"
+	class="hover:bg-surface-hover w-full inline-flex items-center gap-4 first-of-type:!border-t-0
+first-of-type:rounded-t-md last-of-type:rounded-b-md [*:not(:last-child)]:border-b px-4 py-2.5"
 >
-	<a
-		{href}
-		class="min-w-0 grow hover:underline decoration-gray-400 px-4 py-2.5 inline-flex items-center gap-4"
-	>
+	<a {href} class="min-w-0 grow hover:underline decoration-gray-400 inline-flex items-center gap-4">
 		<div class="shrink">
 			<RowIcon {href} {kind} />
 		</div>
 		<div class="grow">
-			<div class="text-gray-900 flex-wrap text-left text-sm font-semibold">
+			<div class="text-primary flex-wrap text-left text-sm font-semibold">
 				{#if marked}
 					{@html marked}
 				{:else}
 					{!summary || summary.length == 0 ? path : summary}
 				{/if}
 			</div>
-			<div class="text-gray-600 text-2xs truncate text-left font-light">
+			<div class="text-secondary text-2xs truncate text-left font-light">
 				{path}
 			</div>
 		</div>
@@ -52,7 +44,7 @@ first-of-type:rounded-t-md last-of-type:rounded-b-md {color}"
 	{/if}
 
 	{#if canFavorite}
-		<div class="center-center h-full text-sm font-semibold text-gray-700">
+		<div class="center-center h-full text-sm font-semibold text-secondary">
 			<Star
 				{kind}
 				{path}
diff --git a/frontend/src/lib/components/common/table/RowIcon.svelte b/frontend/src/lib/components/common/table/RowIcon.svelte
index 96004079f1..e5f3dea445 100644
--- a/frontend/src/lib/components/common/table/RowIcon.svelte
+++ b/frontend/src/lib/components/common/table/RowIcon.svelte
@@ -8,10 +8,10 @@
 	export let href: string = '#'
 
 	const color = {
-		script: 'bg-blue-50 border-blue-200',
-		flow: 'bg-[#f0fdfa] border-[#99f6e4]',
-		app: 'bg-[#fff7ed] border-orange-300',
-		raw_app: 'bg-[#fff7ed] border-orange-300'
+		script: 'bg-blue-50 border-blue-200 dark:bg-transparent dark:border-blue-900',
+		flow: 'bg-[#f0fdfa] border-[#99f6e4] dark:bg-transparent dark:border-teal-900',
+		app: 'bg-[#fff7ed] border-orange-300 dark:bg-transparent dark:border-orange-900',
+		raw_app: 'bg-[#fff7ed] border-orange-300 dark:bg-transparent dark:border-orange-900'
 	}[kind]
 
 	const iconColor = {
diff --git a/frontend/src/lib/components/common/table/Table.svelte b/frontend/src/lib/components/common/table/Table.svelte
index 1bd4aca0ba..b0e99bc9e1 100644
--- a/frontend/src/lib/components/common/table/Table.svelte
+++ b/frontend/src/lib/components/common/table/Table.svelte
@@ -1,7 +1,7 @@
 <div class="flex flex-col">
 	<div class="overflow-hidden rounded-md border">
 		<table class="min-w-full divide-y divide-gray-300">
-			<tbody class="divide-y divide-gray-200 bg-white">
+			<tbody class="divide-y bg-surface">
 				<slot />
 			</tbody>
 		</table>
diff --git a/frontend/src/lib/components/common/tabs/Tab.svelte b/frontend/src/lib/components/common/tabs/Tab.svelte
index b8c79b1b5b..d1707805a6 100644
--- a/frontend/src/lib/components/common/tabs/Tab.svelte
+++ b/frontend/src/lib/components/common/tabs/Tab.svelte
@@ -29,7 +29,7 @@
 		'border-b-2 py-1 px-4 cursor-pointer transition-all z-10 ease-linear font-medium',
 		$selected?.startsWith(value)
 			? 'wm-tab-active'
-			: 'border-gray-300 dark:border-gray-500 border-opacity-0 hover:border-opacity-100 ',
+			: 'border-gray-300 dark:border-gray-600 border-opacity-0 hover:border-opacity-100 ',
 		fontSizeClasses[size],
 		c,
 		$selected?.startsWith(value) ? selectedClass : '',
diff --git a/frontend/src/lib/components/common/tabs/Tabs.svelte b/frontend/src/lib/components/common/tabs/Tabs.svelte
index 090b449bf9..5b6ab5a634 100644
--- a/frontend/src/lib/components/common/tabs/Tabs.svelte
+++ b/frontend/src/lib/components/common/tabs/Tabs.svelte
@@ -57,10 +57,7 @@
 <svelte:window on:hashchange={hashChange} />
 
 <div class="overflow-x-auto {wrapperClass}">
-	<div
-		class={twMerge('border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden', c)}
-		{style}
-	>
+	<div class={twMerge('border-b flex flex-row whitespace-nowrap scrollbar-hidden', c)} {style}>
 		<slot {selected} />
 	</div>
 </div>
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
index 8d3a3da0ab..7853dbeb4b 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
@@ -13,6 +13,7 @@
 	export let disabled: boolean = false
 	export let selectedColor: string = '#3b82f6'
 	export let small: boolean = false
+	export let iconProps: Record<string, any> = {}
 
 	const { select, selected } = getContext<ToggleButtonContext>('ToggleButtonGroup')
 </script>
@@ -28,8 +29,7 @@
 		class={twMerge(
 			' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
 			small ? 'px-1 py-0.5' : 'px-2 py-1',
-			$selected === value ? 'bg-white shadow-md text-gray-800' : 'text-gray-600 hover:bg-gray-200',
-
+			$selected === value ? 'bg-surface shadow-md' : 'bg-surface-secondary hover:bg-surface-hover',
 			$$props.class
 		)}
 		on:click={() => select(value)}
@@ -39,6 +39,7 @@
 				this={icon}
 				size={14}
 				color={$selected === value ? selectedColor : '#9CA3AF'}
+				{...iconProps}
 			/>
 		{/if}
 		{#if label && !iconOnly}
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
index 5b5f6f75f3..26217649b8 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <TabGroup class={twMerge(`h-8 flex ${noWFull ? '' : 'w-full'}`, $$props.class)}>
-	<TabList class="flex bg-gray-100 rounded-md p-0.5 gap-1 h-full">
+	<TabList class="flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full ">
 		<slot />
 	</TabList>
 </TabGroup>
diff --git a/frontend/src/lib/components/details/ClipboardPanel.svelte b/frontend/src/lib/components/details/ClipboardPanel.svelte
index 514d8a0aeb..ec66b8f8f7 100644
--- a/frontend/src/lib/components/details/ClipboardPanel.svelte
+++ b/frontend/src/lib/components/details/ClipboardPanel.svelte
@@ -10,7 +10,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	class="px-2 py-1 border flex items-center cursor-pointer bg-gray-100 text-gray-900 justify-between rounded-md"
+	class="px-2 py-1 border flex items-center cursor-pointer bg-surface-secondary text-primary justify-between rounded-md"
 	on:click={(e) => {
 		e.preventDefault()
 		copyToClipboard(content)
diff --git a/frontend/src/lib/components/details/DetailPageHeader.svelte b/frontend/src/lib/components/details/DetailPageHeader.svelte
index dad6f35f1e..86cf0fc091 100644
--- a/frontend/src/lib/components/details/DetailPageHeader.svelte
+++ b/frontend/src/lib/components/details/DetailPageHeader.svelte
@@ -45,7 +45,7 @@
 							>
 								<div
 									class={classNames(
-										'text-xs flex items-center gap-2 flex-row-2',
+										'text-xs flex items-center gap-2 flex-row-2 ',
 										color === 'red' ? 'text-red-500' : ''
 									)}
 								>
diff --git a/frontend/src/lib/components/details/Menu.svelte b/frontend/src/lib/components/details/Menu.svelte
index 18c93a9422..e7f2959e5a 100644
--- a/frontend/src/lib/components/details/Menu.svelte
+++ b/frontend/src/lib/components/details/Menu.svelte
@@ -45,7 +45,7 @@
 				leaveTo="transform opacity-0 scale-95"
 			>
 				<MenuItems
-					class="absolute border right-0 z-50 w-56 origin-top-right top-1 rounded-md bg-white shadow-md focus:outline-none cursor-pointer"
+					class="absolute border right-0 z-50 w-56 origin-top-right top-1 rounded-md bg-surface shadow-md focus:outline-none cursor-pointer"
 				>
 					<div class="my-1">
 						<slot name="items" />
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index 458743da3c..1c631d8dbb 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -17,7 +17,7 @@
 <div class="h-full overflow-hidden border-t">
 	<Splitpanes>
 		<Pane {size} minSize={15} class="h-full relative z-0">
-			<div class="grow overflow-auto bg-gray h-full bg-gray-50 relative">
+			<div class="grow overflow-auto bg-gray h-full bg-surface-secondary relative">
 				{#if loading}
 					<div class="p-2 pt-10">
 						{#each new Array(6) as _}
diff --git a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
index d80fab139c..a0218a9d60 100644
--- a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
+++ b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
@@ -58,7 +58,7 @@
 						<Button
 							title="Unlock hash to always use latest deployed version at that path"
 							size="xs"
-							btnClasses="text-gray-600 inline-flex gap-1 items-center"
+							btnClasses="text-tertiary inline-flex gap-1 items-center"
 							color="light"
 							on:click={() => {
 								if (flowModule?.value.type == 'script') {
@@ -71,7 +71,7 @@
 							title="Lock hash to always use this specific version"
 							color="light"
 							size="xs"
-							btnClasses="text-gray-600 inline-flex gap-1 items-center"
+							btnClasses="text-tertiary inline-flex gap-1 items-center"
 							on:click={() => {
 								if (flowModule?.value.type == 'script') {
 									flowModule.value.hash = latestHash
@@ -88,7 +88,7 @@
 		</span>
 	{/if}
 	{#if title}
-		<div class="text-sm font-bold text-gray-900">{title}</div>
+		<div class="text-sm font-bold text-primary">{title}</div>
 	{/if}
 	<slot />
 </div>
diff --git a/frontend/src/lib/components/flows/content/CapturePayload.svelte b/frontend/src/lib/components/flows/content/CapturePayload.svelte
index dd2e2a76ca..5c6a89e72b 100644
--- a/frontend/src/lib/components/flows/content/CapturePayload.svelte
+++ b/frontend/src/lib/components/flows/content/CapturePayload.svelte
@@ -72,7 +72,7 @@
 				<Icon data={faClipboard} /></a
 			>
 		</div>
-		<p class="text-gray-600 mt-4 text-xs">CURL example</p>
+		<p class="text-secondary mt-4 text-xs">CURL example</p>
 
 		<div class="text-xs box mb-4 b">
 			<pre class="overflow-auto"
@@ -81,7 +81,7 @@
    -d '{"foo": 42}'`}</pre
 			>
 		</div>
-		<div class="items-center flex flex-row gap-x-2 text-xs text-gray-600">
+		<div class="items-center flex flex-row gap-x-2 text-xs text-secondary">
 			Listening for new requests
 			<WindmillIcon class="animate-[pulse_5s_linear_infinite]" spin="fast" /></div
 		>
diff --git a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
index eb859dd05e..046217d63a 100644
--- a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
+++ b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
@@ -22,7 +22,7 @@
 {#if opened}
 	<div
 		transition:slide|local
-		class="bg-gray-100 border-l-4 border-gray-600 text-gray-700 p-4 m-4"
+		class="bg-gray-100 border-l-4 border-gray-600 text-secondary p-4 m-4"
 		role="alert"
 		id="dynamic-input-help-box"
 	>
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
index f0ee3a14c1..c69984b308 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte
@@ -70,7 +70,7 @@
 							<Tab value="sleep">Sleep</Tab>
 							<Tab value="mock">Mock</Tab>
 							<svelte:fragment slot="content">
-								<div class="overflow-hidden bg-white">
+								<div class="overflow-hidden bg-surface">
 									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 										<div class="p-4 overflow-y-auto">
 											<FlowModuleEarlyStop bind:flowModule />
diff --git a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
index d6f8367ef4..a55b1336a9 100644
--- a/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte
@@ -38,7 +38,7 @@
 						<div class="py-2">
 							<div class="flex flex-row gap-2 text-sm p-2">
 								<Badge large={true} color="blue">Default branch</Badge>
-								<p class="italic text-gray-600"
+								<p class="italic text-tertiary"
 									>If none of the predicates' expressions evaluated in-order match, this branch is
 									chosen</p
 								>
@@ -70,7 +70,7 @@
 							<Tab value="sleep">Sleep</Tab>
 							<Tab value="mock">Mock</Tab>
 							<svelte:fragment slot="content">
-								<div class="overflow-hidden bg-white">
+								<div class="overflow-hidden bg-surface">
 									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
 										<div class="p-4 overflow-y-auto">
 											<FlowModuleEarlyStop bind:flowModule />
diff --git a/frontend/src/lib/components/flows/content/FlowConstants.svelte b/frontend/src/lib/components/flows/content/FlowConstants.svelte
index d26341d1ed..2cca5a26c2 100644
--- a/frontend/src/lib/components/flows/content/FlowConstants.svelte
+++ b/frontend/src/lib/components/flows/content/FlowConstants.svelte
@@ -122,7 +122,7 @@
 			{#each steps as [args, filter, m] (m.id)}
 				{#if filter.length > 0}
 					<div class="relative h-full border-t p-4">
-						<h2 class="sticky w-full top-0 z-10 inline-flex items-center bg-white py-2">
+						<h2 class="sticky w-full top-0 z-10 inline-flex items-center py-2">
 							<span class="mr-4">{m.summary || m.value['path'] || 'Inline script'}</span>
 							<Badge large color="indigo">{m.id}</Badge>
 						</h2>
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index 78219e21ee..3dbf67ded3 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -16,7 +16,7 @@
 {:else if $selectedId === 'Input'}
 	<FlowInput />
 {:else if $selectedId === 'Result'}
-	<p class="p-4 text-gray-600">Nothing to show about the result node. Happy flow building!</p>
+	<p class="p-4 text-secondary">Nothing to show about the result node. Happy flow building!</p>
 {:else if $selectedId === 'constants'}
 	<FlowConstants />
 {:else if $selectedId === 'failure'}
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index cc976a8019..e2d64f81f1 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
-	import { Alert, ToggleButton, ToggleButtonGroup } from '$lib/components/common'
+	import { Alert } from '$lib/components/common'
 	import ToggleHubWorkspace from '$lib/components/ToggleHubWorkspace.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { RawScript, Script } from '$lib/gen'
 
-	import { faBolt, faCheck, faCode } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte'
 	import PickHubScript from '../pickers/PickHubScript.svelte'
 	import WorkspaceScriptPicker from '../pickers/WorkspaceScriptPicker.svelte'
 	import { isCloudHosted } from '$lib/cloud'
 	import { sendUserToast } from '$lib/toast'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import { Check, Code, Zap } from 'lucide-svelte'
 
 	export let failureModule: boolean
 	export let shouldDisableTriggerScripts: boolean = false
@@ -37,37 +39,26 @@
 			<div class="center-center">
 				<div class="max-w-min">
 					<ToggleButtonGroup bind:selected={kind}>
-						<ToggleButton position="left" value="script" size="sm" startIcon={{ icon: faCode }}>
-							Action &nbsp;<Tooltip>
-								An action script is simply a script that is neither a trigger nor an approval
-								script. Those are the majority of the scripts.
-							</Tooltip>
-						</ToggleButton>
+						<ToggleButton
+							value="script"
+							icon={Code}
+							label="Action"
+							tooltip="An action script is simply a script that is neither a trigger nor an approval script. Those are the majority of the scripts."
+						/>
 						{#if !shouldDisableTriggerScripts}
 							<ToggleButton
-								position="center"
 								value="trigger"
-								size="sm"
-								startIcon={{ icon: faBolt }}
-							>
-								Trigger &nbsp;<Tooltip
-									documentationLink="https://www.windmill.dev/docs/flows/flow_trigger"
-								>
-									Used as a first step most commonly with a state and a schedule to watch for
-									changes on an external system, compute the diff since last time and set the new
-									state. The diffs are then treated one by one with a for-loop.
-								</Tooltip>
-							</ToggleButton>
+								icon={Zap}
+								label="Trigger"
+								tooltip="Used as a first step most commonly with a state and a schedule to watch for changes on an external system, compute the diff since last time and set the new state. The diffs are then treated one by one with a for-loop."
+							/>
 						{/if}
-						<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
-							Approval &nbsp;<Tooltip
-								documentationLink="https://www.windmill.dev/docs/flows/flow_approval"
-							>
-								An approval step will suspend the execution of a flow until it has been approved
-								through the resume endpoints or the approval page by and solely by the recipients of
-								those secret urls.
-							</Tooltip>
-						</ToggleButton>
+						<ToggleButton
+							value="approval"
+							icon={Check}
+							label="Approval"
+							tooltip="An approval step will suspend the execution of a flow until it has been approved through the resume endpoints or the approval page by and solely by the recipients of those secret urls."
+						/>
 					</ToggleButtonGroup>
 				</div>
 			</div>
diff --git a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
index 6f7aa1efe3..e5138e3d69 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
@@ -72,11 +72,11 @@
 		{#if filter.length > 0 && filteredItems.length == 0}
 			<NoItemFound />
 		{/if}
-		<ul class="divide-y divide-gray-200 overflow-auto">
+		<ul class="divide-y overflow-auto">
 			{#each filteredItems as { path, summary, description, marked }}
 				<li class="flex flex-row w-full">
 					<button
-						class="py-4 px-1 gap-1 flex flex-row grow hover:bg-blue-50 bg-white transition-all text-black"
+						class="p-4 gap-1 flex flex-row grow hover:bg-surface-hover bg-surface transition-all text-primary"
 						on:click={() => {
 							dispatch('pick', { path })
 						}}
diff --git a/frontend/src/lib/components/flows/content/FlowLoop.svelte b/frontend/src/lib/components/flows/content/FlowLoop.svelte
index 33b1f4a9e2..b16f7fa24f 100644
--- a/frontend/src/lib/components/flows/content/FlowLoop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowLoop.svelte
@@ -117,7 +117,7 @@
 					<Tab value="mock">Mock</Tab>
 
 					<svelte:fragment slot="content">
-						<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
+						<div class="overflow-hidden bg-surface" style="height:calc(100% - 32px);">
 							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
 								<div class="p-4 overflow-y-auto">
 									<FlowRetries bind:flowModule={mod} />
diff --git a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
index 4edaab3b9e..0b259c7a28 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte
@@ -44,7 +44,9 @@
 		}}
 	/>
 
-	<div class="w-full border p-2 flex flex-col {flowModule.stop_after_if ? '' : 'bg-gray-50'}">
+	<div
+		class="w-full border p-2 flex flex-col {flowModule.stop_after_if ? '' : 'bg-surface-secondary'}"
+	>
 		{#if flowModule.stop_after_if}
 			<Toggle
 				bind:checked={flowModule.stop_after_if.skip_if_stopped}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
index 3074929474..4e61554de6 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
@@ -32,8 +32,8 @@
 			placement="bottom"
 			class="center-center rounded p-2 
 			{moduleRetry
-				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleRetry')}
 		>
 			<Repeat size={14} />
@@ -43,8 +43,8 @@
 			placement="bottom"
 			class="center-center rounded p-2 
 		{module?.value?.['concurrency_limit'] != undefined
-				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'}"
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleConcurrency')}
 		>
 			<Gauge size={14} />
@@ -54,8 +54,8 @@
 			placement="bottom"
 			class="center-center rounded p-2 
 		{module.cache_ttl != undefined
-				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800  hover:bg-gray-100'}"
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleCache')}
 		>
 			<Database size={14} />
@@ -63,10 +63,10 @@
 		</Popover>
 		<Popover
 			placement="bottom"
-			class="center-center rounded  p-2
+			class="center-center rounded p-2
 			{module.stop_after_if
-				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800 hover:bg-gray-100'}"
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleStopAfterIf')}
 		>
 			<Square size={14} />
@@ -76,8 +76,8 @@
 			placement="bottom"
 			class="center-center rounded p-2 
 			{module.suspend
-				? 'bg-blue-100 text-blue-800 border  border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800  hover:bg-gray-100'}"
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleSuspend')}
 		>
 			<PhoneIncoming size={14} />
@@ -85,10 +85,10 @@
 		</Popover>
 		<Popover
 			placement="bottom"
-			class="center-center rounded  p-2
+			class="center-center rounded p-2
 			{module.sleep
-				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800  hover:bg-gray-100'}"
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleSleep')}
 		>
 			<Bed size={14} />
@@ -96,10 +96,10 @@
 		</Popover>
 		<Popover
 			placement="bottom"
-			class="center-center rounded  p-2
+			class="center-center rounded p-2
 		{module.mock?.enabled
-				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200'
-				: 'bg-white text-gray-800  hover:bg-gray-100'}"
+				? 'bg-blue-100  text-blue-800 border border-blue-300 hover:bg-blue-200'
+				: 'bg-surface text-primay hover:bg-hover'}"
 			on:click={() => dispatch('toggleMock')}
 		>
 			<Voicemail size={14} />
@@ -169,7 +169,6 @@
 		<Button
 			size="xs"
 			color="light"
-			btnClasses="text-gray-600"
 			startIcon={{ icon: faSave }}
 			on:click={() => dispatch('createScriptFromInlineScript')}
 			iconOnly={false}
diff --git a/frontend/src/lib/components/flows/content/FlowRetries.svelte b/frontend/src/lib/components/flows/content/FlowRetries.svelte
index ea6c122bac..ef0a3ad6c9 100644
--- a/frontend/src/lib/components/flows/content/FlowRetries.svelte
+++ b/frontend/src/lib/components/flows/content/FlowRetries.svelte
@@ -87,7 +87,7 @@
 				<div class="text-xs font-bold !mt-2">Attempts</div>
 				<input bind:value={flowModule.retry.exponential.attempts} type="number" />
 				<div class="text-xs font-bold !mt-2">Mulitplier</div>
-				<span class="text-xs text-gray-500">delay = multiplier * base ^ (number of attempt)</span>
+				<span class="text-xs text-tertiary">delay = multiplier * base ^ (number of attempt)</span>
 				<input bind:value={flowModule.retry.exponential.multiplier} type="number" />
 				<div class="text-xs font-bold !mt-2">Base (in seconds)</div>
 				<input bind:value={flowModule.retry.exponential.seconds} type="number" />
@@ -95,7 +95,7 @@
 				<div class="text-xs font-bold !mt-2">Attempts</div>
 				<input type="number" disabled />
 				<div class="text-xs font-bold !mt-2">Mulitplier</div>
-				<span class="text-xs text-gray-500">delay = multiplier * base ^ (number of attempt)</span>
+				<span class="text-xs text-tertiary">delay = multiplier * base ^ (number of attempt)</span>
 				<input type="number" disabled />
 				<div class="text-xs font-bold !mt-2">Base (in seconds)</div>
 				<input type="number" disabled />
@@ -115,7 +115,7 @@
 					(_, i) => (multiplier || 0) * (eSeconds || 0) ** (i + cArray.length + 1)
 				)}
 				{@const array = [...cArray, ...eArray]}
-				<div class="bg-gray-50 border border-gray-300 rounded px-4 py-2">
+				<div class="bg-surface-secondary border rounded px-4 py-2">
 					<div class="text-xs font-medium mb-2">Retry attempts</div>
 					{#if array.length > 0}
 						<table class="text-xs">
diff --git a/frontend/src/lib/components/flows/content/FlowSchedules.svelte b/frontend/src/lib/components/flows/content/FlowSchedules.svelte
index 2686db7a32..e996b4a3e5 100644
--- a/frontend/src/lib/components/flows/content/FlowSchedules.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSchedules.svelte
@@ -13,7 +13,7 @@
 <div class="mt-10" />
 <SchemaForm schema={$flowStore.schema} bind:args={$schedule.args} />
 {#if emptyString($schedule.cron)}
-	<p class="text-xs text-gray-600 mt-10">Define a schedule frequency first</p>
+	<p class="text-xs text-tertiary mt-10">Define a schedule frequency first</p>
 {/if}
 <div class="mt-10" />
 <Toggle
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 33547ebc14..9ebf4b2883 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -41,7 +41,7 @@
 							<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="flow" kind="flow" />
 
 							<label class="block my-4">
-								<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
+								<span class="text-secondary text-sm">Summary <Required required={false} /></span>
 								<input
 									type="text"
 									bind:value={$flowStore.summary}
@@ -51,7 +51,7 @@
 							</label>
 
 							<label class="block my-4" for="inp">
-								<span class="text-gray-700 text-sm">
+								<span class="text-secondary text-sm">
 									Description
 									<Required required={false} />
 									<textarea
@@ -66,7 +66,7 @@
 								</span>
 							</label>
 							<Slider text="How to trigger flows?">
-								<div class="text-sm text-gray-600 border p-4 mb-20">
+								<div class="text-sm text-tertiary border p-4 mb-20">
 									On-demand:
 									<ul class="pt-4">
 										<li>
@@ -112,7 +112,7 @@
 														class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
 													>
 														{url}
-														<span class="text-gray-700 ml-2">
+														<span class="text-secondary ml-2">
 															<Icon data={faClipboard} />
 														</span>
 													</a>
@@ -128,7 +128,7 @@
 														class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
 													>
 														{syncedUrl}
-														<span class="text-gray-700 ml-2">
+														<span class="text-secondary ml-2">
 															<Icon data={faClipboard} />
 														</span>
 													</a>
diff --git a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
index ca4e6fbcbc..8e17ad69fc 100644
--- a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
@@ -99,7 +99,7 @@
 		{:else}
 			<div
 				out:fade={{ duration: 200 }}
-				class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+				class="absolute inset-0 center-center flex-col bg-white text-tertiary border"
 			>
 				<Loader2 class="animate-spin" size={16} />
 				<span class="text-xs mt-1">Loading</span>
diff --git a/frontend/src/lib/components/flows/flowStateUtils.ts b/frontend/src/lib/components/flows/flowStateUtils.ts
index 5c5062ca31..d8231b7563 100644
--- a/frontend/src/lib/components/flows/flowStateUtils.ts
+++ b/frontend/src/lib/components/flows/flowStateUtils.ts
@@ -30,7 +30,7 @@ export async function loadFlowModuleState(flowModule: FlowModule): Promise<FlowM
 		}
 		return { schema, previewResult: NEVER_TESTED_THIS_FAR }
 	} catch (e) {
-		console.error(e)
+		console.debug(e)
 		return emptyFlowModuleState()
 	}
 }
diff --git a/frontend/src/lib/components/flows/map/FlowConstantsItem.svelte b/frontend/src/lib/components/flows/map/FlowConstantsItem.svelte
index 3f69e8de70..7c79beccd1 100644
--- a/frontend/src/lib/components/flows/map/FlowConstantsItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowConstantsItem.svelte
@@ -7,7 +7,7 @@
 	const { selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	$: settingsClass = classNames(
-		'border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center',
+		'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' : ''
 	)
 </script>
diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
index 47c73488ae..e005005728 100644
--- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -44,7 +44,7 @@
 		}
 	}}
 	class={classNames(
-		'border mx-auto rounded-sm px-2 py-1 bg-white text-sm border-gray-400 cursor-pointer flex justify-between items-center flex-row overflow-x-hidden ',
+		'border mx-auto rounded-sm px-2 py-1 bg-surface text-sm cursor-pointer flex justify-between items-center flex-row overflow-x-hidden ',
 		$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
 	)}
 	style="min-width: 275px"
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 1b1ea223bc..271c21995c 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -49,7 +49,7 @@
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center rounded border bg-white border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<Repeat size={14} />
 				</div>
@@ -60,7 +60,7 @@
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center rounded border bg-white border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<Gauge size={14} />
 				</div>
@@ -71,7 +71,7 @@
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center rounded border bg-white border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<Database size={14} />
 				</div>
@@ -82,7 +82,7 @@
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<Square size={14} />
 				</div>
@@ -93,7 +93,7 @@
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<PhoneIncoming size={14} />
 				</div>
@@ -104,7 +104,7 @@
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<Bed size={14} />
 				</div>
@@ -115,7 +115,7 @@
 			<Popover notClickable>
 				<div
 					transition:fade|local={{ duration: 200 }}
-					class="center-center bg-white rounded border border-gray-400 text-gray-700 px-1 py-0.5"
+					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
 				>
 					<Voicemail size={14} />
 				</div>
@@ -125,7 +125,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"
+			border border-gray-400 p-2 text-2xs module text-primary"
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />
@@ -140,8 +140,8 @@
 	</div>
 	{#if deletable}
 		<button
-			class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center
-	border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white
+			class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center text-primary
+	border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-red-400 hover:text-white
 	hover:border-red-700 {selected ? '' : '!hidden'}"
 			on:click|preventDefault|stopPropagation={(event) =>
 				dispatch('delete', { event, id, type: modType })}
@@ -150,8 +150,8 @@
 		</button>
 
 		<button
-			class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center
-border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-blue-400 hover:text-white
+			class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center text-primary
+border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-blue-400 hover:text-white
 hover:border-blue-700 {selected ? '' : '!hidden'}"
 			on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
 		>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index 244d1a05d0..de4abb6cf5 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -151,7 +151,7 @@
 		>
 		{#each Object.entries(dependents) as [k, v]}
 			<div class="pb-3">
-				<h3 class="text-gray-700 font-semibold">{k}</h3>
+				<h3 class="text-secondary font-semibold">{k}</h3>
 				<ul class="text-sm">
 					{#each v as dep}
 						<li>{dep}</li>
@@ -163,7 +163,7 @@
 </Portal>
 <div class="flex flex-col h-full relative -pt-1">
 	<div
-		class="z-10 sticky inline-flex flex-col gap-2 top-0 bg-gray-50 flex-initial p-2 items-center border-b border-gray-300"
+		class="z-10 sticky inline-flex flex-col gap-2 top-0 bg-surface-secondary flex-initial p-2 items-center border-b"
 	>
 		<FlowSettingsItem />
 		<FlowConstantsItem />
diff --git a/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte b/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
index e6b32d302a..dfe17141c3 100644
--- a/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowSettingsItem.svelte
@@ -8,7 +8,7 @@
 	const { selectedId, flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	$: settingsClass = classNames(
-		'border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center',
+		'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'
 			: ''
diff --git a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
index bf6c08b09a..cd236bb8e5 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
@@ -22,13 +22,13 @@
 		title="Add step"
 		slot="trigger"
 		type="button"
-		class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+		class="text-primary bg-surface border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 	>
 		<Cross size={12} />
 	</button>
-	<div class="font-mono divide-y divide-gray-100 text-xs w-40">
+	<div class="font-mono divide-y text-xs w-40 text-secondary">
 		<button
-			class="w-full text-left p-2 hover:bg-gray-100"
+			class="w-full text-left p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'script')
@@ -41,7 +41,7 @@
 		</button>
 		{#if trigger}
 			<button
-				class="w-full text-left p-2 hover:bg-gray-100"
+				class="w-full text-left p-2 hover:bg-surface-hover"
 				on:click={() => {
 					close()
 					dispatch('new', 'trigger')
@@ -54,7 +54,7 @@
 			</button>
 		{/if}
 		<button
-			class="w-full text-left gap-1 p-2 hover:bg-gray-100"
+			class="w-full text-left gap-1 p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'approval')
@@ -66,7 +66,7 @@
 			Approval
 		</button>
 		<button
-			class="w-full inline-flex text-left p-2 hover:bg-gray-100"
+			class="w-full inline-flex text-left p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'forloop')
@@ -81,7 +81,7 @@
 		</button>
 
 		<button
-			class="w-full text-left p-2 hover:bg-gray-100"
+			class="w-full text-left p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'branchone')
@@ -93,7 +93,7 @@
 		</button>
 
 		<button
-			class="w-full text-left p-2 hover:bg-gray-100"
+			class="w-full text-left p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'branchall')
@@ -105,7 +105,7 @@
 		</button>
 
 		<button
-			class="w-full text-left p-2 hover:bg-gray-100"
+			class="w-full text-left p-2 hover:bg-surface-hover"
 			on:click={() => {
 				close()
 				dispatch('new', 'flow')
@@ -117,7 +117,7 @@
 		</button>
 		{#if stop}
 			<button
-				class="w-full text-left p-2 hover:bg-gray-100 inline-flex gap-2.5"
+				class="w-full text-left p-2 hover:bg-surface-hover inline-flex gap-2.5"
 				on:click={() => {
 					close()
 					dispatch('new', 'end')
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index bde4b0ec61..3ebfd7884d 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -92,7 +92,7 @@
 		{/if}
 
 		{#if annotation && annotation != ''}
-			<div class="absolute z-10 left-0 -top-5 center-center text-gray-600">
+			<div class="absolute z-10 left-0 -top-5 center-center text-tertiary">
 				{annotation}
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index e5a30b8e86..515772bb98 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -40,7 +40,7 @@
 				dispatch('deleteBranch', deleteBranch)
 			}}
 			type="button"
-			class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+			class="text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 		>
 			<X size={14} />
 		</button>
@@ -49,7 +49,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	class={classNames(
-		'w-full flex relative overflow-hidden rounded-sm ',
+		'w-full flex relative overflow-hidden rounded-sm',
 		selectable ? 'cursor-pointer' : '',
 		selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : ''
 	)}
@@ -65,8 +65,7 @@
 	}}
 >
 	<div
-		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
-			border border-gray-400 p-2 text-2xs module"
+		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400"
 	>
 		{#if $$slots.icon}
 			<slot name="icon" />
@@ -101,7 +100,7 @@
 					}
 				}}
 				type="button"
-				class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+				class="text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 			>
 				<ClipboardCopy size={12} />
 			</button>
@@ -133,7 +132,7 @@
 				}
 			}}
 			type="button"
-			class=" text-gray-900 bg-white border mx-0.5 rotate-180 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+			class="text-primary bg-surface border mx-0.5 rotate-180 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 		>
 			<Icon data={faBolt} scale={0.8} />
 		</button>
diff --git a/frontend/src/lib/components/flows/pickers/PickHubApp.svelte b/frontend/src/lib/components/flows/pickers/PickHubApp.svelte
index 9c8b5dcfc1..46950e2845 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubApp.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubApp.svelte
@@ -44,18 +44,18 @@
 	{#if filteredItems.length == 0}
 		<NoItemFound />
 	{:else}
-		<ul class="divide-y divide-gray-200 border rounded-md">
+		<ul class="divide-y border rounded-md">
 			{#each filteredItems as item (item)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
 						on:click={() => dispatch('pick', item)}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="app" />
 
 							<div class="w-full text-left font-normal">
-								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+								<div class="text-primary flex-wrap text-md font-semibold">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}
diff --git a/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte b/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte
index ee666540fd..e7448c9569 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte
@@ -44,18 +44,18 @@
 	{#if filteredItems.length == 0}
 		<NoItemFound />
 	{:else}
-		<ul class="divide-y divide-gray-200 border rounded-md">
+		<ul class="divide-y border rounded-md overflow-hidden">
 			{#each filteredItems as item (item)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surfacehite transition-all items-center"
 						on:click={() => dispatch('pick', item)}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />
 
 							<div class="w-full text-left font-normal">
-								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+								<div class="text-primary flex-wrap text-md font-semibold">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}
diff --git a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
index cf620d338b..651be049e8 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
@@ -42,18 +42,18 @@
 	{#if filteredItems.length == 0}
 		<NoItemFound />
 	{:else}
-		<ul class="divide-y divide-gray-200 border rounded-md">
+		<ul class="divide-y border rounded-md">
 			{#each filteredItems.slice(0, maxItems) as item (item.path)}
 				<li class="flex flex-row w-full">
 					<button
-						class="p-4 gap-4 flex flex-row grow hover:bg-gray-50 bg-white transition-all items-center rounded-md"
+						class="p-4 gap-4 flex flex-row grow hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
 						on:click={() => dispatch('pick', item)}
 					>
 						<div class="flex items-center gap-4">
 							<div
 								class={classNames(
 									'rounded-md p-1 flex justify-center items-center border',
-									'bg-gray-50 border-gray-200'
+									'bg-surface border'
 								)}
 							>
 								<svelte:component
@@ -64,14 +64,14 @@
 							</div>
 
 							<div class="w-full text-left font-normal">
-								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
+								<div class="text-primary flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
 									{:else}
 										{item.summary ?? ''}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs">
+								<div class="text-secondary text-xs">
 									{item.path}
 								</div>
 							</div>
@@ -85,7 +85,7 @@
 		</ul>
 	{/if}
 	{#if filteredItems.length > maxItems}
-		<div class="text-gray-500 text-sm py-4">
+		<div class="text-tertiary text-sm py-4">
 			There are more items ({filteredItems.length}) than being displayed. Refine your search.
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
index b8c731abcc..0679c1a109 100644
--- a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
@@ -95,11 +95,11 @@
 		{#if filter.length > 0 && filteredItems.length == 0}
 			<NoItemFound />
 		{/if}
-		<ul class="divide-y divide-gray-200 overflow-auto">
+		<ul class="divide-y border rounded-md overflow-hidden">
 			{#each filteredItems as { path, hash, summary, description, marked }}
 				<li class="flex flex-row w-full">
 					<button
-						class="py-4 px-1 gap-1 flex flex-row grow hover:bg-blue-50 bg-white transition-all text-black"
+						class="p-4 gap-1 flex flex-row grow hover:bg-surface-hover bg-surface transition-all text-primary"
 						on:click={() => {
 							dispatch('pick', { path, hash: lockHash ? hash : undefined })
 						}}
diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index 16d159cc88..1860de800a 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -15,7 +15,7 @@
 		type GraphModuleState
 	} from '.'
 	import { defaultIfEmptyString, encodeState, truncateRev } from '$lib/utils'
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { createEventDispatcher, onMount, setContext } from 'svelte'
 	import Svelvet from './svelvet/container/views/Svelvet.svelte'
 	import type { UserEdgeType } from './svelvet/types'
 	import MapItem from '../flows/map/MapItem.svelte'
@@ -23,6 +23,7 @@
 	import { writable, type Writable } from 'svelte/store'
 	import { getDependeeAndDependentComponents } from '../flows/flowExplorer'
 	import { deepEqual } from 'fast-equals'
+	import DarkModeObserver from '../DarkModeObserver.svelte'
 
 	export let success: boolean | undefined = undefined
 	export let modules: FlowModule[] | undefined = []
@@ -60,11 +61,12 @@
 	let dataflow = false
 
 	let dispatch = createEventDispatcher()
+	let renderCount = 1
 
 	$: {
 		dataflow
 		moving
-		width && height && minHeight && $selectedId && flowModuleStates
+		width && height && minHeight && $selectedId && flowModuleStates && renderCount
 		createGraph()
 	}
 
@@ -268,32 +270,36 @@
 	}
 
 	function getStateColor(state: FlowStatusModule.type | undefined): string {
+		const isDark = document.documentElement.classList.contains('dark')
 		switch (state) {
 			case FlowStatusModule.type.SUCCESS:
-				return 'rgb(193, 255, 216)'
+				return isDark ? '#059669' : 'rgb(193, 255, 216)'
 			case FlowStatusModule.type.FAILURE:
-				return 'rgb(248 113 113)'
+				return isDark ? '#dc2626' : 'rgb(248 113 113)'
 			case FlowStatusModule.type.IN_PROGRESS:
-				return 'rgb(253, 240, 176)'
+				return isDark ? '#f59e0b' : 'rgb(253, 240, 176)'
 			case FlowStatusModule.type.WAITING_FOR_EVENTS:
-				return 'rgb(229, 176, 253)'
+				return isDark ? '#db2777' : 'rgb(229, 176, 253)'
 			case FlowStatusModule.type.WAITING_FOR_EXECUTOR:
-				return 'rgb(255, 208, 193)'
+				return isDark ? '#ea580c' : 'rgb(255, 208, 193)'
 			default:
-				return '#fff'
+				return isDark ? '#2e3440' : '#fff'
 		}
 	}
 
 	function getResultColor(): string {
+		const isDark = document.documentElement.classList.contains('dark')
+
 		switch (success) {
 			case true:
 				return getStateColor(FlowStatusModule.type.SUCCESS)
 			case false:
 				return getStateColor(FlowStatusModule.type.FAILURE)
 			default:
-				return '#fff'
+				return isDark ? '#2e3440' : '#fff'
 		}
 	}
+
 	function flowModuleToNode(
 		parentIds: string[],
 		mod: FlowModule,
@@ -655,7 +661,12 @@
 						label,
 						insertable,
 						modules,
-						bgColor: label == 'Result' ? getResultColor() : '#dfe6ee',
+						bgColor:
+							label == 'Result'
+								? getResultColor()
+								: document.documentElement.classList.contains('dark')
+								? '#2e3440'
+								: '#dfe6ee',
 						selected: $selectedId == label,
 						index,
 						selectable,
@@ -725,27 +736,38 @@
 			loopDepth: 0
 		}
 	}
+
+	function onThemeChange() {
+		renderCount++
+	}
+
+	onMount(() => {
+		onThemeChange()
+	})
 </script>
 
+<DarkModeObserver on:change={onThemeChange} />
+
 <div bind:clientWidth={width} class={fullSize ? '' : 'w-full h-full overflow-hidden relative'}>
 	{#if width && height}
-		<Svelvet
-			on:expand={() => {
-				localStorage.setItem('svelvet', encodeState({ modules, failureModule }))
-				window.open('/view_graph', '_blank')
-			}}
-			{download}
-			highlightEdges={false}
-			locked
-			bind:dataflow
-			{nodes}
-			width={fullSize ? fullWidth : width}
-			{edges}
-			{height}
-			{scroll}
-			nodeSelected={showDataflow}
-			background={false}
-			bgColor="rgb(249 250 251)"
-		/>
+		{#key renderCount}
+			<Svelvet
+				on:expand={() => {
+					localStorage.setItem('svelvet', encodeState({ modules, failureModule }))
+					window.open('/view_graph', '_blank')
+				}}
+				{download}
+				highlightEdges={false}
+				locked
+				bind:dataflow
+				{nodes}
+				width={fullSize ? fullWidth : width}
+				{edges}
+				{height}
+				{scroll}
+				nodeSelected={showDataflow}
+				background={false}
+			/>
+		{/key}
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
index 558c576442..21e68a2315 100644
--- a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
+++ b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
@@ -203,7 +203,7 @@
 {#if showDataflowToggle}
 	<div id="dataflow_toggle">
 		<Toggle
-			textClass="!text-gray-600"
+			textClass="!text-secondary"
 			size="xs"
 			bind:checked={dataflow}
 			options={{
@@ -243,15 +243,11 @@
 
 	#buttons > button {
 		border-radius: 4px;
-		background-color: white;
-		border: #bbb solid 1px;
+		@apply bg-surface;
+		@apply border;
 		transition: all;
 	}
 
-	#buttons > button:hover {
-		background-color: #eee;
-	}
-
 	.Nodes {
 		position: absolute;
 		width: 100%;
diff --git a/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte b/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte
index 06a1898e4b..a87edaf6ed 100644
--- a/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte
+++ b/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte
@@ -112,10 +112,8 @@
 
 <!-- Now that a store has been created from the initial nodes and initial edges we drill props from the store down to the D3 GraphView along with the unique key -->
 <div
-	class="Svelvet"
-	style={`width: ${width}px; height: ${
-		fullHeight ? '100%' : height + 'px'
-	}; background-color: ${bgColor};`}
+	class="Svelvet bg-surface-secondary"
+	style={`width: ${width}px; height: ${fullHeight ? '100%' : height + 'px'};`}
 >
 	{#if error != ''}
 		<div class="error text-red-600 center-center p-4">{error}</div>
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index f8aa8c7ee4..1092d288e7 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -315,13 +315,13 @@
 			</ToggleButtonGroup>
 		</div>
 
-		<div class="relative text-gray-600 grow min-w-[100px]">
+		<div class="relative text-tertiary grow min-w-[100px]">
 			<!-- svelte-ignore a11y-autofocus -->
 			<input
 				autofocus
 				placeholder={HOME_SEARCH_PLACEHOLDER}
 				bind:value={filter}
-				class="bg-white !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
+				class="bg-surface !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
 			/>
 			<button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
 				<svg
@@ -346,7 +346,12 @@
 		</div>
 	</div>
 	<div class="relative">
-		<ListFilters syncQuery bind:selectedFilter={ownerFilter} filters={owners} />
+		<ListFilters
+			syncQuery
+			bind:selectedFilter={ownerFilter}
+			filters={owners}
+			bottomMargin={false}
+		/>
 		{#if filteredItems?.length == 0}
 			<div class="mt-10" />
 		{/if}
@@ -366,7 +371,7 @@
 		{:else if filteredItems.length === 0}
 			<NoItemFound />
 		{:else}
-			<div class="border rounded-md divide-y divide-gray-100">
+			<div class="border rounded-md divide-y">
 				<!-- <VirtualList {items} let:item bind:start bind:end> -->
 				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path)}
 					{#key item.summary}
diff --git a/frontend/src/lib/components/home/ListFilters.svelte b/frontend/src/lib/components/home/ListFilters.svelte
index fb50a74730..9578b88582 100644
--- a/frontend/src/lib/components/home/ListFilters.svelte
+++ b/frontend/src/lib/components/home/ListFilters.svelte
@@ -13,6 +13,8 @@
 	export let queryName = 'filter'
 	export let syncQuery = false
 
+	export let bottomMargin: boolean = true
+
 	const queryChange: (value: URL) => void = (url: URL) => {
 		if (syncQuery) {
 			window.history.pushState(history.state, '', `?${url?.searchParams.toString()}`)
@@ -61,7 +63,7 @@
 </script>
 
 {#if Array.isArray(filtersAndSelected) && filtersAndSelected.length > 0}
-	<div class="gap-2 w-full flex flex-wrap mt-4">
+	<div class={`gap-2 w-full flex flex-wrap ${bottomMargin ? 'my-4' : 'mt-4'}`}>
 		{#each filtersAndSelected as filter (filter)}
 			<div in:fade={{ duration: 50 }} animate:flip={{ duration: 100 }}>
 				<Badge
diff --git a/frontend/src/lib/components/home/NoItemFound.svelte b/frontend/src/lib/components/home/NoItemFound.svelte
index cbd075d1a8..997d4c2039 100644
--- a/frontend/src/lib/components/home/NoItemFound.svelte
+++ b/frontend/src/lib/components/home/NoItemFound.svelte
@@ -1,5 +1,5 @@
 <div class="flex justify-center items-center h-48">
-	<div class="text-gray-500 text-center">
+	<div class="text-tertiary text-center">
 		<div class="text-2xl font-bold">No items found</div>
 		<div class="text-sm">Try changing your search or filters</div>
 	</div>
diff --git a/frontend/src/lib/components/jobs/JobDetail.svelte b/frontend/src/lib/components/jobs/JobDetail.svelte
index 8dbc963d2f..50afdc0832 100644
--- a/frontend/src/lib/components/jobs/JobDetail.svelte
+++ b/frontend/src/lib/components/jobs/JobDetail.svelte
@@ -66,7 +66,7 @@
 
 <ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 
-<div class="border border-gray-400 rounded py-4">
+<div class="border rounded py-4">
 	<div class="grid grid-cols-1 lg:grid-cols-4 w-full gap-4">
 		<div class="flex-col col-span-2">
 			<div class="flex flex-row text-sm">
@@ -77,14 +77,14 @@
 						{#if 'success' in job && job.success}
 							{#if job.is_skipped}
 								<Icon
-									class="text-green-600"
+									class="text-green-600 dark:text-green-400"
 									data={faFastForward}
 									scale={SMALL_ICON_SCALE}
 									label="Job completed successfully but was skipped"
 								/>
 							{:else}
 								<Icon
-									class="text-green-600"
+									class="text-green-600 dark:text-green-400"
 									data={check}
 									scale={SMALL_ICON_SCALE}
 									label="Job completed successfully"
@@ -92,7 +92,7 @@
 							{/if}
 						{:else if 'success' in job}
 							<Icon
-								class="text-red-700"
+								class="text-red-600 dark:text-red-400"
 								data={faTimes}
 								scale={SMALL_ICON_SCALE}
 								label="Job completed with an error"
@@ -106,14 +106,14 @@
 							/>
 						{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
 							<Icon
-								class="text-gray-700"
+								class="text-secondary"
 								data={faCalendar}
 								scale={SMALL_ICON_SCALE}
 								label="Job is scheduled to run at a later time"
 							/>
 						{:else}
 							<Icon
-								class="text-gray-500"
+								class="text-tertiary"
 								data={faHourglassHalf}
 								scale={SMALL_ICON_SCALE}
 								label="Job is waiting for an executor"
@@ -157,20 +157,20 @@
 					</div>
 				{/if}
 			</div>
-			<div class="pl-14 italic text-gray-500 text-2xs whitespace-nowrap overflow-hidden"
-				>{truncateRev(job.id, 8, '')}</div
-			>
+			<div class="pl-14 italic text-secondary text-2xs whitespace-nowrap overflow-hidden">
+				{truncateRev(job.id, 8, '')}
+			</div>
 		</div>
-		<div class="bg-white grid grid-cols-2 gap-x-2 col-span-2">
-			<div class="w-full text-gray-500 text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden">
+		<div class="bg-surface grid grid-cols-2 gap-x-2 col-span-2">
+			<div class="w-full text-secondary text-xs text-left flex flex-col gap-1 mx-4 overflow-hidden">
 				<div>
-					<Icon class="text-gray-700" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
+					<Icon class="text-secondary" data={faUser} scale={SMALL_ICON_SCALE} /><span class="mx-2">
 						By {job.created_by}</span
 					>
 				</div>
 				{#if job && 'duration_ms' in job && job.duration_ms != undefined}
 					<div>
-						<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span
+						<Icon class="text-secondary" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span
 							class="mx-2"
 						>
 							Ran in {msToSec(job.duration_ms)}s</span
@@ -178,10 +178,10 @@
 					</div>
 				{/if}
 			</div>
-			<div class="text-gray-500 text-xs text-left place-self-start flex flex-col gap-1">
+			<div class="text-secondary text-xs text-left place-self-start flex flex-col gap-1">
 				{#if 'started_at' in job && job.started_at}
 					<div>
-						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+						<Icon class="text-secondary" data={faClock} scale={SMALL_ICON_SCALE} /><span
 							class="mx-1.5"
 						>
 							<span>
@@ -200,16 +200,16 @@
 					<div class="inline-flex gap-1">
 						<CalendarClock size={13} class="-ml-0.5" />
 						<span>
-							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1">Scheduled</span>
+							<span class="bg-blue-200 text-secondary text-xs rounded px-1">Scheduled</span>
 							for {displayDate(job.scheduled_for ?? '')}
 						</span>
 					</div>
 				{:else if 'scheduled_for' in job && !job.running}
 					<div>
-						<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} /><span
+						<Icon class="text-secondary" data={faClock} scale={SMALL_ICON_SCALE} /><span
 							class="mx-2"
 						>
-							<span class="bg-blue-200 text-gray-700 text-xs rounded px-1"
+							<span class="bg-blue-200 text-secondary text-xs rounded px-1"
 								>Waiting for an executor</span
 							>
 						</span>
@@ -218,21 +218,21 @@
 				<div>
 					{#if job && job.parent_job}
 						{#if job.is_flow_step}
-							<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
+							<Icon class="text-secondary" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
 								class="mx-1"
 							>
 								Step of flow <a href={`/run/${job.parent_job}`}>{truncateRev(job.parent_job, 6)}</a
 								></span
 							>
 						{:else}
-							<Icon class="text-gray-700" data={faRobot} scale={SMALL_ICON_SCALE} /><span
+							<Icon class="text-secondary" data={faRobot} scale={SMALL_ICON_SCALE} /><span
 								class="mx-1"
 							>
 								Parent <a href={`/run/${job.parent_job}`}>{job.parent_job}</a></span
 							>
 						{/if}
 					{:else if job && job.schedule_path}
-						<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
+						<Icon class="text-secondary" data={faCalendar} scale={SMALL_ICON_SCALE} />
 						<span class="mx-1"
 							>Schedule <button
 								class="break-words text-blue-400 font-normal truncate text-xs"
diff --git a/frontend/src/lib/components/jobs/JobPreview.svelte b/frontend/src/lib/components/jobs/JobPreview.svelte
index e78584a843..0edf3ff508 100644
--- a/frontend/src/lib/components/jobs/JobPreview.svelte
+++ b/frontend/src/lib/components/jobs/JobPreview.svelte
@@ -95,8 +95,8 @@
 	{#if open}
 		<div
 			transition:fade|local={{ duration: 50 }}
-			class="absolute z-50 {popupOnTop ? 'bottom-[35px]' : 'top-[35px]'} -left-10 bg-white rounded
-			border border-gray-300 shadow-xl flex justify-start items-start w-[600px] h-80
+			class="absolute z-50 {popupOnTop ? 'bottom-[35px]' : 'top-[35px]'} -left-10 bg-surface rounded
+			border shadow-xl flex justify-start items-start w-[600px] h-80
 			overflow-hidden"
 		>
 			<div class="absolute bottom-0 right-1 flex justify-end gap-2 pb-0.5">
@@ -104,7 +104,7 @@
 					Mem: {job?.['mem_peak'] ? `${(job['mem_peak'] / 1024).toPrecision(4)}MB` : 'N/A'}
 				</Badge>
 				<Badge>
-					<Icon class="text-gray-700" data={faHourglassHalf} scale={0.5} /><span class="mx-2">
+					<Icon class="text-secondary" data={faHourglassHalf} scale={0.5} /><span class="mx-2">
 						Ran in {msToSec(job?.['duration_ms'])}s</span
 					>
 				</Badge>
@@ -114,7 +114,7 @@
 			</div>
 			<div class="w-1/2 h-full overflow-auto p-2">
 				{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
-					<div class="text-sm font-semibold text-gray-600 mb-1">
+					<div class="text-sm font-semibold text-tertiary mb-1">
 						<div>Job is scheduled for</div>
 						<div>{new Date(job?.['scheduled_for']).toLocaleString()}</div>
 					</div>
@@ -122,7 +122,7 @@
 				{#if job?.type === Job.type.COMPLETED_JOB}
 					<DisplayResult workspaceId={job?.workspace_id} jobId={job?.id} {result} disableExpand />
 				{:else if job && `running` in job ? job.running : false}
-					<div class="text-sm font-semibold text-gray-600 mb-1"> Job is still running </div>
+					<div class="text-sm font-semibold text-tertiary mb-1"> Job is still running </div>
 					<LogViewer
 						jobId={job?.id}
 						duration={job?.['duration_ms']}
diff --git a/frontend/src/lib/components/preview/FlowPreviewStatus.svelte b/frontend/src/lib/components/preview/FlowPreviewStatus.svelte
index fe40a8b84c..609e34d6c8 100644
--- a/frontend/src/lib/components/preview/FlowPreviewStatus.svelte
+++ b/frontend/src/lib/components/preview/FlowPreviewStatus.svelte
@@ -5,11 +5,11 @@
 	export let job: QueuedJob | CompletedJob
 </script>
 
-<div class="grid grid-cols-2 gap-4 mb-1 text-gray-500 dark:text-gray-400">
+<div class="grid grid-cols-2 gap-4 mb-1 text-tertiary dark:text-gray-400">
 	<JobStatus {job} />
 	{#if job}
 		<div
-			><div class=" text-gray-900 whitespace-nowrap truncate ">
+			><div class="text-primary whitespace-nowrap truncate">
 				<span class="font-bold">Job Id</span>
 				<a rel="noreferrer" target="_blank" href="/run/{job?.id}?workspace={job?.workspace_id}">
 					{job?.id}
diff --git a/frontend/src/lib/components/progressBar/ProgressBar.svelte b/frontend/src/lib/components/progressBar/ProgressBar.svelte
index 6b0e4b76eb..beef77ffaf 100644
--- a/frontend/src/lib/components/progressBar/ProgressBar.svelte
+++ b/frontend/src/lib/components/progressBar/ProgressBar.svelte
@@ -68,8 +68,8 @@
 <div class={$$props.class}>
 	<div
 		class="flex justify-between items-end font-medium mb-1 {error
-			? 'text-red-700'
-			: 'text-blue-700'}"
+			? 'text-red-700 dark:text-red-200'
+			: 'text-blue-700 dark:text-blue-200'}"
 	>
 		<span class="text-base">
 			{error
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index 2d1228b88f..d56a34240c 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -55,19 +55,12 @@
 		<span>
 			{#if level != 0}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<span
-					class="cursor-pointer border border-gray-300 hover:bg-gray-200 px-1 rounded"
-					on:click={collapse}
-				>
+				<span class="cursor-pointer border hover:bg-surface-hover px-1 rounded" on:click={collapse}>
 					-
 				</span>
 			{/if}
 			{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
-			<ul
-				class={`w-full pl-2 ${
-					level === 0 ? 'border-none' : 'border-l border-dotted border-gray-200'
-				}`}
-			>
+			<ul class={`w-full pl-2 ${level === 0 ? 'border-none' : 'border-l border-dotted'}`}>
 				{#each keys.length > keyLimit ? keys.slice(0, keyLimit) : keys as key, index (key)}
 					<li>
 						<button on:click={() => selectProp(key)} class="whitespace-nowrap">
@@ -77,7 +70,7 @@
 								<span
 									class="key {pureViewer
 										? 'cursor-auto'
-										: 'border border-gray-300'} font-semibold rounded px-1 hover:bg-blue-100 text-2xs text-gray-800"
+										: 'border '} font-semibold rounded px-1 hover:bg-surface-hover text-2xs text-secondary"
 								>
 									{!isArray ? key : index}</span
 								>
@@ -136,14 +129,14 @@
 		{openBracket}{collapsedSymbol}{closeBracket}
 	</span>
 	{#if collapsed}
-		<span class="text-gray-500 text-xs">
+		<span class="text-tertiary text-xs">
 			{pluralize(Object.keys(json).length, Array.isArray(json) ? 'item' : 'key')}
 		</span>
 	{/if}
 {:else if topBrackets}
-	<span class="text-black">{openBracket}{closeBracket}</span>
+	<span class="text-primary">{openBracket}{closeBracket}</span>
 {:else}
-	<span class="text-gray-400 text-xs ml-2">No items ([])</span>
+	<span class="text-tertiary text-xs ml-2">No items ([])</span>
 {/if}
 
 <style lang="postcss">
@@ -153,14 +146,15 @@
 	}
 
 	.val.undefined {
-		@apply text-gray-600;
+		@apply text-tertiary;
 	}
 	.val.null {
-		@apply text-gray-600;
+		@apply text-tertiary;
 	}
 	.val.string {
 		@apply text-green-600;
 	}
+
 	.val.number {
 		@apply text-orange-600;
 	}
diff --git a/frontend/src/lib/components/propertyPicker/PropPicker.svelte b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
index 474cc756b7..e30cc13378 100644
--- a/frontend/src/lib/components/propertyPicker/PropPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
@@ -82,11 +82,14 @@
 		<input
 			type="text"
 			bind:value={search}
-			class="bg-gray-50 mt-2 border border-gray-300 text-gray-900 text-sm rounded-lg block mb-2 w-full"
+			class="bg-gray-50 mt-2 border border-gray-300 text-primary text-sm rounded-lg block mb-2 w-full"
 			placeholder="Search prop..."
 		/>
 	</div>
-	<div class="overflow-y-auto px-2 grow" class:bg-gray-100={!$propPickerConfig && !notSelectable}>
+	<div
+		class="overflow-y-auto px-2 pt-2 grow"
+		class:bg-surface-secondary={!$propPickerConfig && !notSelectable}
+	>
 		<div class="flex justify-between items-center space-x-1">
 			<span class="font-bold text-sm">Flow Input</span>
 			<div class="flex space-x-2 items-center" />
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index 7d4075db12..340c432997 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -59,7 +59,7 @@
 			<Highlight language={json} code={JSON.stringify(drawerContent.content, null, 4)} />
 		{:else if drawerContent?.mode === 'plain'}
 			<pre
-				class="overflow-x-auto break-words relative h-full m-2 text-xs bg-white shadow-inner p-2">
+				class="overflow-x-auto break-words relative h-full m-2 text-xs bg-surface shadow-inner p-2">
 				{drawerContent?.content}
 			</pre>
 		{:else if drawerContent?.mode === 'deno' || drawerContent?.mode === 'python3' || drawerContent?.mode === 'go' || drawerContent?.mode === 'bash' || drawerContent?.mode === 'nativets'}
@@ -102,7 +102,7 @@
 								/>
 							</div>
 						{:else}
-							<div class="text-sm text-gray-600 p-2">
+							<div class="text-sm text-tertiary p-2">
 								{#if previewIsLoading}
 									<Loader2 class="animate-spin" />
 								{:else}
diff --git a/frontend/src/lib/components/sidebar/DarkModeToggle.svelte b/frontend/src/lib/components/sidebar/DarkModeToggle.svelte
new file mode 100644
index 0000000000..601538d10d
--- /dev/null
+++ b/frontend/src/lib/components/sidebar/DarkModeToggle.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Moon, Sun } from 'lucide-svelte'
+	import { twMerge } from 'tailwind-merge'
+
+	export let darkMode: boolean = document.documentElement.classList.contains('dark')
+
+	export let forcedDarkMode: boolean = true
+</script>
+
+<button
+	class={twMerge(
+		'text-2xs text-white m-1 p-2 rounded-lg flex flex-row gap-2 justify-center hover:bg-gray-600',
+		forcedDarkMode ? 'text-white hover:bg-gray-600' : 'text-primary hover:bg-surface-hover'
+	)}
+	on:click={() => {
+		if (!document.documentElement.classList.contains('dark')) {
+			document.documentElement.classList.add('dark')
+			window.localStorage.setItem('dark-mode', 'dark')
+			darkMode = true
+		} else {
+			document.documentElement.classList.remove('dark')
+			window.localStorage.setItem('dark-mode', 'light')
+			darkMode = false
+		}
+	}}
+>
+	{#if darkMode}
+		<Sun class="w-4 h-4" />
+	{:else}
+		<Moon class="w-4 h-4" />
+	{/if}
+</button>
diff --git a/frontend/src/lib/components/sidebar/FavoriteMenu.svelte b/frontend/src/lib/components/sidebar/FavoriteMenu.svelte
index bb0547b29a..b40441d960 100644
--- a/frontend/src/lib/components/sidebar/FavoriteMenu.svelte
+++ b/frontend/src/lib/components/sidebar/FavoriteMenu.svelte
@@ -36,7 +36,7 @@
 	<div class="overflow-hidden" role="none">
 		{#if !favoriteLinks.length}
 			<div class="py-1" role="none">
-				<div class="text-gray-600 block px-4 py-2 text-xs" role="menuitem" tabindex="-1">
+				<div class="text-secondary block px-4 py-2 text-xs" role="menuitem" tabindex="-1">
 					Add Scripts/Flows/Apps here by starring them
 				</div>
 			</div>
@@ -46,7 +46,7 @@
 					<a
 						href={favorite.href}
 						on:click={close}
-						class="w-full inline-flex flex-row px-4 py-2 hover:bg-gray-100"
+						class="w-full inline-flex flex-row px-4 py-2 hover:bg-surface-hover"
 					>
 						<span class="center-center">
 							{#if favorite.kind == 'script'}
@@ -57,7 +57,7 @@
 								<LayoutDashboard size={16} />
 							{/if}
 						</span>
-						<span class="text-gray-800 ml-2 grow min-w-0 text-xs truncate">
+						<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
 							{favorite.label}
 						</span>
 					</a>
diff --git a/frontend/src/lib/components/sidebar/MenuLink.svelte b/frontend/src/lib/components/sidebar/MenuLink.svelte
index 87039f2a0a..0dedd8f5d7 100644
--- a/frontend/src/lib/components/sidebar/MenuLink.svelte
+++ b/frontend/src/lib/components/sidebar/MenuLink.svelte
@@ -29,7 +29,7 @@
 			'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8',
 			isSelected
 				? 'bg-gray-50 text-gray-900'
-				: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
+				: 'text-tertiary hover:bg-gray-50 hover:text-gray-900',
 			$$props.class
 		)}
 		target={href.includes('http') ? '_blank' : null}
@@ -39,7 +39,7 @@
 			data={icon}
 			class={classNames(
 				' flex-shrink-0 h-4 w-4',
-				isSelected ? ' text-gray-700' : 'text-white group-hover:text-gray-500',
+				isSelected ? ' text-gray-700' : 'text-white group-hover:text-tertiary',
 				isCollapsed ? '-mr-1' : 'mr-3'
 			)}
 		/>
diff --git a/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte b/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
index 32a3f9489d..44b7a91146 100644
--- a/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
+++ b/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
@@ -117,7 +117,7 @@
 						</span>
 						<div class="flex flex-col">
 							<span class="text-sm text-gray-900 truncate">{user}</span>
-							<span class="text-xs text-gray-500 truncate">{showActivity(url)}</span>
+							<span class="text-xs text-tertiary truncate">{showActivity(url)}</span>
 						</div>
 					</div>
 				{/each}
diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte
index 8f8c78c202..67dea93c0b 100644
--- a/frontend/src/lib/components/sidebar/SidebarContent.svelte
+++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte
@@ -16,6 +16,7 @@
 	import MenuLink from './MenuLink.svelte'
 	import { userStore } from '$lib/stores'
 	import { SIDEBAR_SHOW_SCHEDULES } from '$lib/consts'
+	import DarkModeToggle from './DarkModeToggle.svelte'
 
 	const mainMenuLinks = [
 		{ label: 'Home', href: '/', icon: faHomeAlt },
@@ -25,7 +26,12 @@
 	]
 
 	$: secondaryMenuLinks = [
-		{ label: 'Schedules', href: '/schedules', icon: faCalendar, disabled: !SIDEBAR_SHOW_SCHEDULES || $userStore?.operator },
+		{
+			label: 'Schedules',
+			href: '/schedules',
+			icon: faCalendar,
+			disabled: !SIDEBAR_SHOW_SCHEDULES || $userStore?.operator
+		},
 		{ label: 'Folders', href: '/folders', icon: faFolderOpen, disabled: $userStore?.operator },
 		{ label: 'Groups', href: '/groups', icon: faUsersCog, disabled: $userStore?.operator },
 		{ label: 'Audit Logs', href: '/audit_logs', icon: faEye, disabled: $userStore?.operator },
@@ -70,3 +76,5 @@
 		</div>
 	</div>
 </nav>
+
+<DarkModeToggle />
diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte
index 852746f2ab..ea71b92da0 100644
--- a/frontend/src/lib/components/sidebar/UserMenu.svelte
+++ b/frontend/src/lib/components/sidebar/UserMenu.svelte
@@ -46,12 +46,12 @@
 		{/if}
 	</button>
 
-	<div class="divide-y divide-gray-100">
+	<div class="divide-y">
 		<div class="px-4 py-3" role="none">
-			<p class="text-sm font-medium text-gray-900 truncate" role="none">
+			<p class="text-sm font-medium text-primary truncate" role="none">
 				{$usersWorkspaceStore?.email}
 			</p>
-			<span class="text-xs text-gray-600">
+			<span class="text-xs text-tertiary">
 				{#if $userStore?.is_admin}
 					Admin of this workspace <Icon data={faCrown} scale={0.6} />
 				{:else if $userStore?.operator}
@@ -63,7 +63,7 @@
 		<div class="py-1" role="none">
 			<a
 				href={USER_SETTINGS_HASH}
-				class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+				class="text-secondary block px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 				role="menuitem"
 				tabindex="-1"
 			>
@@ -74,7 +74,7 @@
 			<div class="py-1" role="none">
 				<a
 					href={SUPERADMIN_SETTINGS_HASH}
-					class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+					class="text-secondary block px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 					role="menuitem"
 					tabindex="-1"
 				>
@@ -90,7 +90,7 @@
 						switchWorkspace('admins')
 						close()
 					}}
-					class="text-gray-700 block px-4 py-2 font-normal text-sm hover:bg-gray-100 hover:text-gray-900"
+					class="text-secondary block px-4 py-2 font-normal text-sm hover:bg-surface-hover hover:text-primary"
 					role="menuitem"
 					tabindex="-1"
 				>
@@ -101,7 +101,7 @@
 		<div class="py-1" role="none">
 			<button
 				type="button"
-				class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+				class="text-secondary block w-full text-left px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 				role="menuitem"
 				tabindex="-1"
 				on:click={() => logout()}
@@ -112,7 +112,7 @@
 		{#if isCloudHosted() && $premiumStore}
 			{#if !$premiumStore.premium}
 				<div class="py-1" role="none">
-					<span class="text-gray-700 block w-full text-left px-4 py-2 text-sm"
+					<span class="text-secondary block w-full text-left px-4 py-2 text-sm"
 						>{$usageStore}/1000 free-tier executions</span
 					>
 					<div class="w-full bg-gray-200 h-1">
@@ -121,7 +121,7 @@
 					{#if $userStore?.is_admin}
 						<button
 							type="button"
-							class="text-gray-700 block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+							class="text-secondary block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
 							role="menuitem"
 							tabindex="-1"
 							on:click={() => {
@@ -137,7 +137,7 @@
 				<div class="py-1" role="none">
 					<button
 						type="button"
-						class="text-gray-700 block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
+						class="text-secondary block font-normal w-full text-left px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900"
 						role="menuitem"
 						tabindex="-1"
 						on:click={() => {
diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
index 607e1c86ab..8834cbedc0 100644
--- a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
+++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
@@ -28,14 +28,14 @@
 		{/if}
 	</button>
 
-	<div class="divide-y divide-gray-100" role="none">
+	<div class="divide-y" role="none">
 		<div class="py-1">
 			{#each $userWorkspaces as workspace}
 				<button
 					class="text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5
 						{$workspaceStore === workspace.id
-						? 'cursor-default bg-blue-50'
-						: 'cursor-pointer hover:bg-gray-100'}"
+						? 'cursor-default bg-surface-selected'
+						: 'cursor-pointer hover:bg-surface-hover'}"
 					on:click={() => {
 						if ($workspaceStore === workspace.id) {
 							return
@@ -44,17 +44,17 @@
 						close()
 					}}
 				>
-					<div class="text-gray-700 pl-4 truncate text-left text-[1.2em]">{workspace.name}</div>
-					<div class="text-gray-400 font-mono pl-4 text-2xs whitespace-nowrap truncate text-left"
-						>{workspace.id}</div
-					>
+					<div class="text-primary pl-4 truncate text-left text-[1.2em]">{workspace.name}</div>
+					<div class="text-tertiary font-mono pl-4 text-2xs whitespace-nowrap truncate text-left">
+						{workspace.id}
+					</div>
 				</button>
 			{/each}
 		</div>
 		<div class="py-1" role="none">
 			<a
 				href="/user/create_workspace"
-				class="text-gray-700 block px-4 py-2 text-xs hover:bg-gray-100 hover:text-gray-900"
+				class="text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary"
 				role="menuitem"
 				tabindex="-1"
 			>
@@ -67,7 +67,7 @@
 				on:click={() => {
 					localStorage.removeItem('workspace')
 				}}
-				class="text-gray-700 block px-4 py-2 text-xs hover:bg-gray-100 hover:text-gray-900"
+				class="text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary"
 				role="menuitem"
 				tabindex="-1"
 			>
@@ -77,7 +77,7 @@
 		<div class="py-1" role="none">
 			<a
 				href="/workspace_settings"
-				class="text-gray-700 block px-4 py-2 text-xs hover:bg-gray-100 hover:text-gray-900"
+				class="text-secondary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary"
 				role="menuitem"
 				tabindex="-1"
 			>
diff --git a/frontend/src/lib/components/theme/nord.json b/frontend/src/lib/components/theme/nord.json
new file mode 100644
index 0000000000..ea03bbb84c
--- /dev/null
+++ b/frontend/src/lib/components/theme/nord.json
@@ -0,0 +1,93 @@
+{
+  "base": "vs-dark",
+  "inherit": true,
+  "rules": [
+    {
+      "background": "2E3440",
+      "token": ""
+    },
+    {
+      "foreground": "616e88",
+      "token": "comment"
+    },
+    {
+      "foreground": "a3be8c",
+      "token": "string"
+    },
+    {
+      "foreground": "b48ead",
+      "token": "constant.numeric"
+    },
+    {
+      "foreground": "81a1c1",
+      "token": "constant.language"
+    },
+    {
+      "foreground": "81a1c1",
+      "token": "keyword"
+    },
+    {
+      "foreground": "81a1c1",
+      "token": "storage"
+    },
+    {
+      "foreground": "81a1c1",
+      "token": "storage.type"
+    },
+    {
+      "foreground": "8fbcbb",
+      "token": "entity.name.class"
+    },
+    {
+      "foreground": "8fbcbb",
+      "fontStyle": "  bold",
+      "token": "entity.other.inherited-class"
+    },
+    {
+      "foreground": "88c0d0",
+      "token": "entity.name.function"
+    },
+    {
+      "foreground": "81a1c1",
+      "token": "entity.name.tag"
+    },
+    {
+      "foreground": "8fbcbb",
+      "token": "entity.other.attribute-name"
+    },
+    {
+      "foreground": "88c0d0",
+      "token": "support.function"
+    },
+    {
+      "foreground": "f8f8f0",
+      "background": "f92672",
+      "token": "invalid"
+    },
+    {
+      "foreground": "f8f8f0",
+      "background": "ae81ff",
+      "token": "invalid.deprecated"
+    },
+    {
+      "foreground": "b48ead",
+      "token": "constant.color.other.rgb-value"
+    },
+    {
+      "foreground": "ebcb8b",
+      "token": "constant.character.escape"
+    },
+    {
+      "foreground": "8fbcbb",
+      "token": "variable.other.constant"
+    }
+  ],
+  "colors": {
+    "editor.foreground": "#D8DEE9",
+    "editor.background": "#2E3440",
+    "editor.selectionBackground": "#434C5ECC",
+    "editor.lineHighlightBackground": "#3B4252",
+    "editorCursor.foreground": "#D8DEE9",
+    "editorWhitespace.foreground": "#434C5ECC"
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/lib/defaults.ts b/frontend/src/lib/defaults.ts
index d1b0003fd2..0e76a226c1 100644
--- a/frontend/src/lib/defaults.ts
+++ b/frontend/src/lib/defaults.ts
@@ -1,5 +1,7 @@
 export const SELECT_INPUT_DEFAULT_STYLE = {
 	inputStyles: 'border-radius: 0;',
 	containerStyles:
-		'--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --border: 1px solid #d1d5db;'
+		'--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --border: 1px solid #d1d5db;',
+	containerStylesDark:
+		'--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --border: 1px solid #374151; --background: #3b4252; --disabled-background: #2a2f3a; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;'
 } as const
diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte
index 8f9bee73f0..a2872e223b 100644
--- a/frontend/src/routes/(root)/(logged)/+layout.svelte
+++ b/frontend/src/routes/(root)/(logged)/+layout.svelte
@@ -178,7 +178,7 @@
 		>
 			<div
 				class={classNames(
-					'fixed inset-0 bg-[#2e3440] bg-opacity-75 transition-opacity ease-linear duration-300 z-40',
+					'fixed inset-0 bg-[#1e232e] bg-opacity-75 transition-opacity ease-linear duration-300 z-40 !dark',
 					menuOpen ? 'opacity-100' : 'opacity-0'
 				)}
 			/>
@@ -186,7 +186,7 @@
 			<div class="fixed inset-0 flex z-40">
 				<div
 					class={classNames(
-						'relative flex-1 flex flex-col max-w-min w-full bg-white transition ease-in-out duration-300 transform',
+						'relative flex-1 flex flex-col max-w-min w-full bg-surface transition ease-in-out duration-300 transform',
 						menuOpen ? 'translate-x-0' : '-translate-x-full'
 					)}
 				>
@@ -216,7 +216,7 @@
 							</svg>
 						</button>
 					</div>
-					<div class="bg-[#2e3440] h-full">
+					<div class="bg-[#1e232e] h-full !dark">
 						<div
 							class="flex items-center gap-x-2 flex-shrink-0 p-4 font-extrabold text-white w-10"
 							class:w-40={!isCollapsed}
@@ -247,7 +247,7 @@
 				devOnly ? '!hidden' : ''
 			)}
 		>
-			<div class="flex-1 flex flex-col min-h-0 h-screen shadow-lg bg-[#2e3440]">
+			<div class="flex-1 flex flex-col min-h-0 h-screen shadow-lg bg-[#1e232e] !dark">
 				<button
 					on:click={() => {
 						goto('/')
@@ -294,7 +294,7 @@
 		</div>
 		<div
 			class={classNames(
-				'w-full flex flex-col flex-1',
+				'w-full flex flex-col flex-1 h-full',
 				devOnly ? '!pl-0' : isCollapsed ? 'md:pl-12' : 'md:pl-40'
 			)}
 		>
@@ -311,7 +311,7 @@
 							on:click={() => {
 								menuOpen = true
 							}}
-							class="h-8 w-8 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+							class="h-8 w-8 inline-flex items-center justify-center rounded-md text-tertiary hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
 						>
 							<svg
 								class="h-6 w-6"
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index f2a3eb46fd..61423b5d2c 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -192,7 +192,7 @@
 		<PageHeader title="Home">
 			<div class="flex flex-row gap-4 flex-wrap justify-end items-center">
 				{#if !$userStore?.operator}
-					<span class="text-sm text-gray-500">Create a new:</span>
+					<span class="text-sm text-secondary">Create a new:</span>
 					<CreateActionsScript />
 					{#if HOME_SHOW_CREATE_FLOW}<CreateActionsFlow />{/if}
 					{#if HOME_SHOW_CREATE_APP}<CreateActionsApp />{/if}
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index 15cf45606b..c7f1a954d4 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -220,12 +220,12 @@
 			<SplitPanesWrapper>
 				<Splitpanes horizontal>
 					<Pane size={60} minSize={20}>
-						<div class="p-8 w-full max-w-3xl mx-auto gap-2">
+						<div class="p-8 w-full max-w-3xl mx-auto gap-2 bg-surface">
 							<div class="flex flex-col gap-0.5">
 								{#if !emptyString(flow.summary)}
 									<span class="text-lg font-semibold">{flow.path}</span>
 								{/if}
-								<span class="text-sm text-gray-600">
+								<span class="text-sm text-tertiary">
 									Edited {displayDaysAgo(flow.edited_at ?? '')} by {flow.edited_by}
 								</span>
 
@@ -256,7 +256,9 @@
 						</div>
 					</Pane>
 					<Pane size={40} minSize={20}>
-						<FlowGraphViewer download {flow} overflowAuto noSide={true} />
+						<div class="!bg-surface-secondary h-full">
+							<FlowGraphViewer download {flow} overflowAuto noSide={true} />
+						</div>
 					</Pane>
 				</Splitpanes>
 			</SplitPanesWrapper>
diff --git a/frontend/src/routes/(root)/(logged)/folders/+page.svelte b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
index 6b82bd29bf..a50aa11162 100644
--- a/frontend/src/routes/(root)/(logged)/folders/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/folders/+page.svelte
@@ -119,7 +119,7 @@
 				{:else}
 					{#if folders.length === 0}
 						<tr>
-							<td colspan="4" class="text-gray-600 mt-2"> No folders yet, create one! </td>
+							<td colspan="4" class="text-tertiary mt-2"> No folders yet, create one! </td>
 						</tr>
 					{/if}
 
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index e607d5972b..4589e987fd 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -306,7 +306,7 @@
 		</svelte:fragment>
 		<div class="flex flex-col gap-6">
 			<label for="inp">
-				<div class="mb-1 font-semibold text-gray-700 gap-1 flex flex-row items-center"
+				<div class="mb-1 font-semibold text-secondary gap-1 flex flex-row items-center"
 					>Name
 					<div class="flex flex-row items-center gap-x-4">
 						<div class="flex flex-row items-center">
@@ -324,7 +324,7 @@
 				</div></label
 			>
 			<label>
-				<div class="mb-1 font-semibold text-gray-700">Description</div>
+				<div class="mb-1 font-semibold text-secondary">Description</div>
 				<textarea
 					type="text"
 					use:autosize
@@ -333,7 +333,7 @@
 				/></label
 			>
 			<div>
-				<div class="mb-1 font-semibold text-gray-700">Schema</div>
+				<div class="mb-1 font-semibold text-secondary">Schema</div>
 				<SchemaEditor bind:schema={editResourceType.schema} />
 			</div>
 		</div>
@@ -347,7 +347,7 @@
 		</svelte:fragment>
 		<div class="flex flex-col gap-6">
 			<label for="inp">
-				<div class="mb-1 font-semibold text-gray-700 gap-1 flex flex-row items-center"
+				<div class="mb-1 font-semibold text-secondary gap-1 flex flex-row items-center"
 					>Name<Required required={true} /><Tooltip>
 						Resource types are synchronized with the official types on the hub regularly. The `c_`
 						prefix is to avoid name clashes with them.
@@ -384,7 +384,7 @@
 				</div>
 			</label>
 			<label>
-				<div class="mb-1 font-semibold text-gray-700">Description</div>
+				<div class="mb-1 font-semibold text-secondary">Description</div>
 				<textarea
 					type="text"
 					use:autosize
@@ -393,7 +393,7 @@
 				/></label
 			>
 			<div>
-				<div class="mb-1 font-semibold text-gray-700">Schema</div>
+				<div class="mb-1 font-semibold text-secondary">Schema</div>
 				<div class="mb-2 w-full flex flex-row-reverse">
 					<Button on:click={openInferrer} size="sm" color="dark" variant="border">
 						Infer schema from a json value
@@ -534,7 +534,7 @@
 										</a>
 									</td>
 									<td>
-										<span class="text-gray-500 text-xs">
+										<span class="text-tertiary text-xs">
 											{removeMarkdown(truncate(description ?? '', 30))}
 										</span>
 									</td>
@@ -718,7 +718,7 @@
 										</a>
 									</td>
 									<td>
-										<span class="text-gray-500 text-xs">
+										<span class="text-tertiary text-xs">
 											{removeMarkdown(truncate(description ?? '', 200))}
 										</span>
 									</td>
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index fafe236d4f..60885ca3ef 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -266,14 +266,14 @@
 						/>
 					{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
 						<Icon
-							class="text-gray-700"
+							class="text-secondary"
 							data={faCalendar}
 							scale={iconScale}
 							label="Job is scheduled for a later time"
 						/>
 					{:else if job && 'running' in job && job.scheduled_for}
 						<Icon
-							class="text-gray-500"
+							class="text-tertiary"
 							data={faHourglassHalf}
 							scale={iconScale}
 							label="Job is waiting for an executor"
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index 69e577a259..97d008d2d2 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -329,7 +329,7 @@
 				<Button
 					color="light"
 					size="xs2"
-					wrapperClasses="border-gray-200 border rounded-md"
+					wrapperClasses="border rounded-md"
 					on:click={() => {
 						manualDates[selectedManualDate].setMinMax()
 						loadJobs()
diff --git a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
index 0e89494ffd..af6e6cbfde 100644
--- a/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/schedules/+page.svelte
@@ -124,9 +124,9 @@
 				<Skeleton layout={[[6], 0.4]} />
 			{/each}
 		{:else if !schedules?.length}
-			<div class="text-center text-sm text-gray-600 mt-2"> No schedules </div>
+			<div class="text-center text-sm text-tertiary mt-2"> No schedules </div>
 		{:else if filteredItems?.length}
-			<div class="border rounded-md divide-y divide-gray-200">
+			<div class="border rounded-md divide-y">
 				{#each filteredItems as { path, error, edited_by, edited_at, schedule, timezone, enabled, script_path, is_flow, extra_perms, canWrite, args, marked, jobs }}
 					{@const href = `${is_flow ? '/flows/get' : '/scripts/get'}/${script_path}`}
 					{@const avg_s = jobs
@@ -134,7 +134,7 @@
 						: undefined}
 
 					<div
-						class="hover:bg-gray-50 w-full items-center px-4 py-2 gap-4 first-of-type:!border-t-0
+						class="hover:bg-surface-hover w-full items-center px-4 py-2 gap-4 first-of-type:!border-t-0
 				first-of-type:rounded-t-md last-of-type:rounded-b-md flex flex-col"
 					>
 						<div class="w-full flex gap-5 items-center">
@@ -145,7 +145,7 @@
 								on:click={() => scheduleEditor?.openEdit(path, is_flow)}
 								class="min-w-0 grow hover:underline decoration-gray-400"
 							>
-								<div class="text-gray-900 flex-wrap text-left text-md font-semibold mb-1 truncate">
+								<div class="text-primary flex-wrap text-left text-md font-semibold mb-1 truncate">
 									{#if marked}
 										<span class="text-xs">
 											{@html marked}
@@ -154,7 +154,7 @@
 										{script_path}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs truncate text-left font-light">
+								<div class="text-secondary text-xs truncate text-left font-light">
 									schedule: {path}
 								</div>
 							</a>
@@ -278,7 +278,7 @@
 						<div class="w-full flex justify-between items-baseline">
 							<div class="flex gap-1.5 ml-0.5 items-baseline flex-row-reverse">
 								{#if avg_s}
-									<div class="pl-2 text-gray-600 text-2xs">Avg: {(avg_s / 1000).toFixed(2)}s</div>
+									<div class="pl-2 text-tertiary text-2xs">Avg: {(avg_s / 1000).toFixed(2)}s</div>
 								{/if}
 								{#each jobs ?? [] as job}
 									{@const h = (avg_s ? job.duration_ms / avg_s : 1) * 7 + 3}
@@ -289,7 +289,7 @@
 													class="{job.success ? 'bg-green-300' : 'bg-red-300'} mx-auto w-1.5"
 													style="height: {h}px"
 												/>
-												<!-- <div class="text-[0.6em] mt-0.5 text-center text-gray-500"
+												<!-- <div class="text-[0.6em] mt-0.5 text-center text-tertiary"
 													>{(job.duration_ms / 1000).toFixed(2)}s</div
 												> -->
 											</div>
@@ -297,7 +297,7 @@
 									</a>
 								{/each}
 							</div>
-							<div class="flex flex-wrap text-[0.7em] text-gray-500 gap-1 justify-end truncate pr-2"
+							<div class="flex flex-wrap text-[0.7em] text-tertiary gap-1 justify-end truncate pr-2"
 								><div class="truncate">edited by {edited_by}</div><div class="truncate"
 									>the {displayDate(edited_at)}</div
 								></div
diff --git a/frontend/src/routes/(root)/(logged)/scripts/dev/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/dev/+page.svelte
index 8407cc069e..516f25ce02 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/dev/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/dev/+page.svelte
@@ -36,11 +36,6 @@
 	const href = window.location.href
 	const indexQ = href.indexOf('?')
 	const searchParams = indexQ > -1 ? new URLSearchParams(href.substring(indexQ)) : undefined
-	const darkMode = searchParams?.get('activeColorTheme') === '2'
-
-	darkMode
-		? document.documentElement.classList.add('dark')
-		: document.documentElement.classList.remove('dark')
 
 	if (searchParams?.has('local')) {
 		connectWs()
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index 69cdcaa8fb..6133762168 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -433,10 +433,10 @@
 					{/if}
 
 					<div class="flex flex-row gap-x-2 flex-wrap items-center mt-2">
-						<span class="text-sm text-gray-600">
+						<span class="text-sm text-secondary">
 							Edited {displayDaysAgo(script.created_at || '')} by {script.created_by || 'unknown'}
 						</span>
-						<Badge small color="gray">
+						<Badge small color="dark-blue">
 							{truncateHash(script?.hash ?? '')}
 						</Badge>
 						{#if script?.is_template}
@@ -530,9 +530,11 @@
 						<TabContent value="dependencies">
 							<div class="">
 								{#if script?.lock}
-									<pre class="bg-gray-50 text-sm p-2">{script.lock}</pre>
+									<pre class="bg-surface-secondary text-sm p-2 h-full">{script.lock}</pre>
 								{:else}
-									<p class="bg-gray-50 text-sm p-2"> There is no lock file for this script</p>
+									<p class="bg-surface-secondary text-sm p-2">
+										There is no lock file for this script
+									</p>
 								{/if}
 							</div>
 						</TabContent>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
index 45617caa7e..2046a87502 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
@@ -60,15 +60,11 @@
 
 <CenteredModal title="Invitation to join {workspace_id}">
 	<label class="block pb-2">
-		<span class="text-gray-700 text-sm">Your username in workspace {workspace_id}:</span>
+		<span class="text-secondary text-sm">Your username in workspace {workspace_id}:</span>
 		{#if errorUsername}
 			<span class="text-red-500 text-xs">{errorUsername}</span>
 		{/if}
-		<input
-			on:keyup={handleKey}
-			bind:value={username}
-			class:input-error={errorUsername != ''}
-		/>
+		<input on:keyup={handleKey} bind:value={username} class:input-error={errorUsername != ''} />
 	</label>
 	<div class="flex flex-row justify-between pt-4 gap-x-1">
 		<Button variant="border" size="sm" href="/user/workspaces"
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte
index 80c4e46d1d..6c4da057a4 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/create_workspace/+page.svelte
@@ -109,18 +109,18 @@
 
 <CenteredModal title="New Workspace">
 	<label class="block pb-2 pt-4">
-		<span class="text-gray-700 text-sm">Workspace name</span>
+		<span class="text-secondary text-sm">Workspace name</span>
 		<input type="text" bind:value={name} />
 	</label>
 	<label class="block pb-2">
-		<span class="text-gray-700 text-sm">Workspace ID</span>
+		<span class="text-secondary text-sm">Workspace ID</span>
 		{#if errorId}
 			<span class="text-red-500 text-xs">{errorId}</span>
 		{/if}
 		<input type="text" bind:value={id} class:input-error={errorId != ''} />
 	</label>
 	<label class="block pb-2">
-		<span class="text-gray-700 text-sm">Your username in that workspace</span>
+		<span class="text-secondary text-sm">Your username in that workspace</span>
 		{#if errorUser}
 			<span class="text-red-500 text-xs">{errorUser}</span>
 		{/if}
@@ -143,7 +143,7 @@
 		>
 	</div>
 	{#if isDomainAllowed == false}
-		<div class="text-gray-600 text-sm mb-4 mt-2">{domain} domain not allowed for auto-invite</div>
+		<div class="text-tertiary text-sm mb-4 mt-2">{domain} domain not allowed for auto-invite</div>
 	{/if}
 	<div class="flex flex-wrap flex-row justify-between pt-10 gap-1">
 		<Button variant="border" size="sm" href="/user/workspaces"
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
index bd0f4e65a9..f8f8731016 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
@@ -12,8 +12,8 @@
 	import { sendUserToast } from '$lib/toast'
 	import { isCloudHosted } from '$lib/cloud'
 	import { refreshSuperadmin } from '$lib/refreshUser'
-	import Version from '$lib/components/Version.svelte'
-	import Uptodate from '$lib/components/Uptodate.svelte'
+	import LoginPageHeader from '$lib/components/LoginPageHeader.svelte'
+	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
 
 	let email = $page.url.searchParams.get('email') ?? ''
 	let password = $page.url.searchParams.get('password') ?? ''
@@ -158,18 +158,18 @@
 	}
 </script>
 
-<div class="flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative bg-gray-50 h-screen">
-	<div class="absolute top-0 right-0 text-2xs text-gray-800 italic px-3 py-1">
-		<div class="font-mono flex-col flex"><Version /><div><Uptodate /></div></div>
-	</div>
+<div
+	class="flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative bg-surface-secondary h-screen"
+>
+	<LoginPageHeader />
 	<div class="sm:mx-auto sm:w-full sm:max-w-md">
 		<div class="mx-auto flex justify-center">
 			<WindmillIcon height="80px" width="80px" spin="slow" />
 		</div>
-		<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+		<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-primary">
 			Login or sign up
 		</h2>
-		<p class="mt-2 text-center text-sm text-gray-600">
+		<p class="mt-2 text-center text-sm text-secondary">
 			Login or sign up with any of the methods below
 		</p>
 	</div>
@@ -177,7 +177,10 @@
 	<div
 		class={classNames('mt-8 sm:mx-auto sm:w-full sm:max-w-xl', showPassword ? 'mb-16' : 'mb-48')}
 	>
-		<div class="bg-white px-4 py-8 shadow md:border sm:rounded-lg sm:px-10">
+		<div class="flex justify-end">
+			<DarkModeToggle forcedDarkMode={false} />
+		</div>
+		<div class="bg-surface px-4 py-8 shadow md:border sm:rounded-lg sm:px-10">
 			<div class="grid {logins && logins.length > 2 ? 'grid-cols-2' : ''} gap-4">
 				{#if !logins}
 					{#each Array(4) as _}
@@ -239,13 +242,13 @@
 				<div>
 					<div class="space-y-6">
 						{#if isCloudHosted()}
-							<p class="text-xs text-gray-500 italic pb-6">
+							<p class="text-xs text-tertiary italic pb-6">
 								To get credentials without the OAuth providers above, send an email at
 								contact@windmill.dev
 							</p>
 						{/if}
 						<div>
-							<label for="email" class="block text-sm font-medium leading-6 text-gray-900">
+							<label for="email" class="block text-sm font-medium leading-6 text-primary">
 								Email
 							</label>
 							<div>
@@ -254,13 +257,13 @@
 									bind:value={email}
 									id="email"
 									autocomplete="email"
-									class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
+									class="block w-full rounded-md border-0 py-1.5 text-primary shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
 								/>
 							</div>
 						</div>
 
 						<div>
-							<label for="password" class="block text-sm font-medium leading-6 text-gray-900">
+							<label for="password" class="block text-sm font-medium leading-6 text-primary">
 								Password
 							</label>
 							<div>
@@ -270,7 +273,7 @@
 									id="password"
 									type="password"
 									autocomplete="current-password"
-									class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
+									class="block w-full rounded-md border-0 py-1.5 text-shadow shadow-sm ring-1 ring-inset placeholder:text-secondary focus:ring-2 focus:ring-inset focus:ring-frost-600 sm:text-sm sm:leading-6"
 								/>
 							</div>
 						</div>
@@ -287,7 +290,7 @@
 					</div>
 
 					{#if isCloudHosted()}
-						<p class="text-2xs text-gray-500 italic mt-10 text-center">
+						<p class="text-2xs text-tertiary italic mt-10 text-center">
 							By logging in, you agree to our
 							<a href="https://windmill.dev/terms_of_service" target="_blank" rel="noreferrer">
 								Terms of Service
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
index 37a364e5d1..bd49defd7d 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
@@ -118,7 +118,7 @@
 
 	{#if workspaces && $usersWorkspaceStore}
 		{#if workspaces.length == 0}
-			<p class="text-sm text-gray-600 mt-2">
+			<p class="text-sm text-tertiary mt-2">
 				You are not a member of any workspace yet. Accept an invitation or create your own
 				workspace.
 			</p>
@@ -126,7 +126,7 @@
 		{#each workspaces.filter((x) => x.id != 'admins') as workspace}
 			<label class="block pb-2">
 				<button
-					class="block w-full mx-auto py-1 px-2 rounded-md border border-gray-300
+					class="block w-full mx-auto py-1 px-2 rounded-md border
 				shadow-sm text-sm font-normal mt-1 hover:ring-1 hover:ring-indigo-300"
 					on:click={async () => {
 						workspaceStore.set(workspace.id)
@@ -173,11 +173,11 @@
 
 	<h2 class="mt-6 mb-4">Invites to join a Workspace</h2>
 	{#if invites.length == 0}
-		<p class="text-sm text-gray-500 mt-2"> You don't have new invites at the moment. </p>
+		<p class="text-sm text-tertiary mt-2"> You don't have new invites at the moment. </p>
 	{/if}
 	{#each invites as invite}
 		<div
-			class="w-full mx-auto py-1 px-2 rounded-md border border-gray-300 shadow-sm
+			class="w-full mx-auto py-1 px-2 rounded-md border shadow-sm
 			text-sm mt-1 flex flex-row justify-between items-center"
 		>
 			<div class="grow">
@@ -241,7 +241,7 @@
 		class="border rounded-md shadow-md bg-white w-full max-w-[640px] p-4 sm:py-8 sm:px-10 mb-6 md:mb-20"
 	>
 		<h1 class="text-center mb-2">Select a workspace</h1>
-		<p class="text-center font-medium text-gray-600 text-xs mb-10">
+		<p class="text-center font-medium text-tertiary text-xs mb-10">
 			Logged in as {$usersWorkspaceStore?.email}
 		</p>
 	</div>
diff --git a/frontend/src/routes/(root)/(logged)/variables/+page.svelte b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
index d389fcfd41..2ec904e70b 100644
--- a/frontend/src/routes/(root)/(logged)/variables/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/variables/+page.svelte
@@ -140,7 +140,9 @@
 		<Tab size="md" value="contextual">
 			<div class="flex gap-2 items-center my-1">
 				<DollarSign size={18} />
-				Contextual <Tooltip documentationLink="https://www.windmill.dev/docs/core_concepts/variables_and_secrets#contextual-variables">
+				Contextual <Tooltip
+					documentationLink="https://www.windmill.dev/docs/core_concepts/variables_and_secrets#contextual-variables"
+				>
 					Contextual variables are passed as environment variables when running a script and depends
 					on the execution context.</Tooltip
 				>
@@ -194,7 +196,7 @@
 											<Popover notClickable>
 												<Icon
 													label="Secret"
-													class="text-gray-700 mb-2 ml-2"
+													class="text-secondary mb-2 ml-2"
 													data={faEyeSlash}
 													scale={0.8}
 												/>
@@ -204,7 +206,7 @@
 									</span>
 								</td>
 								<td class="break-words"
-									><span class="text-xs text-gray-500">{truncate(description ?? '', 50)}</span></td
+									><span class="text-xs text-tertiary">{truncate(description ?? '', 50)}</span></td
 								>
 
 								<td class="text-center">
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
index ddffd93a13..12849ed13a 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
@@ -314,7 +314,8 @@
 				title="Members ({users?.length ?? ''})"
 				primary={false}
 				tooltip="Manage users manually or enable SSO authentication."
-				documentationLink="https://www.windmill.dev/docs/core_concepts/authentification"/>
+				documentationLink="https://www.windmill.dev/docs/core_concepts/authentification"
+			/>
 
 			<AddUser on:new={listUsers} />
 
@@ -390,10 +391,13 @@
 														create new ones.</Tooltip
 													></ToggleButton
 												>
-												<ToggleButton position="right" value="admin" size="xs">Admin<Tooltip
-														>An admin has full control over a specific Windmill workspace, including the ability to manage users, edit
-														entities, and control permissions within the workspace.</Tooltip
-													></ToggleButton>
+												<ToggleButton position="right" value="admin" size="xs"
+													>Admin<Tooltip
+														>An admin has full control over a specific Windmill workspace, including
+														the ability to manage users, edit entities, and control permissions
+														within the workspace.</Tooltip
+													></ToggleButton
+												>
 											</ToggleButtonGroup>
 										</div>
 									</td>
@@ -449,7 +453,12 @@
 					</tbody>
 				</TableCustom>
 			</div>
-			<PageHeader title="Invites ({invites.length ?? ''})" primary={false} tooltip="Manage invites on your workspace." documentationLink="https://www.windmill.dev/docs/core_concepts/authentification#adding-users-to-a-workspace">
+			<PageHeader
+				title="Invites ({invites.length ?? ''})"
+				primary={false}
+				tooltip="Manage invites on your workspace."
+				documentationLink="https://www.windmill.dev/docs/core_concepts/authentification#adding-users-to-a-workspace"
+			>
 				<InviteUser on:new={listInvites} />
 			</PageHeader>
 
@@ -490,7 +499,12 @@
 			</div>
 
 			<div class="mt-10" />
-			<PageHeader title="Auto Invite" tooltip="Auto invite to the workspace users from your domain." documentationLink="https://www.windmill.dev/docs/core_concepts/authentification#auto-invite" primary={false} />
+			<PageHeader
+				title="Auto Invite"
+				tooltip="Auto invite to the workspace users from your domain."
+				documentationLink="https://www.windmill.dev/docs/core_concepts/authentification#auto-invite"
+				primary={false}
+			/>
 			<div class="flex gap-2">
 				{#if auto_invite_domain != domain}
 					<div>
@@ -568,7 +582,7 @@
 							endIcon={{ icon: faExternalLink }}
 							href="/api/w/{$workspaceStore}/workspaces/billing_portal">Customer Portal</Button
 						>
-						<p class="text-xs text-gray-600 mt-1">
+						<p class="text-xs text-tertiary mt-1">
 							See invoices, change billing information or subscription details</p
 						>
 					</div>
@@ -717,7 +731,7 @@
 					with a '/windmill' command.</Alert
 				></div
 			>
-			<p class="text-xs text-gray-700 my-1 mt-2">
+			<p class="text-xs text-secondary my-1 mt-2">
 				Status: {#if team_name}Connected to slack workspace <Badge>{team_name}</Badge>{:else}Not
 					connected{/if}
 			</p>
@@ -756,12 +770,13 @@
 					</Button>
 				</div>
 			{/if}
-			<h3 class="mt-5 text-gray-700"
-				>Script or flow to run on /windmill command <Tooltip>
+			<h3 class="mt-5 text-secondary">
+				Script or flow to run on /windmill command
+				<Tooltip>
 					The script or flow to be triggered when the `/windmill` command is invoked. The script or
 					flow chosen is passed the parameters <pre>response_url: string, text: string</pre>
-					respectively the url to reply directly to the trigger and the text of the command.</Tooltip
-				>
+					respectively the url to reply directly to the trigger and the text of the command.
+				</Tooltip>
 			</h3>
 			<ScriptPicker
 				kind={Script.kind.SCRIPT}
@@ -839,7 +854,7 @@
 				></div
 			>
 
-			<h3 class="mt-5 text-gray-700"
+			<h3 class="mt-5 text-secondary"
 				>URL to send requests to<Tooltip>
 					This URL will be POSTed to with a JSON body depending on the type of event. The type is
 					indicated by the <pre>type</pre> field. The other fields are dependent on the type.
@@ -864,7 +879,7 @@
 			/>
 			<div class="flex flex-col gap-20 items-start mt-3">
 				<div class="w-2/3">
-					<div class="text-gray-600 text-sm">
+					<div class="text-tertiary text-sm">
 						The following args will be passed to the error handler:
 						<ul class="mt-1 ml-2">
 							<li><b>path</b>: The path of the script or flow that errored.</li>
@@ -891,11 +906,12 @@
 			</div>
 		{:else if tab == 'openai'}
 			<PageHeader title="Windmill AI" primary={false} />
-			<div class="mt-2"
-				><Alert type="info" title="Experimental feature"
-					>Select an OpenAI resource to unlock Windmill AI features! <br/> Windmill AI currently only supports OpenAI's GPT-4.</Alert
-				></div
-			>
+			<div class="mt-2">
+				<Alert type="info" title="Experimental feature">
+					Select an OpenAI resource to unlock Windmill AI features! <br /> Windmill AI currently only
+					supports OpenAI's GPT-4.
+				</Alert>
+			</div>
 			<div class="mt-5">
 				{#key openaiResourceInitialPath}
 					<ResourcePicker
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
index d5789c97d9..5b64ffee81 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
@@ -38,11 +38,11 @@
 				The checkout failed, your subscription has not been updated.
 			</Alert>
 		</div>
-		<p class="text-sm my-6 text-gray-600">
+		<p class="text-sm my-6 text-tertiary">
 			You will be redirected to the workspace settings page in 5 seconds...
 		</p>
 	{:else}
-		<p class="text-sm my-6 text-gray-600 w-full text-center">
+		<p class="text-sm my-6 text-tertiary w-full text-center">
 			Waiting for your upgrade to be processed...
 		</p>
 	{/if}
diff --git a/frontend/src/routes/(root)/+layout.svelte b/frontend/src/routes/(root)/+layout.svelte
index 34208ee240..53dcba2aa5 100644
--- a/frontend/src/routes/(root)/+layout.svelte
+++ b/frontend/src/routes/(root)/+layout.svelte
@@ -7,9 +7,9 @@
 	import { getUserExt } from '$lib/user'
 	import { sendUserToast } from '$lib/toast'
 	import { onDestroy, onMount } from 'svelte'
-	import github from 'svelte-highlight/styles/github'
 
 	import { refreshSuperadmin } from '$lib/refreshUser'
+	import EditorTheme from '$lib/components/EditorTheme.svelte'
 
 	let token = $page.url.searchParams.get('wm_token') ?? undefined
 	if (token) {
@@ -147,10 +147,16 @@
 	onDestroy(() => {
 		interval && clearInterval(interval)
 	})
+
+	const darkMode = window.localStorage.getItem('dark-mode')
+
+	if (darkMode === 'dark') {
+		document.documentElement.classList.add('dark')
+	} else {
+		document.documentElement.classList.remove('dark')
+	}
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
+<EditorTheme />
 
 <slot />
diff --git a/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte b/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
index aa5a7b9e45..0ade97a8d1 100644
--- a/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
+++ b/frontend/src/routes/public/[workspace]/[...secret]/+page.svelte
@@ -42,7 +42,7 @@
 </svelte:head>
 
 <div class="z-50 text-xs fixed bottom-1 right-2">
-	<a href="https://windmill.dev" class="whitespace-nowrap text-gray-500 inline-flex items-center"
+	<a href="https://windmill.dev" class="whitespace-nowrap text-tertiary inline-flex items-center"
 		>Powered by &nbsp;<WindmillIcon />&nbsp;Windmill</a
 	>
 </div>
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 9600f5d16c..333d548f85 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -1,17 +1,62 @@
 const plugin = require('tailwindcss/plugin')
 
 const lightTheme = {
-	primaryBackground: 'white',
-	secondaryBackground: '#f9fafb',
-	primaryText: '#2d3748',
-	border: '#cccccc'
+	surface: '#ffffff',
+	surfaceSecondary: '#f3f4f6',
+	surfaceHover: '#e5e7eb',
+	surfaceDisabled: '#f9fafb',
+	surfaceSelected: '#d1d5db',
+
+	textPrimary: '#2d3748',
+	textSecondary: '#4a5568',
+	textTertiary: '#718096',
+	textDisabled: '#a0aec0',
+
+	border: '#ccc'
 }
 
+const lightThemeRgb = makeRgb(lightTheme)
+
 const darkTheme = {
-	primaryBackground: '#2e3440',
-	secondaryBackground: '#3b4252',
-	primaryText: '#DADCEA',
-	border: '#3e3f53'
+	surface: '#2e3440',
+	surfaceSecondary: '#3b4252',
+	surfaceHover: '#4c566a',
+	surfaceDisabled: '#2a2f3a',
+	surfaceSelected: '#434c5e',
+
+	textPrimary: '#f3f6f8',
+	textSecondary: '#e0e7ed',
+	textTertiary: '#d8dee9',
+	textDisabled: '#a0aec0',
+
+	border: '#3e4c60'
+}
+
+const darkThemeRgb = makeRgb(darkTheme)
+
+function makeRgb(theme) {
+	return Object.fromEntries(
+		Object.entries(theme).map(([key, value]) => {
+			if (typeof value === 'string' && value.startsWith('#')) {
+				return [key, hexToRgb(value)]
+			}
+
+			return [key, value]
+		})
+	)
+}
+
+function hexToRgb(hex) {
+	// Remove '#' symbol from the beginning of the hex value
+	hex = hex.replace('#', '')
+
+	// Convert the hex value to decimal
+	const r = parseInt(hex.substring(0, 2), 16)
+	const g = parseInt(hex.substring(2, 4), 16)
+	const b = parseInt(hex.substring(4, 6), 16)
+
+	// Return the RGB string format
+	return `${r} ${g} ${b}`
 }
 
 /** @type {import('tailwindcss').Config} */
@@ -318,16 +363,39 @@ const config = {
 				900: '#312e81'
 			},
 			frost: {
-				100: '#dfe6ee',
-				200: '#bfcdde',
-				300: '#9eb3cd',
-				400: '#7e9abd',
+				50: '#f5f7fa',
+				100: '#eaeef4',
+				200: '#cfd9e8',
+				300: '#a6bad3',
+				400: '#7594bb',
 				500: '#5e81ac',
-				600: '#4b678a',
-				700: '#384d67',
-				800: '#263445',
-				900: '#131a22'
-			}
+				600: '#415f88',
+				700: '#364d6e',
+				800: '#2f425d',
+				900: '#2b394f',
+				950: '#1d2534'
+			},
+			surface: 'rgb(var(--color-surface) / <alpha-value>)',
+			'surface-secondary': 'rgb(var(--color-surface-secondary) / <alpha-value>)',
+			'surface-hover': 'rgb(var(--color-surface-hover) / <alpha-value>)',
+			'surface-disabled': 'rgb(var(--color-surface-disabled) / <alpha-value>)',
+			'surface-selected': 'rgb(var(--color-surface-selected) / <alpha-value>)',
+
+			primary: 'rgb(var(--color-text-primary) / <alpha-value>)',
+			secondary: 'rgb(var(--color-text-secondary) / <alpha-value>)',
+			tertiary: 'rgb(var(--color-text-tertiary) / <alpha-value>)',
+			disabled: 'rgb(var(--color-text-disabled) / <alpha-value>)',
+
+			'surface-inverse': 'rgb(var(--color-surface-inverse) / <alpha-value>)',
+			'surface-secondary-inverse': 'rgb(var(--color-surface-secondary-inverse) / <alpha-value>)',
+			'surface-hover-inverse': 'rgb(var(--color-surface-hover-inverse) / <alpha-value>)',
+			'surface-disabled-inverse': 'rgb(var(--color-surface-disabled-inverse) / <alpha-value>)',
+			'surface-selected-inverse': 'rgb(var(--color-surface-selected-inverse) / <alpha-value>)',
+
+			'primary-inverse': 'rgb(var(--color-text-primary-inverse) / <alpha-value>)',
+			'secondary-inverse': 'rgb(var(--color-text-secondary-inverse) / <alpha-value>)',
+			'tertiary-inverse': 'rgb(var(--color-text-tertiary-inverse) / <alpha-value>)',
+			'disabled-inverse': 'rgb(var(--color-text-disabled-inverse) / <alpha-value>)'
 		},
 		fontFamily: {
 			// add double quotes if there is space in font name
@@ -344,6 +412,9 @@ const config = {
 			]
 		},
 		extend: {
+			border: {
+				color: 'red'
+			},
 			maxHeight: {
 				'1/2': '50vh',
 				'2/3': '66vh',
@@ -393,16 +464,71 @@ const config = {
 					fontFamily: theme('fontFamily.main'),
 					fontSize: theme('fontSize.base'),
 					fontWeight: theme('fontWeight.normal'),
-					color: theme('colors.gray.900'),
+
+					backgroundColor: 'rgb(var(--color-surface) / <alpha-value>)',
+					color: lightTheme.textPrimary,
+
+					'--color-surface': lightThemeRgb.surface,
+					'--color-surface-secondary': lightThemeRgb.surfaceSecondary,
+					'--color-surface-hover': lightThemeRgb.surfaceHover,
+					'--color-surface-disabled': lightThemeRgb.surfaceDisabled,
+					'--color-surface-selected': lightThemeRgb.surfaceSelected,
+
+					'--color-text-primary': lightThemeRgb.textPrimary,
+					'--color-text-secondary': lightThemeRgb.textSecondary,
+					'--color-text-tetiary': lightThemeRgb.textTertiary,
+					'--color-text-disabled': lightThemeRgb.textDisabled,
+
+					'--color-surface-inverse': darkThemeRgb.surface,
+					'--color-surface-secondary-inverse': darkThemeRgb.surfaceSecondary,
+					'--color-surface-hover-inverse': darkThemeRgb.surfaceHover,
+					'--color-surface-disabled-inverse': darkThemeRgb.surfaceDisabled,
+					'--color-surface-selected-inverse': darkThemeRgb.surfaceSelected,
+
+					'--color-text-primary-inverse': darkThemeRgb.textPrimary,
+					'--color-text-secondary-inverse': darkThemeRgb.textSecondary,
+					'--color-text-tertiary-inverse': darkThemeRgb.textTertiary,
+					'--color-text-disabled-inverse': darkThemeRgb.textDisabled,
+
+					'--color-border': lightThemeRgb.border,
+
 					[`@media (min-width: ${theme('screens.qhd')})`]: {
 						fontSize: theme('fontSize.lg')
+					},
+
+					'&.dark': {
+						backgroundColor: darkTheme.surface,
+						color: darkTheme.textPrimary,
+
+						'--color-surface': darkThemeRgb.surface,
+						'--color-surface-secondary': darkThemeRgb.surfaceSecondary,
+						'--color-surface-hover': darkThemeRgb.surfaceHover,
+						'--color-surface-disabled': darkThemeRgb.surfaceDisabled,
+						'--color-surface-selected': darkThemeRgb.surfaceSelected,
+
+						'--color-text-primary': darkThemeRgb.textPrimary,
+						'--color-text-secondary': darkThemeRgb.textSecondary,
+						'--color-text-tetiary': darkThemeRgb.textTertiary,
+						'--color-text-disabled': darkThemeRgb.textDisabled,
+
+						'--color-surface-inverse': lightThemeRgb.surface,
+						'--color-surface-secondary-inverse': lightThemeRgb.surfaceSecondary,
+						'--color-surface-hover-inverse': lightThemeRgb.surfaceHover,
+						'--color-surface-disabled-inverse': lightThemeRgb.surfaceDisabled,
+						'--color-surface-selected-inverse': lightThemeRgb.surfaceSelected,
+
+						'--color-text-primary-inverse': lightThemeRgb.textPrimary,
+						'--color-text-secondary-inverse': lightThemeRgb.textSecondary,
+						'--color-text-tertiary-inverse': lightThemeRgb.textTertiary,
+						'--color-text-disabled-inverse': lightThemeRgb.textDisabled,
+
+						'--color-border': darkThemeRgb.border
 					}
 				},
 				h1: {
 					fontSize: '24px',
 					fontWeight: theme('fontWeight.extrabold'),
 					lineHeight: '1.05',
-					color: theme('colors.gray.800'),
 					[`@media (min-width: ${theme('screens.lg')})`]: {
 						fontSize: '26px'
 					},
@@ -417,7 +543,6 @@ const config = {
 					fontSize: '20px',
 					fontWeight: theme('fontWeight.extrabold'),
 					lineHeight: '1.1',
-					color: theme('colors.gray.700'),
 					[`@media (min-width: ${theme('screens.fhd')})`]: {
 						fontSize: '22px'
 					},
@@ -433,7 +558,6 @@ const config = {
 					fontSize: '18px',
 					fontWeight: theme('fontWeight.bold'),
 					lineHeight: '1.2',
-					color: theme('colors.gray.600'),
 					[`@media (min-width: ${theme('screens.fhd')})`]: {
 						fontSize: '20px'
 					},
@@ -483,7 +607,7 @@ const config = {
 						border: `1px solid ${theme('colors.gray.300')}`,
 						borderRadius: theme('borderRadius.md'),
 						'&:focus': {
-							'--tw-ring-color': theme('colors.indigo.100'),
+							'--tw-ring-color': theme('colors.frost.100'),
 							'--tw-ring-offset-shadow':
 								'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
 							'--tw-ring-shadow':
@@ -492,7 +616,10 @@ const config = {
 								'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)'
 						},
 						'&:disabled,[disabled]': {
-							backgroundColor: theme('colors.gray.100') + ' !important'
+							backgroundColor: theme('colors.gray.100') + ' !important',
+							'.dark &': {
+								backgroundColor: theme('colors.gray.700') + ' !important'
+							}
 						}
 					},
 				'.dark input:not(.windmillapp),.dark input[type="text"]:not(.windmillapp),.dark input[type="email"]:not(.windmillapp),.dark input[type="url"]:not(.windmillapp),.dark input[type="password"]:not(.windmillapp),.dark input[type="number"]:not(.windmillapp),.dark input[type="date"]:not(.windmillapp),.dark input[type="datetime-local"]:not(.windmillapp),.dark input[type="month"]:not(.windmillapp),.dark input[type="search"]:not(.windmillapp),.dark input[type="tel"]:not(.windmillapp),.dark input[type="time"]:not(.windmillapp),.dark input[type="week"]:not(.windmillapp),.dark textarea:not(.windmillapp):not(.monaco-mouse-cursor-text),.dark select:not(.windmillapp)':
@@ -501,7 +628,7 @@ const config = {
 						color: theme('colors.gray.200'),
 						borderColor: theme('colors.gray.600'),
 						'&:focus': {
-							'--tw-ring-color': theme('colors.indigo.700')
+							'--tw-ring-color': theme('colors.frost.700')
 						}
 					},
 
@@ -625,11 +752,11 @@ const config = {
 					)})`
 				},
 				'.splitpanes__pane': {
-					backgroundColor: theme('colors.white') + ' !important',
+					backgroundColor: lightTheme.surface + ' !important',
 					overflow: 'auto !important'
 				},
 				'.dark .splitpanes__pane': {
-					backgroundColor: darkTheme.primaryBackground + ' !important',
+					backgroundColor: darkTheme.surface + ' !important',
 					overflow: 'auto !important'
 				},
 				'.splitpanes__splitter': {
@@ -637,7 +764,7 @@ const config = {
 					margin: '0 !important',
 					border: 'none !important',
 					'&::after': {
-						backgroundColor: '#3f83f850 !important',
+						backgroundColor: lightTheme.border + ' !important',
 						margin: '0 !important',
 						transform: 'none !important',
 						zIndex: '1001 !important',
@@ -653,7 +780,7 @@ const config = {
 				'.dark .splitpanes__splitter': {
 					backgroundColor: darkTheme.border + ' !important',
 					'&::after': {
-						backgroundColor: '#8ebdcc !important'
+						backgroundColor: darkTheme.border + ' !important'
 					}
 				},
 				'.splitpanes--vertical>.splitpanes__splitter': {
@@ -688,35 +815,22 @@ const config = {
 				// Windmill Tab classes
 
 				'.wm-tab-active': {
-					borderColor: theme('colors.gray.600'),
-					color: theme('colors.gray.800')
+					borderColor: darkTheme.border,
+					color: lightTheme.textPrimary
 				},
 
 				'.dark .wm-tab-active': {
-					borderColor: 'white',
-					color: darkTheme.primaryText
+					borderColor: lightTheme.border,
+					color: darkTheme.textPrimary
 				}
 			})
+
 			addUtilities({
-				html: {
-					backgroundColor: lightTheme.primaryBackground,
-					color: lightTheme.primaryText,
-
-					'&.dark': {
-						backgroundColor: darkTheme.primaryBackground,
-						color: darkTheme.primaryText
-					}
-				},
-				'.secondaryBackground': {
-					backgroundColor: lightTheme.secondaryBackground
-				},
-
-				'.dark .secondaryBackground': {
-					backgroundColor: darkTheme.secondaryBackground
-				},
-
 				'.separator': {
-					backgroundColor: '#ddd !important'
+					backgroundColor: `${lightTheme.border} !important`
+				},
+				'.dark .separator': {
+					backgroundColor: `${darkTheme.border} !important`
 				},
 				'.center-center': {
 					display: 'flex',