feat(frontend): vscode extension dark mode (#1730)

* feat(frontend): Dark mode v0

* feat(frontend): Dark mode v0

* feat(frontend): add secondaryBackground

* feat(frontend): revert change

* feat(frontend): revert change

* feat(frontend): fix colors

frontend/src/lib/components/ArgInput.svelte

@@ -23,6 +23,7 @@
 	import StringTypeNarrowing from './StringTypeNarrowing.svelte'
 	import Toggle from './Toggle.svelte'
 	import type VariableEditor from './VariableEditor.svelte'
+	import { twMerge } from 'tailwind-merge'
 
 	export let label: string = ''
 	export let value: any
@@ -377,9 +378,12 @@
 							{autofocus}
 							on:focus
 							type="text"
-							class={valid
-								? ''
-								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+							class={twMerge(
+								'secondaryBackground',
+								valid
+									? ''
+									: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
+							)}
 							placeholder={defaultValue ?? ''}
 							bind:value
 						/>
@@ -443,9 +447,12 @@
 								on:keydown={onKeyDown}
 								type="text"
 								{disabled}
-								class="w-full {valid
-									? ''
-									: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+								class={twMerge(
+									'w-full secondaryBackground',
+									valid
+										? ''
+										: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
+								)}
 								placeholder={defaultValue ?? ''}
 								bind:value
 							/>

frontend/src/lib/components/DisplayResult.svelte

@@ -116,7 +116,7 @@
 			<div class="mb-2 text-gray-500 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 text-gray-700 relative"
+				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 right-0">

frontend/src/lib/components/Editor.svelte

@@ -713,7 +713,7 @@
 
 <style global lang="postcss">
 	.editor {
-		@apply p-0 border rounded-md border-gray-50;
+		@apply p-0;
 	}
 	.yRemoteSelection {
 		background-color: rgb(250, 129, 0, 0.5);

frontend/src/lib/components/FieldHeader.svelte

@@ -25,11 +25,11 @@
 
 	{#if displayType}
 		{#if format && format != ''}
-			<span class="text-sm italic ml-1 text-indigo-800">
+			<span class="text-sm italic ml-1 text-indigo-800 dark:text-indigo-400">
 				({format})
 			</span>
 		{:else}
-			<span class="text-sm italic ml-1 text-indigo-800">
+			<span class="text-sm italic ml-1 text-indigo-800 dark:text-indigo-400">
 				({type ?? 'any'}{contentEncoding && contentEncoding != ''
 					? `, encoding: ${contentEncoding}`
 					: ''})

frontend/src/lib/components/LogViewer.svelte

@@ -35,10 +35,8 @@
 </Drawer>
 
 <div class="relative w-full h-full {wrapperClass}">
-	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
-		<div
-			class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-gray-500 text-sm bg-gray-50/20"
-		>
+	<div bind:this={div} class="w-full h-full overflow-auto relative secondaryBackground">
+		<div class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-sm">
 			<div class="flex gap-1">
 				<button on:click={logViewer.openDrawer}>Expand</button>
 				<div class="py-2 pr-2 text-xs flex gap-2 items-center">
@@ -50,16 +48,17 @@
 		{#if isLoading}
 			<Loader2 class="animate-spin absolute top-2 left-2" />
 		{:else if duration}
-			<span class="absolute text-xs text-gray-500 top-2 left-2">took {duration}ms</span>
+			<span class="absolute text-xs text-gray-500 dark:text-gray-400 top-2 left-2"
+				>took {duration}ms</span
+			>
 		{/if}
 		{#if mem}
-			<span class="absolute text-xs text-gray-500 top-2 left-36"
+			<span class="absolute text-xs text-gray-500 dark:text-gray-400 top-2 left-36"
 				>mem peak: {(mem / 1024).toPrecision(4)}MB</span
 			>
 		{/if}
-		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
-			>{#if content}<span>{content}</span>{:else if !isLoading}<span class="text-gray-600"
-					>No logs are available yet</span
+		<pre class="whitespace-pre-wrap break-words text-xs w-full p-2"
+			>{#if content}<span>{content}</span>{:else if !isLoading}<span>No logs are available yet</span
 				>{/if}</pre
 		>
 	</div>

frontend/src/lib/components/Required.svelte

@@ -4,7 +4,7 @@
 </script>
 
 {#if required}
-	<span class="text-red-700 font-normal {$$props.class}">*</span>
+	<span class="text-red-700 dark:text-red-400 font-normal {$$props.class}">*</span>
 {:else if detail || detail != ''}
 	<span class="text-sm text-gray-500 ml-2 font-normal {$$props.class}"
 		>({detail != '' ? `${detail}` : ''})</span

frontend/src/lib/components/common/tabs/Tab.svelte

@@ -28,8 +28,8 @@
 	class={twMerge(
 		'border-b-2 py-1 px-4 cursor-pointer transition-all z-10 ease-linear font-medium',
 		$selected?.startsWith(value)
-			? 'border-gray-600 text-gray-800 '
-			: 'border-gray-300 border-opacity-0 hover:border-opacity-100 text-gray-600',
+			? 'wm-tab-active'
+			: 'border-gray-300 dark:border-gray-500 border-opacity-0 hover:border-opacity-100 ',
 		fontSizeClasses[size],
 		c,
 		$selected?.startsWith(value) ? selectedClass : '',

frontend/src/routes/(root)/(logged)/scripts/dev/+page.svelte

@@ -36,6 +36,11 @@
 	const href = window.location.href
 	const indexQ = href.indexOf('?')
 	const searchParams = indexQ > -1 ? new URLSearchParams(href.substring(indexQ)) : undefined
+	const darkMode = searchParams?.get('activeColorTheme') === '2'
+
+	darkMode
+		? document.documentElement.classList.add('dark')
+		: document.documentElement.classList.remove('dark')
 
 	if (searchParams?.has('local')) {
 		connectWs()
@@ -146,9 +151,10 @@
 
 <main class="h-screen w-full">
 	<div class="flex flex-col h-full">
-		<div class="text-center w-full text-lg truncate py-1"
-			>{currentScript?.path ?? 'Not editing a script'} {currentScript?.language ?? ''}</div
-		>
+		<div class="text-center w-full text-lg truncate py-1 dark:text-white">
+			{currentScript?.path ?? 'Not editing a script'}
+			{currentScript?.language ?? ''}
+		</div>
 		{#if !validCode}
 			<div class="text-center w-full text-lg truncate py-1 text-red-500">Invalid code</div>
 		{/if}

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

@@ -8,6 +8,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import { onMount } from 'svelte'
 	import github from 'svelte-highlight/styles/github'
+
 	import { refreshSuperadmin } from '$lib/refreshUser'
 
 	let token = $page.url.searchParams.get('wm_token') ?? undefined

frontend/tailwind.config.cjs

@@ -1,5 +1,19 @@
 const plugin = require('tailwindcss/plugin')
 
+const lightTheme = {
+	primaryBackground: 'white',
+	secondaryBackground: '#f9fafb',
+	primaryText: '#2d3748',
+	border: '#cccccc'
+}
+
+const darkTheme = {
+	primaryBackground: '#2e3440',
+	secondaryBackground: '#3b4252',
+	primaryText: '#DADCEA',
+	border: '#3e3f53'
+}
+
 /** @type {import('tailwindcss').Config} */
 const config = {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
@@ -7,6 +21,8 @@ const config = {
 		'hljs',
 		'splitpanes__pane',
 		'splitpanes__splitter',
+		'wm-tab',
+		'wm-tab-selected',
 		...(process.env.NODE_ENV === 'production'
 			? [
 					{ pattern: /^m(\w?)-.*$/ },
@@ -479,6 +495,16 @@ const config = {
 							backgroundColor: theme('colors.gray.100') + ' !important'
 						}
 					},
+				'.dark input:not(.windmillapp),.dark input[type="text"]:not(.windmillapp),.dark input[type="email"]:not(.windmillapp),.dark input[type="url"]:not(.windmillapp),.dark input[type="password"]:not(.windmillapp),.dark input[type="number"]:not(.windmillapp),.dark input[type="date"]:not(.windmillapp),.dark input[type="datetime-local"]:not(.windmillapp),.dark input[type="month"]:not(.windmillapp),.dark input[type="search"]:not(.windmillapp),.dark input[type="tel"]:not(.windmillapp),.dark input[type="time"]:not(.windmillapp),.dark input[type="week"]:not(.windmillapp),.dark textarea:not(.windmillapp):not(.monaco-mouse-cursor-text),.dark select:not(.windmillapp)':
+					{
+						backgroundColor: theme('colors.gray.700'),
+						color: theme('colors.gray.200'),
+						borderColor: theme('colors.gray.600'),
+						'&:focus': {
+							'--tw-ring-color': theme('colors.indigo.700')
+						}
+					},
+
 				'button:disabled,button[disabled=true],a:disabled,a[disabled=true]': {
 					pointerEvents: 'none',
 					cursor: 'default',
@@ -544,6 +570,9 @@ const config = {
 						color: theme('colors.gray.900'),
 						textTransform: 'capitalize'
 					},
+					'.dark & th': {
+						color: theme('colors.gray.200')
+					},
 					'& td': {
 						paddingLeft: theme('spacing.1'),
 						paddingRight: theme('spacing.1'),
@@ -552,11 +581,20 @@ const config = {
 						fontSize: theme('fontSize.sm'),
 						color: theme('colors.gray.700')
 					},
+					'.dark & td ': {
+						color: theme('colors.gray.200')
+					},
 					'& tbody > :not([hidden]) ~ :not([hidden])': {
 						borderTop: `1px solid ${theme('colors.gray.200')}`
 					},
+					'.dark & tbody > :not([hidden]) ~ :not([hidden])': {
+						borderTop: `1px solid ${theme('colors.gray.700')}`
+					},
 					'& tbody > tr:hover': {
 						backgroundColor: theme('colors.gray.50')
+					},
+					'.dark & tbody > tr:hover': {
+						backgroundColor: theme('colors.gray.800')
 					}
 				},
 				'.commit-hash': {
@@ -590,8 +628,12 @@ const config = {
 					backgroundColor: theme('colors.white') + ' !important',
 					overflow: 'auto !important'
 				},
+				'.dark .splitpanes__pane': {
+					backgroundColor: darkTheme.primaryBackground + ' !important',
+					overflow: 'auto !important'
+				},
 				'.splitpanes__splitter': {
-					backgroundColor: theme('colors.gray.300') + ' !important',
+					backgroundColor: lightTheme.border + ' !important',
 					margin: '0 !important',
 					border: 'none !important',
 					'&::after': {
@@ -608,6 +650,12 @@ const config = {
 						opacity: '1'
 					}
 				},
+				'.dark .splitpanes__splitter': {
+					backgroundColor: darkTheme.border + ' !important',
+					'&::after': {
+						backgroundColor: '#8ebdcc !important'
+					}
+				},
 				'.splitpanes--vertical>.splitpanes__splitter': {
 					width: '1px !important',
 					'&::before': {
@@ -635,9 +683,38 @@ const config = {
 						left: '0 !important',
 						width: '100% !important'
 					}
+				},
+
+				// Windmill Tab classes
+
+				'.wm-tab-active': {
+					borderColor: theme('colors.gray.600'),
+					color: theme('colors.gray.800')
+				},
+
+				'.dark .wm-tab-active': {
+					borderColor: 'white',
+					color: darkTheme.primaryText
 				}
 			})
 			addUtilities({
+				html: {
+					backgroundColor: lightTheme.primaryBackground,
+					color: lightTheme.primaryText,
+
+					'&.dark': {
+						backgroundColor: darkTheme.primaryBackground,
+						color: darkTheme.primaryText
+					}
+				},
+				'.secondaryBackground': {
+					backgroundColor: lightTheme.secondaryBackground
+				},
+
+				'.dark .secondaryBackground': {
+					backgroundColor: darkTheme.secondaryBackground
+				},
+
 				'.separator': {
 					backgroundColor: '#ddd !important'
 				},