diff --git a/packages/types/extensions.d.ts b/packages/types/extensions.d.ts
index fca442fe9..a60dcff7b 100644
--- a/packages/types/extensions.d.ts
+++ b/packages/types/extensions.d.ts
@@ -22,9 +22,10 @@ export interface FileFormatDefinition {
 }
 
 export interface ThemeDefinition {
-  className: string;
+  themeClassName: string;
   themeName: string;
   themeType: 'light' | 'dark';
+  themeCss?: string;
 }
 
 export interface PluginDefinition {
diff --git a/packages/web/src/Screen.svelte b/packages/web/src/Screen.svelte
index 8d2e919de..a05fbbd8c 100644
--- a/packages/web/src/Screen.svelte
+++ b/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
diff --git a/packages/web/src/commands/stdCommands.ts b/packages/web/src/commands/stdCommands.ts
index 85b79c5c8..e855e3b43 100644
--- a/packages/web/src/commands/stdCommands.ts
+++ b/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);
diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte
index 6b7acbdb7..f7f13ff44 100644
--- a/packages/web/src/designer/Designer.svelte
+++ b/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,
       });
     });
   }
diff --git a/packages/web/src/plugins/ThemeDark.svelte b/packages/web/src/plugins/ThemeDark.svelte
index f0a543a47..2011d945f 100644
--- a/packages/web/src/plugins/ThemeDark.svelte
+++ b/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>
diff --git a/packages/web/src/plugins/ThemeLight.svelte b/packages/web/src/plugins/ThemeLight.svelte
index 1956d393b..fbc44e3be 100644
--- a/packages/web/src/plugins/ThemeLight.svelte
+++ b/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>
diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts
index 0266b9b89..8bc5649fe 100644
--- a/packages/web/src/stores.ts
+++ b/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');