windmill-components 1.352.6 → 1.352.7

package/package/assets/app.css

@@ -28,33 +28,6 @@
 		list-style-type: '- ';
 		padding-left: 3rem;
 	}
-	.splitpanes--vertical > .splitpanes__pane {
-		transition: none !important;
-	}
-
-	.splitpanes--horizontal > .splitpanes__pane {
-		transition: none !important;
-	}
-
-	.monaco-workbench > .notifications-toasts.visible {
-		display: none !important;
-	}
-
-	.monaco-editor .suggest-widget {
-		z-index: 10001 !important;
-	}
-
-	.nowrap pre code.hljs {
-		whitespace: normal !important;
-	}
-
-	.z5000 {
-		z-index: 5000 !important;
-	}
-
-	.foo {
-		color: red !important;
-	}
 	.autocomplete-list-item-create {
 		@apply !text-primary-inverse !bg-surface-inverse;
 	}
@@ -74,25 +47,23 @@
 	.autocomplete-list {
 		@apply !bg-surface;
 	}
-	pre code.hljs {
-		overflow: visible !important;
-	}
 
-	svelte-virtual-list-row {
-		overflow: visible !important;
+	.ol-overlaycontainer-stopevent {
+		@apply flex flex-col justify-start items-end;
 	}
-
-	svelte-virtual-list-contents > * + * {
-		border-top-width: 1px !important;
-		border-bottom-width: 0px !important;
+	.ol-control button {
+		@apply w-7 h-7 center-center bg-surface border text-secondary 
+		rounded mt-1 mr-1 shadow duration-200 hover:bg-surface-hover focus:bg-surface-hover;
 	}
 
-	.monaco-editor textarea:focus {
-		box-shadow: none !important;
+	/* Components */
+	.component-wrapper {
+		@apply rounded-component border overflow-hidden border-gray-300 dark:border-gray-600;
 	}
 
-	.Template-editor span.mtk20 {
-		color: black !important;
+	.app-editor-input {
+		@apply rounded-component border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
+		@apply placeholder:text-gray-400 dark:placeholder:text-gray-600;
 	}
 }
 
@@ -117,6 +88,47 @@
 	}
 }
 
+.splitpanes--vertical > .splitpanes__pane {
+	transition: none !important;
+}
+
+.splitpanes--horizontal > .splitpanes__pane {
+	transition: none !important;
+}
+
+.monaco-workbench > .notifications-toasts.visible {
+	display: none !important;
+}
+
+.monaco-editor .suggest-widget {
+	z-index: 10001 !important;
+}
+
+.z5000 {
+	z-index: 5000 !important;
+}
+
+.foo {
+	color: red !important;
+}
+
+svelte-virtual-list-row {
+	overflow: visible !important;
+}
+
+svelte-virtual-list-contents > * + * {
+	border-top-width: 1px !important;
+	border-bottom-width: 0px !important;
+}
+
+.monaco-editor textarea:focus {
+	box-shadow: none !important;
+}
+
+.Template-editor span.mtk20 {
+	color: black !important;
+}
+
 .grid-cell-centered {
 	display: flex;
 	align-items: center;
@@ -129,21 +141,3 @@
 .grid-cell-centered .selected-item {
 	margin-top: -4px;
 }
-
-.ol-overlaycontainer-stopevent {
-	@apply flex flex-col justify-start items-end;
-}
-.ol-control button {
-	@apply w-7 h-7 center-center bg-surface border text-secondary 
-	rounded mt-1 mr-1 shadow duration-200 hover:bg-surface-hover focus:bg-surface-hover;
-}
-
-/* Components */
-.component-wrapper {
-	@apply rounded-component border overflow-hidden border-gray-300 dark:border-gray-600;
-}
-
-.app-editor-input {
-	@apply rounded-component border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
-	@apply placeholder:text-gray-400 dark:placeholder:text-gray-600;
-}

package/package/components/DisplayResult.svelte

@@ -19,6 +19,7 @@ import Popover from './Popover.svelte';
 import DownloadCsv from './table/DownloadCsv.svelte';
 import { convertJsonToCsv } from './table/tableUtils';
 import Tooltip from './Tooltip.svelte';
+import HighlightTheme from './HighlightTheme.svelte';
 export let result;
 export let requireHtmlApproval = false;
 export let filename = undefined;
@@ -260,6 +261,7 @@ let globalForceJson = false;
 let seeS3PreviewFileFromList = '';
 </script>
 
+<HighlightTheme />
 {#if is_render_all}
 	<div class="flex flex-col w-full gap-6">
 		{#if !noControls}

package/package/components/FlowGraphViewerStep.svelte

@@ -13,11 +13,14 @@ import { hubBaseUrlStore } from '../stores';
 import { twMerge } from 'tailwind-merge';
 import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
 import { Copy } from 'lucide-svelte';
+import HighlightTheme from './HighlightTheme.svelte';
 export let schema = undefined;
 export let stepDetail = undefined;
 let codeViewer;
 </script>
 
+<HighlightTheme />
+
 <Drawer bind:this={codeViewer} size="900px">
 	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
 		{#if stepDetail && typeof stepDetail != 'string'}

package/package/components/FlowViewer.svelte

@@ -8,6 +8,7 @@ import FlowGraphViewer from './FlowGraphViewer.svelte';
 import { Clipboard } from 'lucide-svelte';
 import YAML from 'yaml';
 import { yaml } from 'svelte-highlight/languages';
+import HighlightTheme from './HighlightTheme.svelte';
 export let flow;
 export let initialOpen = undefined;
 export let noSide = false;
@@ -30,6 +31,8 @@ function toAny(x) {
 }
 </script>
 
+<HighlightTheme />
+
 <Tabs bind:selected={tab}>
 	{#if !noGraph}
 		<Tab value="ui">Graph</Tab>

package/package/components/HighlightCode.svelte

@@ -11,6 +11,7 @@ import php from 'svelte-highlight/languages/php';
 import { Button } from './common';
 import { copyToClipboard } from '../utils';
 import { ClipboardCopy } from 'lucide-svelte';
+import HighlightTheme from './HighlightTheme.svelte';
 export let code = '';
 export let language;
 export let lines = false;
@@ -51,6 +52,8 @@ function getLang(lang) {
 $: lang = getLang(language);
 </script>
 
+<HighlightTheme />
+
 <div class="relative overflow-x-auto">
 	<Button
 		wrapperClasses="absolute top-2 right-2 z-20"

package/package/components/HighlightTheme.svelte

@@ -0,0 +1,318 @@
+<script>"use strict";
+</script>
+
+<style global>
+	:global(pre) :global(code.hljs) {
+		display: block;
+		overflow-x: auto;
+		padding: 1em;
+		overflow: visible !important;
+	}
+
+	:global(code.hljs) {
+		padding: 3px 5px;
+	}
+
+	:global(.dark) :global(.hljs) {
+		background: #2e3440;
+	}
+	:global(.dark) :global(.hljs),
+	:global(.dark) :global(.hljs-subst) {
+		color: #d8dee9;
+	}
+	:global(.dark) :global(.hljs-selector-tag) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.hljs-selector-id) {
+		color: #8fbcbb;
+		font-weight: bold;
+	}
+	:global(.dark) :global(.hljs-selector-class) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-selector-attr) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-property) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.hljs-selector-pseudo) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.hljs-addition) {
+		background-color: rgba(163, 190, 140, 0.5);
+	}
+	:global(.dark) :global(.hljs-deletion) {
+		background-color: rgba(191, 97, 106, 0.5);
+	}
+	:global(.dark) :global(.hljs-built_in),
+	:global(.dark) :global(.hljs-type) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-class) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-function) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.hljs-title.hljs-function),
+	:global(.dark) :global(.hljs-function) > :global(.hljs-title) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.hljs-keyword),
+	:global(.dark) :global(.hljs-literal),
+	:global(.dark) :global(.hljs-symbol) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.hljs-number) {
+		color: #b48ead;
+	}
+	:global(.dark) :global(.hljs-regexp) {
+		color: #ebcb8b;
+	}
+	:global(.dark) :global(.hljs-string) {
+		color: #a3be8c;
+	}
+	:global(.dark) :global(.hljs-title) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-params) {
+		color: #d8dee9;
+	}
+	:global(.dark) :global(.hljs-bullet) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.hljs-code) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-emphasis) {
+		font-style: italic;
+	}
+	:global(.dark) :global(.hljs-formula) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-strong) {
+		font-weight: bold;
+	}
+	:global(.dark) :global(.hljs-link:hover) {
+		-webkit-text-decoration: underline;
+		text-decoration: underline;
+	}
+	:global(.dark) :global(.hljs-quote) {
+		color: #4c566a;
+	}
+	:global(.dark) :global(.hljs-comment) {
+		color: #4c566a;
+	}
+	:global(.dark) :global(.hljs-doctag) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-meta),
+	:global(.dark) :global(.hljs-meta) :global(.hljs-keyword) {
+		color: #5e81ac;
+	}
+	:global(.dark) :global(.hljs-meta) :global(.hljs-string) {
+		color: #a3be8c;
+	}
+	:global(.dark) :global(.hljs-attr) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.hljs-attribute) {
+		color: #d8dee9;
+	}
+	:global(.dark) :global(.hljs-name) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.hljs-section) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.hljs-tag) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.hljs-variable) {
+		color: #d8dee9;
+	}
+	:global(.dark) :global(.hljs-template-variable) {
+		color: #d8dee9;
+	}
+	:global(.dark) :global(.hljs-template-tag) {
+		color: #5e81ac;
+	}
+	:global(.dark) :global(.language-abnf) :global(.hljs-attribute) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-abnf) :global(.hljs-symbol) {
+		color: #ebcb8b;
+	}
+	:global(.dark) :global(.language-apache) :global(.hljs-attribute) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-apache) :global(.hljs-section) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.language-arduino) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-aspectj) :global(.hljs-meta) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-aspectj) > :global(.hljs-title) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-bnf) :global(.hljs-attribute) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.language-clojure) :global(.hljs-name) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-clojure) :global(.hljs-symbol) {
+		color: #ebcb8b;
+	}
+	:global(.dark) :global(.language-coq) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-cpp) :global(.hljs-meta) :global(.hljs-string) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.language-css) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-css) :global(.hljs-keyword) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-diff) :global(.hljs-meta) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.language-ebnf) :global(.hljs-attribute) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.language-glsl) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-groovy) :global(.hljs-meta:not(:first-child)) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-haxe) :global(.hljs-meta) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-java) :global(.hljs-meta) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-ldif) :global(.hljs-attribute) {
+		color: #8fbcbb;
+	}
+	:global(.dark) :global(.language-lisp) :global(.hljs-name) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-lua) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-moonscript) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-nginx) :global(.hljs-attribute) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-nginx) :global(.hljs-section) {
+		color: #5e81ac;
+	}
+	:global(.dark) :global(.language-pf) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-processing) :global(.hljs-built_in) {
+		color: #88c0d0;
+	}
+	:global(.dark) :global(.language-scss) :global(.hljs-keyword) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.language-stylus) :global(.hljs-keyword) {
+		color: #81a1c1;
+	}
+	:global(.dark) :global(.language-swift) :global(.hljs-meta) {
+		color: #d08770;
+	}
+	:global(.dark) :global(.language-vim) :global(.hljs-built_in) {
+		color: #88c0d0;
+		font-style: italic;
+	}
+	:global(.dark) :global(.language-yaml) :global(.hljs-meta) {
+		color: #d08770;
+	}
+
+	:global(.hljs) {
+		color: #24292e;
+		background: #ffffff;
+	}
+	:global(.hljs-doctag),
+	:global(.hljs-keyword),
+	:global(.hljs-meta) :global(.hljs-keyword),
+	:global(.hljs-template-tag),
+	:global(.hljs-template-variable),
+	:global(.hljs-type),
+	:global(.hljs-variable.language_) {
+		color: #d73a49;
+	}
+	:global(.hljs-title),
+	:global(.hljs-title.class_),
+	:global(.hljs-title.class_.inherited__),
+	:global(.hljs-title.function_) {
+		color: #6f42c1;
+	}
+	:global(.hljs-attr),
+	:global(.hljs-attribute),
+	:global(.hljs-literal),
+	:global(.hljs-meta),
+	:global(.hljs-number),
+	:global(.hljs-operator),
+	:global(.hljs-variable),
+	:global(.hljs-selector-attr),
+	:global(.hljs-selector-class),
+	:global(.hljs-selector-id) {
+		color: #005cc5;
+	}
+	:global(.hljs-regexp),
+	:global(.hljs-string),
+	:global(.hljs-meta) :global(.hljs-string) {
+		color: #032f62;
+	}
+	:global(.hljs-built_in),
+	:global(.hljs-symbol) {
+		color: #e36209;
+	}
+	:global(.hljs-comment),
+	:global(.hljs-code),
+	:global(.hljs-formula) {
+		color: #6a737d;
+	}
+	:global(.hljs-name),
+	:global(.hljs-quote),
+	:global(.hljs-selector-tag),
+	:global(.hljs-selector-pseudo) {
+		color: #22863a;
+	}
+	:global(.hljs-subst) {
+		color: #24292e;
+	}
+	:global(.hljs-section) {
+		color: #005cc5;
+		font-weight: bold;
+	}
+	:global(.hljs-bullet) {
+		color: #735c0f;
+	}
+	:global(.hljs-emphasis) {
+		color: #24292e;
+		font-style: italic;
+	}
+	:global(.hljs-strong) {
+		color: #24292e;
+		font-weight: bold;
+	}
+	:global(.hljs-addition) {
+		color: #22863a;
+		background-color: #f0fff4;
+	}
+	:global(.hljs-deletion) {
+		color: #b31d28;
+		background-color: #ffeef0;
+	}</style>

