diff --git a/src/lib/components/editor/editor.svelte b/src/lib/components/editor/editor.svelte
index f24c44f4..949ad654 100644
--- a/src/lib/components/editor/editor.svelte
+++ b/src/lib/components/editor/editor.svelte
@@ -18,7 +18,7 @@
 		minimap: {
 			enabled: false
 		},
-		theme: 'mermaidTheme',
+		theme: 'mermaid',
 		overviewRulerLanes: 0
 	};
 	export let errorMarkers: monaco.editor.IMarkerData[] = [];
@@ -35,7 +35,7 @@
 	}
 
 	themeStore.subscribe(({ isDark }) => {
-		editor && Monaco?.editor.setTheme(isDark ? 'mermaidTheme-dark' : 'mermaidTheme');
+		editor && Monaco?.editor.setTheme(isDark ? 'mermaid-dark' : 'mermaid');
 	});
 
 	const dispatch = createEventDispatcher<EditorEvents>();
@@ -67,7 +67,7 @@
 				text
 			});
 		});
-		Monaco?.editor.setTheme($themeStore.isDark ? 'mermaidTheme-dark' : 'mermaidTheme');
+		Monaco?.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');
 		const resizeObserver = new ResizeObserver((entries) => {
 			editor.layout({
 				height: entries[0].contentRect.height,
diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts
index 5bcb1f60..4d872656 100644
--- a/src/lib/components/editor/util.ts
+++ b/src/lib/components/editor/util.ts
@@ -365,7 +365,7 @@ export const initEditor = (monacoEditor): void => {
 		}
 	});
 
-	monacoEditor.editor.defineTheme('mermaidTheme-dark', {
+	monacoEditor.editor.defineTheme('mermaid-dark', {
 		base: 'vs-dark',
 		inherit: true,
 		rules: [
@@ -374,7 +374,7 @@ export const initEditor = (monacoEditor): void => {
 		]
 	});
 
-	monacoEditor.editor.defineTheme('mermaidTheme', {
+	monacoEditor.editor.defineTheme('mermaid', {
 		base: 'vs',
 		inherit: true,
 		rules: [