From c18574c605c809f37d8a0d53ddc30dc1d122906a Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Sat, 16 Apr 2022 18:24:18 -0700 Subject: [PATCH 1/2] feat: use forest theme in diagram --- src/lib/util/state.ts | 6 +++--- src/routes/__layout.svelte | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index 73157a543c..8e29e364f6 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): void => { +export const toggleDarkTheme = (dark: boolean, theme: string): void => { codeStore.update((state) => { const config = JSON.parse(state.mermaid); - if (!config.theme || ['dark', 'default'].includes(config.theme)) { - config.theme = dark ? 'dark' : 'default'; + if (!config.theme || ['dark', 'default', 'forest'].includes(config.theme)) { + config.theme = dark ? (theme === 'forest' ? 'forest' : 'dark') : 'default'; } return { ...state, mermaid: JSON.stringify(config, null, 2), updateEditor: true }; diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 8b6dd0cbfe..7daccfdcd9 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -31,7 +31,7 @@ themeStore.subscribe(({ theme, isDark }) => { if (theme) { document.getElementsByTagName('html')[0].setAttribute('data-theme', theme); - toggleDarkTheme(isDark); + toggleDarkTheme(isDark, theme); } }); }); From 59679abec5062d57d13e78867c66ed1a02a89ff4 Mon Sep 17 00:00:00 2001 From: Yash-Singh1 Date: Fri, 22 Apr 2022 10:29:24 -0700 Subject: [PATCH 2/2] chore: simplify logic for theme -> diagram theme Co-authored-by: Sidharth Vinod --- src/lib/util/state.ts | 4 ++-- src/routes/__layout.svelte | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index 8e29e364f6..861ef54427 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 7daccfdcd9..97e73f53c8 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'); } }); });