diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
index 8e29e364..861ef544 100644
--- a/src/lib/util/state.ts
+++ b/src/lib/util/state.ts
@@ -103,11 +103,11 @@ export const updateConfig = (config: string, updateEditor: boolean): void => {
 	});
 };
 
-export const toggleDarkTheme = (dark: boolean, theme: string): void => {
+export const setDiagramTheme = (theme: 'dark' | 'default' | 'forest'): void => {
 	codeStore.update((state) => {
 		const config = JSON.parse(state.mermaid);
 		if (!config.theme || ['dark', 'default', 'forest'].includes(config.theme)) {
-			config.theme = dark ? (theme === 'forest' ? 'forest' : 'dark') : 'default';
+			config.theme = theme;
 		}
 
 		return { ...state, mermaid: JSON.stringify(config, null, 2), updateEditor: true };
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 7daccfdc..97e73f53 100644
--- a/src/routes/__layout.svelte
+++ b/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, theme);
+				setDiagramTheme(isDark ? (theme === 'forest' ? 'forest' : 'dark') : 'default');
 			}
 		});
 	});