feat: daisyUI

src/app.postcss

@@ -1,18 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-/* 
-.nav-btn {
-	@apply lg:p-2 py-3 px-0 block border-b-2 border-transparent hover:border-white;
-}
-
-.btn {
-	@apply bg-indigo-500 hover:bg-indigo-700 rounded px-4 shadow;
-}
-.action-btn {
-	@apply rounded p-2 bg-indigo-400 shadow flex-auto text-white hover:bg-indigo-500;
-}
 
 .input {
-	@apply flex-1 border-indigo-400 border-solid border-2 rounded;
-} */
+	@apply flex-1 border-primary border-solid border-2 rounded;
+}
+.action-btn {
+	@apply btn btn-primary;
+}

src/lib/components/actions.svelte

@@ -179,7 +179,9 @@
 		<div class="w-full flex gap-2 items-center">
 			<input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
 			<label for="markdown">
-				<button class="btn text-white flex-auto" on:click={onCopyMarkdown}> Copy Markdown </button>
+				<button class="btn btn-primary btn-sm flex-auto" on:click={onCopyMarkdown}>
+					Copy Markdown
+				</button>
 			</label>
 		</div>
 
@@ -191,7 +193,7 @@
 				bind:value={gistURL}
 				placeholder="Enter Gist URL" />
 			<label for="gist">
-				<button class="btn text-white flex-auto" on:click={loadGist}> Load Gist </button>
+				<button class="btn btn-primary btn-sm  flex-auto" on:click={loadGist}> Load Gist </button>
 			</label>
 		</div>
 	</div>

src/lib/components/card/card.svelte

@@ -10,7 +10,9 @@
 </script>
 
 <div class="card rounded overflow-hidden m-2 flex-grow flex flex-col shadow-2xl">
-	<div class="bg-primary p-2 pb-0 flex-none" on:click={() => (isOpen = !isOpen)}>
+	<div
+		class="bg-primary p-2 {tabs.length > 0 ? 'pb-0' : ''} flex-none"
+		on:click={() => (isOpen = !isOpen)}>
 		<div class="flex justify-between">
 			<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} />
 			<div class="flex gap-x-4 items-center">

src/lib/components/editor/editor.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { EditorEvents } from '$lib/types';
 	import { codeStore } from '$lib/util/state';
+	import { themeStore } from '$lib/util/theme';
 	import type monaco from 'monaco-editor';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { initEditor } from './util';
@@ -34,6 +35,10 @@
 		editor && Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers);
 	}
 
+	themeStore.subscribe(({ isDark }) => {
+		editor && Monaco?.editor.setTheme(isDark ? 'vs-dark' : 'vs');
+	});
+
 	const dispatch = createEventDispatcher<EditorEvents>();
 	const loadMonaco = async () => {
 		let i = 0;
@@ -63,7 +68,7 @@
 				text
 			});
 		});
