theme could be in plugin

packages/web/src/Screen.svelte

@@ -26,6 +26,12 @@
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 </script>
 
+<svelte:head>
+  {#if $currentThemeDefinition?.themeCss}
+  {@html `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`}
+  {/if}
+</svelte:head>
+
 <div
   class={`${$currentTheme} ${currentThemeType} root dbgate-screen`}
   use:dragDropFileTarget

packages/web/src/commands/stdCommands.ts

@@ -30,7 +30,7 @@ import runCommand from './runCommand';
 function themeCommand(theme: ThemeDefinition) {
   return {
     text: theme.themeName,
-    onClick: () => currentTheme.set(theme.className),
+    onClick: () => currentTheme.set(theme.themeClassName),
     // onPreview: () => {
     //   const old = get(currentTheme);
     //   currentTheme.set(css);

packages/web/src/designer/Designer.svelte

@@ -695,13 +695,17 @@
       if (css) css += '\n';
       css += cssItem;
     }
+    if ($currentThemeDefinition?.themeCss) {
+      if (css) css += '\n';
+      css += $currentThemeDefinition?.themeCss;
+    }
     saveFileToDisk(async filePath => {
       await apiCall('files/export-diagram', {
         filePath,
         html: domCanvas.outerHTML,
         css,
         themeType: $currentThemeDefinition?.themeType,
-        themeClassName: $currentThemeDefinition?.className,
+        themeClassName: $currentThemeDefinition?.themeClassName,
       });
     });
   }

packages/web/src/plugins/ThemeDark.svelte

@@ -1,5 +1,5 @@
 <script context="module">
-  export const className = 'theme-dark';
+  export const themeClassName = 'theme-dark';
   export const themeName = 'Dark';
   export const themeType = 'dark';
 </script>

packages/web/src/plugins/ThemeLight.svelte

@@ -1,5 +1,5 @@
 <script context="module">
-  export const className = 'theme-light';
+  export const themeClassName = 'theme-light';
   export const themeName = 'Light';
   export const themeType = 'light';
 </script>

packages/web/src/stores.ts

@@ -73,7 +73,7 @@ export const loadingPluginStore = writable({
 });
 
 export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) =>
-  $extensions.themes.find(x => x.className == $currentTheme)
+  $extensions.themes.find(x => x.themeClassName == $currentTheme)
 );
 
 subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');