Merge branch 'develop' of github.com:mermaid-js/mermaid-live-editor into feature/forestDiagram

Co-authored-by: Sidharth Vinod <github@sidharth.dev>

src/lib/util/state.ts

@@ -103,11 +103,11 @@ export const updateConfig = (config: string, updateEditor: boolean): void => {
 	});
 };
 
-export const toggleDarkTheme = (dark: boolean): void => {
+export const setDiagramTheme = (theme: 'dark' | 'default' | 'forest'): void => {
 	codeStore.update((state) => {
 		const config = JSON.parse(state.mermaid);
-		if (!config.theme || ['dark', 'default'].includes(config.theme)) {
+		if (!config.theme || ['dark', 'default', 'forest'].includes(config.theme)) {
-			config.theme = dark ? 'dark' : 'default';
+			config.theme = theme;
 		}
 
 		return { ...state, mermaid: JSON.stringify(config, null, 2), updateEditor: true };

src/routes/__layout.svelte

@@ -4,7 +4,7 @@
 	import { onMount } from 'svelte';
 	import { loadingStateStore } from '$lib/util/loading';
 	import { setTheme, themeStore } from '$lib/util/theme';
-	import { toggleDarkTheme } from '$lib/util/state';
+	import { setDiagramTheme } from '$lib/util/state';
 
 	// This can be removed once https://github.com/sveltejs/kit/issues/1612 is fixed.
 	// Then move it into src and vite will bundle it automatically.
@@ -31,7 +31,7 @@
 		themeStore.subscribe(({ theme, isDark }) => {
 			if (theme) {
 				document.getElementsByTagName('html')[0].setAttribute('data-theme', theme);
-				toggleDarkTheme(isDark);
+				setDiagramTheme(isDark ? (theme === 'forest' ? 'forest' : 'dark') : 'default');
 			}
 		});
 	});