diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte index 7f72f1e2..2cd7a9f2 100644 --- a/src/lib/components/actions.svelte +++ b/src/lib/components/actions.svelte @@ -147,39 +147,51 @@
{#if isClipboardAvailable()} {/if}
PNG size - - - - - - + + + + + + {#if imagemodeselected !== 'auto'} - + {/if}
@@ -193,7 +205,7 @@ bind:value={gistURL} placeholder="Enter Gist URL" />
diff --git a/src/lib/components/card/card.svelte b/src/lib/components/card/card.svelte index e9fc6e1d..90b93e8a 100644 --- a/src/lib/components/card/card.svelte +++ b/src/lib/components/card/card.svelte @@ -7,21 +7,22 @@ export let tabs: Tab[] = []; export let title: string; $: isOpen = isCloseable ? isOpen : true; + $: isTabsShown = isOpen && tabs.length > 0;
(isOpen = !isOpen)}>
-
+
{#if isOpen} -
+
{/if} diff --git a/src/lib/components/card/tabs.svelte b/src/lib/components/card/tabs.svelte index 7300395a..18382abd 100644 --- a/src/lib/components/card/tabs.svelte +++ b/src/lib/components/card/tabs.svelte @@ -26,7 +26,7 @@
    {#each tabs as tab}
    toggleTabs(tab)}> {tab.title} diff --git a/src/lib/components/history/history.svelte b/src/lib/components/history/history.svelte index dcfa787a..b0111b1b 100644 --- a/src/lib/components/history/history.svelte +++ b/src/lib/components/history/history.svelte @@ -90,13 +90,13 @@
    {#if $historyModeStore !== 'loader'} {/if} @@ -107,7 +107,7 @@
  • -
    +
    {#if url} - import { toggleDarkTheme } from '$lib/util/state'; - import { setTheme, themeStore } from '$lib/util/theme'; - import { onMount } from 'svelte'; const themes = [ - 'light', - 'dark', - 'cupcake', - 'bumblebee', - 'emerald', - 'corporate', - 'synthwave', - 'retro', - 'cyberpunk', - 'valentine', - 'halloween', - 'garden', - 'forest', - 'aqua', - 'lofi', - 'pastel', - 'fantasy', - 'wireframe', - 'black', - 'luxury', - 'dracula' + '🌝  light', + '🌚  dark', + '🧁  cupcake', + '🐝  bumblebee', + '✳️  emerald', + '🏢  corporate', + '🌃  synthwave', + '👴  retro', + '🤖  cyberpunk', + '🌸  valentine', + '🎃  halloween', + '🌷  garden', + '🌲  forest', + '🐟  aqua', + '👓  lofi', + '🖍  pastel', + '🧚‍♀️  fantasy', + '📝  wireframe', + '🏴  black', + '💎  luxury', + '🧛‍♂️  dracula' ]; - - let selectedTheme = $themeStore.theme; - onMount(() => { - themeStore.subscribe(({ theme, isDark }) => { - document.getElementsByTagName('html')[0].setAttribute('data-theme', theme); - toggleDarkTheme(isDark); - }); - }); - + diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index f2143b16..ee372ed2 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -99,7 +99,7 @@ export const toggleDarkTheme = (dark: boolean): void => { config.theme = dark ? 'dark' : 'default'; } - return { ...state, mermaid: JSON.stringify(config), updateEditor: true }; + return { ...state, mermaid: JSON.stringify(config, null, 2), updateEditor: true }; }); }; diff --git a/src/lib/util/theme.ts b/src/lib/util/theme.ts index f8f3c389..91e955ef 100644 --- a/src/lib/util/theme.ts +++ b/src/lib/util/theme.ts @@ -1,11 +1,10 @@ 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' + theme: '' }), localStorage(), 'themeStore' @@ -14,6 +13,9 @@ export const themeStore = persist( const darkThemes = ['dark', 'synthwave', 'halloween', 'forest', 'luxury', 'black', 'dracula']; export const setTheme = (theme: string): void => { + if (theme.includes(' ')) { + theme = theme.split(' ')[1].trim(); + } const isDark = darkThemes.includes(theme); console.log('Setting theme', theme); themeStore.set({ theme, isDark }); diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 751aa785..9360b60a 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -3,7 +3,8 @@ import { base } from '$app/paths'; import { onMount } from 'svelte'; import { loadingStateStore } from '$lib/util/loading'; - import { themeStore } from '$lib/util/theme'; + import { setTheme, themeStore } from '$lib/util/theme'; + import { toggleDarkTheme } 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. @@ -20,10 +21,23 @@ console.log('Service worker registration failed, error:', error); }); } + + const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; + + if (isDarkMode && $themeStore.theme === '') { + setTheme('dark'); + } + + themeStore.subscribe(({ theme, isDark }) => { + if (theme) { + document.getElementsByTagName('html')[0].setAttribute('data-theme', theme); + toggleDarkTheme(isDark); + } + }); }); -
    +
    diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte index f56d5217..b7f26bfc 100644 --- a/src/routes/edit.svelte +++ b/src/routes/edit.svelte @@ -126,22 +126,25 @@