diff --git a/demos/playground/src/RichTextComposer.svelte b/demos/playground/src/RichTextComposer.svelte
index 1f0eedc0..e37702d3 100644
--- a/demos/playground/src/RichTextComposer.svelte
+++ b/demos/playground/src/RichTextComposer.svelte
@@ -46,7 +46,7 @@
   } from 'svelte-lexical';
   import {prepopulatedRichText} from './prepopulatedRichText';
   import type {SettingsStore} from './settings/setttingsStore';
-  import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
+  import {editorTheme as PlaygroundEditorTheme} from 'svelte-lexical';
   import ToolbarPlayground from './ToolbarPlayground.svelte';
   import {createWebsocketProvider} from './collaboration';
 
diff --git a/packages/svelte-lexical/src/lib/index.ts b/packages/svelte-lexical/src/lib/index.ts
index 33da11f3..bf5a9bf6 100644
--- a/packages/svelte-lexical/src/lib/index.ts
+++ b/packages/svelte-lexical/src/lib/index.ts
@@ -139,3 +139,6 @@ export {
 } from './core/nodeSelectionStore.js';
 
 export {$getSelection} from 'lexical';
+
+// theme
+export {default as editorTheme} from './themes/PlaygroundEditorTheme.js';
diff --git a/demos/playground/src/themes/CommentEditorTheme.css b/packages/svelte-lexical/src/lib/themes/CommentEditorTheme.css
similarity index 100%
rename from demos/playground/src/themes/CommentEditorTheme.css
rename to packages/svelte-lexical/src/lib/themes/CommentEditorTheme.css
diff --git a/demos/playground/src/themes/CommentEditorTheme.ts b/packages/svelte-lexical/src/lib/themes/CommentEditorTheme.ts
similarity index 88%
rename from demos/playground/src/themes/CommentEditorTheme.ts
rename to packages/svelte-lexical/src/lib/themes/CommentEditorTheme.ts
index eefce8fe..6ef1dbd1 100644
--- a/demos/playground/src/themes/CommentEditorTheme.ts
+++ b/packages/svelte-lexical/src/lib/themes/CommentEditorTheme.ts
@@ -10,7 +10,7 @@ import type {EditorThemeClasses} from 'svelte-lexical';
 
 import './CommentEditorTheme.css';
 
-import baseTheme from './PlaygroundEditorTheme';
+import baseTheme from './PlaygroundEditorTheme.js';
 
 const theme: EditorThemeClasses = {
   ...baseTheme,
diff --git a/demos/playground/src/themes/PlaygroundEditorTheme.css b/packages/svelte-lexical/src/lib/themes/PlaygroundEditorTheme.css
similarity index 100%
rename from demos/playground/src/themes/PlaygroundEditorTheme.css
rename to packages/svelte-lexical/src/lib/themes/PlaygroundEditorTheme.css
diff --git a/demos/playground/src/themes/PlaygroundEditorTheme.ts b/packages/svelte-lexical/src/lib/themes/PlaygroundEditorTheme.ts
similarity index 100%
rename from demos/playground/src/themes/PlaygroundEditorTheme.ts
rename to packages/svelte-lexical/src/lib/themes/PlaygroundEditorTheme.ts
diff --git a/demos/playground/src/themes/StickyEditorTheme.css b/packages/svelte-lexical/src/lib/themes/StickyEditorTheme.css
similarity index 100%
rename from demos/playground/src/themes/StickyEditorTheme.css
rename to packages/svelte-lexical/src/lib/themes/StickyEditorTheme.css
diff --git a/demos/playground/src/themes/StickyEditorTheme.ts b/packages/svelte-lexical/src/lib/themes/StickyEditorTheme.ts
similarity index 88%
rename from demos/playground/src/themes/StickyEditorTheme.ts
rename to packages/svelte-lexical/src/lib/themes/StickyEditorTheme.ts
index 2ccb2053..546be3cf 100644
--- a/demos/playground/src/themes/StickyEditorTheme.ts
+++ b/packages/svelte-lexical/src/lib/themes/StickyEditorTheme.ts
@@ -10,7 +10,7 @@ import type {EditorThemeClasses} from 'svelte-lexical';
 
 import './StickyEditorTheme.css';
 
-import baseTheme from './PlaygroundEditorTheme';
+import baseTheme from './PlaygroundEditorTheme.js';
 
 const theme: EditorThemeClasses = {
   ...baseTheme,