-
+		Monaco?.editor.setTheme($themeStore.isDark ? 'vs-dark' : 'vs');
 		const resizeObserver = new ResizeObserver((entries) => {
 			editor.layout({
 				height: entries[0].contentRect.height,

src/lib/components/preset.svelte

@@ -108,7 +108,8 @@ merge newbranch
 <Card title="Sample Diagrams" isOpen={false}>
 	<div class="flex gap-2 flex-wrap p-2">
 		{#each Object.keys(samples) as sample}
-			<button class="action-btn" on:click={() => loadSampleDiagram(sample)}>{sample}</button>
+			<button class="btn btn-primary btn-sm" on:click={() => loadSampleDiagram(sample)}
+				>{sample}</button>
 		{/each}
 	</div>
 </Card>

src/lib/components/theme.svelte

@@ -1,5 +1,8 @@
 <script>
-	import { themeStore } from '$lib/util/state';
+	import { toggleDarkTheme } from '$lib/util/state';
+
+	import { setTheme, themeStore } from '$lib/util/theme';
+	import { onMount } from 'svelte';
 
 	const themes = [
 		'light',
@@ -24,9 +27,20 @@
 		'luxury',
 		'dracula'
 	];
+
+	let selectedTheme = $themeStore.theme;
+	onMount(() => {
+		themeStore.subscribe(({ theme, isDark }) => {
+			document.getElementsByTagName('html')[0].setAttribute('data-theme', theme);
+			toggleDarkTheme(isDark);
+		});
+	});
 </script>
 
-<select class="select select-bordered w-full max-w-xs" bind:value={$themeStore}>
+<select
+	class="select select-bordered w-full max-w-xs"
+	bind:value={selectedTheme}
+	on:change={() => setTheme(selectedTheme)}>
 	{#each themes as theme}
 		<option value={theme}>{theme}</option>
 	{/each}

src/lib/util/state.ts

@@ -24,7 +24,6 @@ export const defaultState: State = {
 	updateDiagram: true
 };
 
-export const themeStore = persist(writable(''), localStorage(), 'themeStore');
 export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore');
 export const base64State = derived([codeStore], ([code], set) => {
 	set(toBase64(JSON.stringify(code), true));
@@ -93,6 +92,17 @@ export const updateConfig = (config: string, updateEditor: boolean): void => {
 	});
 };
 
+export const toggleDarkTheme = (dark: boolean): void => {
+	codeStore.update((state) => {
+		const config = JSON.parse(state.mermaid);
+		if (!config.theme || ['dark', 'default'].includes(config.theme)) {
+			config.theme = dark ? 'dark' : 'default';
+		}
+
+		return { ...state, mermaid: JSON.stringify(config), updateEditor: true };
+	});
+};
+
 export const initURLSubscription = (): void => {
 	base64State.subscribe((state: string) => {
 		history.replaceState(undefined, undefined, `#${state}`);

src/lib/util/theme.ts

@@ -0,0 +1,20 @@
+import { writable } from 'svelte/store';
+import { persist, localStorage } from '@macfja/svelte-persistent-store';
+import { toggleDarkTheme } from './state';
+
+export const themeStore = persist(
+	writable({
+		isDark: false,
+		theme: 'light'
+	}),
+	localStorage(),
+	'themeStore'
+);
+
+const darkThemes = ['dark', 'synthwave', 'halloween', 'forest', 'luxury', 'black', 'dracula'];
+
+export const setTheme = (theme: string): void => {
+	const isDark = darkThemes.includes(theme);
+	console.log('Setting theme', theme);
+	themeStore.set({ theme, isDark });
+};

src/routes/__layout.svelte

@@ -3,7 +3,7 @@
 	import { base } from '$app/paths';
 	import { onMount } from 'svelte';
 	import { loadingStateStore } from '$lib/util/loading';
-	import { themeStore } from '$lib/util/state';
+	import { themeStore } from '$lib/util/theme';
 	import Theme from '$lib/components/theme.svelte';
 
 	// This can be removed once https://github.com/sveltejs/kit/issues/1612 is fixed.

src/routes/edit.svelte

@@ -159,7 +159,7 @@
 			<Card title="Diagram" isCloseable={false}>
 				<button
 					slot="actions"
-					class="btn btn-primary btn-xs"
+					class="btn btn-primary btn-xs shadow-lg"
 					title="View diagram in new page"
 					on:click|stopPropagation={() => viewDiagram()}><i class="far fa-eye" /> View</button>
 
@@ -167,7 +167,7 @@
 					<View />
 				</div>
 			</Card>
-			<div class="md:hidden bg-white rounded shadow p-2 mx-2">
+			<div class="md:hidden rounded shadow p-2 mx-2">
 				Code editing not supported on mobile. Please use a desktop browser.
 			</div>
 		</div>

tailwind.config.cjs

@@ -1,8 +1,5 @@
-const { tailwindExtractor } = require('tailwindcss/lib/lib/purgeUnusedStyles');
-
 module.exports = {
 	mode: 'jit',
-	darkMode: 'media',
 	plugins: [require('daisyui')],
 	purge: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {