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

@@ -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');

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
 	>

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>

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()

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}

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}

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>
 

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>

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
 	}}

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

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} />

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>

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>

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"

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

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

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

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}

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,

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"

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>

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}`
 					: ''}

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>

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}

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}

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>

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>

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>

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}

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>

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">

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

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}

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">

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

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}

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

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>

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"

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}

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>

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}

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

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}

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}

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>

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={() => {

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

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

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

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>

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>
 

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}

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

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} />
 

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" />

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}

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}

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>

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}

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>

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}

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">

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

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>

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}

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>

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,

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}

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>

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')}

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')

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

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>

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
 				)}

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>

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}
 	/>

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}

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>

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>

frontend/src/lib/components/Version.svelte

@@ -10,4 +10,6 @@
 	}
 </script>
 
-{version}
+<div class="text-secondary text-xs">
+	{version}
+</div>

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}

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>

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}

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>

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}

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"
 	>

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>

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>

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}

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}

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>

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

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">

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>

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">

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}

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}

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>

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}