From e531fe8d0b782587b8cb0999c30e92d9313dc4b3 Mon Sep 17 00:00:00 2001
From: Jeremy Valentine <38669521+valentine195@users.noreply.github.com>
Date: Fri, 22 Mar 2024 22:41:34 -0400
Subject: [PATCH] fix: Adds Theme toggles to Previewer in Layout Editor

---
 .../layout/previewer/Previewer.svelte         | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/settings/layout/previewer/Previewer.svelte b/src/settings/layout/previewer/Previewer.svelte
index be5bb8f0..ef5784c1 100644
--- a/src/settings/layout/previewer/Previewer.svelte
+++ b/src/settings/layout/previewer/Previewer.svelte
@@ -9,9 +9,11 @@
     } from "obsidian";
     import { MonsterSuggestionModal } from "src/util/creature";
     import type { Monster } from "index";
-    import { buildTextArea } from "src/util";
+    import { buildTextArea, setNodeIcon } from "src/util";
     import type { EditorView } from "@codemirror/view";
     import StatBlockRenderer from "src/view/statblock";
+    import { writable } from "svelte/store";
+    import { ThemeMode } from "src/layouts/layout.css";
 
     export let previewed: string;
 
@@ -83,13 +85,25 @@
             }, 500)
         );
     };
+    const mode = writable<ThemeMode>(ThemeMode.None);
+    const setMode = (current: ThemeMode) => {
+        if ($mode == current) {
+            $mode = ThemeMode.None;
+        } else {
+            $mode = current;
+        }
+    };
 
     onDestroy(() => {
         if (editor) editor.destroy();
     });
 </script>
 
-<div class="previewer">
+<div
+    class="previewer"
+    class:theme-light={$mode === ThemeMode.Light}
+    class:theme-dark={$mode === ThemeMode.Dark}
+>
     <div>
         Select a creature to preview the layout, or enter your own definition
         below.
@@ -98,7 +112,25 @@
     <div class="preview">
         <div class="preview-container inner" bind:this={previewContainer} />
     </div>
-
+    <div class="setting-item">
+        <div class="setting-item-info">
+            <div class="setting-item-name">Set theme mode</div>
+        </div>
+        <div class="setting-item-control">
+            <button
+                use:setNodeIcon={"sun"}
+                aria-label="Light"
+                class:mod-cta={$mode == ThemeMode.Light}
+                on:click={() => setMode(ThemeMode.Light)}
+            ></button>
+            <button
+                use:setNodeIcon={"moon"}
+                aria-label="Dark"
+                class:mod-cta={$mode == ThemeMode.Dark}
+                on:click={() => setMode(ThemeMode.Dark)}
+            ></button>
+        </div>
+    </div>
     <div class="definition">
         <div use:search />
         <div class="yaml-editor" use:yaml />