package/package/components/HighlightTheme.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HighlightThemeProps = typeof __propDef.props;
+export type HighlightThemeEvents = typeof __propDef.events;
+export type HighlightThemeSlots = typeof __propDef.slots;
+export default class HighlightTheme extends SvelteComponent<HighlightThemeProps, HighlightThemeEvents, HighlightThemeSlots> {
+}
+export {};

package/package/components/JobArgs.svelte

@@ -8,6 +8,7 @@ import DataTable from './table/DataTable.svelte';
 import Cell from './table/Cell.svelte';
 import Head from './table/Head.svelte';
 import Row from './table/Row.svelte';
+import HighlightTheme from './HighlightTheme.svelte';
 export let args;
 export let argLabel = undefined;
 let jsonViewer;
@@ -85,6 +86,8 @@ ${Object.entries(args)
 	</DataTable>
 </div>
 
+<HighlightTheme />
+
 <Drawer bind:this={jsonViewer} size="900px">
 	<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
 		<svelte:fragment slot="actions">

package/package/components/RunChart.svelte

@@ -70,9 +70,13 @@ const zoomOptions = {
         }
     }
 };
+function isDark() {
+    return document.documentElement.classList.contains('dark');
+}
+ChartJS.defaults.color = isDark() ? '#ccc' : '#666';
+ChartJS.defaults.borderColor = isDark() ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
 function getBackgorundColor() {
-    const isDark = document.documentElement.classList.contains('dark');
-    return isDark ? '#2e3440' : '#ffffff';
+    return isDark() ? '#2e3440' : '#ffffff';
 }
 function hexToRgb(hexColor) {
     hexColor = hexColor.replace(/^#/, '');

package/package/components/SchemaViewer.svelte

@@ -6,6 +6,7 @@ import Tab from './common/tabs/Tab.svelte';
 import TabContent from './common/tabs/TabContent.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import { Badge } from './common';
+import HighlightTheme from './HighlightTheme.svelte';
 export let schema = emptySchema();
 function getProperties(schema) {
     if (schema.properties) {
@@ -15,6 +16,8 @@ function getProperties(schema) {
 }
 </script>
 
+<HighlightTheme />
+
 <div class="w-full">
 	<Tabs selected="arguments">
 		<Tab value="arguments">Arguments</Tab>

package/package/components/SupabaseConnect.svelte

@@ -10,6 +10,7 @@ import { ResourceService, VariableService } from '../gen';
 import { oauthStore, workspaceStore } from '../stores';
 import Password from './Password.svelte';
 import { createEventDispatcher } from 'svelte';
+import HighlightTheme from './HighlightTheme.svelte';
 let drawer;
 let token = undefined;
 export async function open() {
@@ -81,6 +82,8 @@ async function save() {
 }
 </script>
 
+<HighlightTheme />
+
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent title="Add a Supabase Database" on:close={drawer.closeDrawer}>
 		{#if step === 'init' || selectedDatabase == undefined}

package/package/components/apps/editor/AppExportButton.svelte

@@ -9,6 +9,7 @@ import { yaml } from 'svelte-highlight/languages';
 import YAML from 'yaml';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
+import HighlightTheme from '../../HighlightTheme.svelte';
 let jsonViewerDrawer;
 let app = undefined;
 let rawType = 'yaml';
@@ -18,6 +19,8 @@ export function open(app_l) {
 }
 </script>
 
+<HighlightTheme />
+
 <Drawer bind:this={jsonViewerDrawer} size="800px">
 	<DrawerContent title="App Export" on:close={() => jsonViewerDrawer.toggleDrawer()}>
 		<div>

package/package/components/apps/editor/componentsPanel/ThemeDrawer.svelte

@@ -3,6 +3,7 @@ import { Highlight } from 'svelte-highlight';
 import css from 'svelte-highlight/languages/css';
 import { resolveTheme } from './themeUtils';
 import { workspaceStore } from '../../../../stores';
+import HighlightTheme from '../../../HighlightTheme.svelte';
 export let theme;
 let code = undefined;
 let codeDrawer;
@@ -12,6 +13,8 @@ export async function openDrawer() {
 }
 </script>
 
+<HighlightTheme />
+
 <Drawer bind:this={codeDrawer}>
 	<DrawerContent title="Theme viewer" on:close={codeDrawer.closeDrawer}>
 		<div class="p-2 border rounded-sm">

package/package/components/apps/editor/settingsPanel/CSSMigrationModal.svelte

@@ -10,6 +10,7 @@ import { MoveRight } from 'lucide-svelte';
 import { customisationByComponent } from '../componentsPanel/cssUtils';
 import { sendUserToast } from '../../../../toast';
 import CloseButton from '../../../common/CloseButton.svelte';
+import HighlightTheme from '../../../HighlightTheme.svelte';
 export let component;
 const { app } = getContext('AppViewerContext');
 function fadeFast(node) {
@@ -94,6 +95,8 @@ function hasStyles(customCss) {
 let type = component?.type;
 </script>
 
+<HighlightTheme />
+
 {#if migrationModalOpen}
 	<div
 		transition:fadeFast|local

package/package/components/apps/editor/settingsPanel/ComponentControl.svelte

@@ -4,11 +4,14 @@ import { getComponentControl } from '../componentsPanel/componentControlUtils';
 import { Highlight } from 'svelte-highlight';
 import typescript from 'svelte-highlight/languages/typescript';
 import { Button } from '../../../common';
+import HighlightTheme from '../../../HighlightTheme.svelte';
 export let type;
 const componentControls = getComponentControl(type);
 let collapsed = true;
 </script>
 
+<HighlightTheme />
+
 {#if componentControls?.length > 0}
 	<PanelSection title="Controls">
 		<div slot="action" class="flex justify-end flex-wrap gap-1">

package/package/components/details/DetailPageDetailPanel.svelte

@@ -6,6 +6,7 @@ import { yaml } from 'svelte-highlight/languages';
 import json from 'svelte-highlight/languages/json';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import YAML from 'yaml';
+import HighlightTheme from '../HighlightTheme.svelte';
 export let triggerSelected = 'webhooks';
 export let flow_json = undefined;
 export let hasStepDetails = false;
@@ -19,6 +20,8 @@ $: if (hasStepDetails) {
 $: !hasStepDetails && selected === 'flow_step' && (selected = 'saved_inputs');
 </script>
 
+<HighlightTheme />
+
 <Splitpanes horizontal class="h-full">
 	<Pane size={100}>
 		<Tabs bind:selected>

package/package/components/details/WebhooksPanel.svelte

@@ -12,6 +12,7 @@ import { Highlight } from 'svelte-highlight';
 import { typescript } from 'svelte-highlight/languages';
 import ClipboardPanel from './ClipboardPanel.svelte';
 import { copyToClipboard, generateRandomString } from '../../utils';
+import HighlightTheme from '../HighlightTheme.svelte';
 let userSettings;
 export let webhooks;
 export let token;
@@ -138,6 +139,8 @@ done`}`;
 }
 </script>
 
+<HighlightTheme />
+
 <UserSettings
 	bind:this={userSettings}
 	on:tokenCreated={(e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.352.6",
+	"version": "1.352.7",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -204,6 +204,11 @@
 			"svelte": "./package/components/common/tabs/Tab.svelte",
 			"default": "./package/components/common/tabs/Tab.svelte"
 		},
+		"./components/common/tabs/AppTheme.svelte": {
+			"types": "./package/components/AppTheme.svelte.d.ts",
+			"svelte": "./package/components/AppTheme.svelte",
+			"default": "./package/components/AppTheme.svelte"
+		},
 		"./components/common/alert/Alert.svelte": {
 			"types": "./package/components/common/alert/Alert.svelte.d.ts",
 			"svelte": "./package/components/common/alert/Alert.svelte",
@@ -394,6 +399,9 @@
 			"components/SchemaEditor.svelte": [
 				"./package/components/SchemaEditor.svelte.d.ts"
 			],
+			"components/AppTheme.svelte": [
+				"./package/components/AppTheme.svelte.d.ts"
+			],
 			"components/EditableSchemaWrapper.svelte": [
 				"./package/components/schema/EditableSchemaWrapper.svelte.d.ts"
 			],

package/package/components/ChartHighlightTheme.svelte

@@ -1,65 +0,0 @@
-<script>import { onMount } from 'svelte';
-import DarkModeObserver from './DarkModeObserver.svelte';
-import github from 'svelte-highlight/styles/github';
-import nord from 'svelte-highlight/styles/nord';
-import { each } from 'chart.js/helpers';
-import { Chart } from 'chart.js';
-let darkMode = false;
-function onThemeChange() {
-    if (document.documentElement.classList.contains('dark')) {
-        darkMode = true;
-        each(Chart.instances, (instance) => {
-            if (instance.options.scales?.y?.ticks?.color !== undefined) {
-                instance.options.scales.y.ticks.color = '#e0e7ed';
-            }
-            if (instance.options.scales?.y?.grid?.color !== undefined) {
-                instance.options.scales.y.grid.color = '#4a5568';
-            }
-            if (instance.options.scales?.x?.ticks?.color !== undefined) {
-                instance.options.scales.x.ticks.color = '#e0e7ed';
-            }
-            if (instance.options.scales?.x?.grid?.color !== undefined) {
-                instance.options.scales.x.grid.color = '#4a5568';
-            }
-            if (instance.options.plugins?.legend?.labels?.color !== undefined) {
-                instance.options.plugins.legend.labels.color = '#e0e7ed';
-            }
-            instance.update();
-        });
-    }
-    else {
-        darkMode = false;
-        each(Chart.instances, (instance) => {
-            if (instance.options.scales?.y?.ticks?.color !== undefined) {
-                instance.options.scales.y.ticks.color = '#4a5568';
-            }
-            if (instance.options.scales?.y?.grid?.color !== undefined) {
-                instance.options.scales.y.grid.color = '#e0e7ed';
-            }
-            if (instance.options.scales?.x?.ticks?.color !== undefined) {
-                instance.options.scales.x.ticks.color = '#4a5568';
-            }
-            if (instance.options.scales?.x?.grid?.color !== undefined) {
-                instance.options.scales.x.grid.color = '#e0e7ed';
-            }
-            if (instance.options.plugins?.legend?.labels?.color !== undefined) {
-                instance.options.plugins.legend.labels.color = '#4a5568';
-            }
-            instance.update();
-        });
-    }
-}
-onMount(() => {
-    onThemeChange();
-});
-</script>
-
-<DarkModeObserver on:change={onThemeChange} />
-
-<svelte:head>
-	{#if darkMode}
-		{@html nord}
-	{:else}
-		{@html github}
-	{/if}
-</svelte:head>

package/package/components/ChartHighlightTheme.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ChartHighlightThemeProps = typeof __propDef.props;
-export type ChartHighlightThemeEvents = typeof __propDef.events;
-export type ChartHighlightThemeSlots = typeof __propDef.slots;
-export default class ChartHighlightTheme extends SvelteComponent<ChartHighlightThemeProps, ChartHighlightThemeEvents, ChartHighlightThemeSlots> {
-}
-export {};