From 7595d3fc866babdb84545ba5b47c50bae4277833 Mon Sep 17 00:00:00 2001
From: Jonatan Heyman <jonatan@heyman.info>
Date: Sun, 15 Jan 2023 02:37:12 +0100
Subject: [PATCH] Add ability to toggle dark/light theme

---
 src/App.vue                  |  1 +
 src/components/Editor.vue    |  8 +++++++-
 src/components/StatusBar.vue | 10 ++++++----
 src/editor/editor.js         | 11 +++++++++--
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a948d6a..2cc720b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,6 +47,7 @@
         :language="language" 
         :languageAuto="languageAuto"
         :theme="theme"
+        @toggleTheme="theme = theme === 'dark' ? 'light' : 'dark'"
         class="status" 
     />
 </template>
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 4965241..e55a0c1 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -17,13 +17,19 @@
                 })
             })
 
-            const editor = new HeynoteEditor({
+            this.editor = new HeynoteEditor({
                 element: this.$refs.editor,
                 //content: "\n∞∞∞text\n",
                 content: initialData,
                 theme: this.theme,
             })
         },
+
+        watch: {
+            theme(newTheme) {
+                this.editor.setTheme(newTheme)
+            },
+        },
     }
 </script>
 
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index cf93754..27df416 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -44,7 +44,8 @@
             Col <span class="num">{{ column }}</span>
         </div>
         <div class="spacer"></div>
-        <div class="status-block lang">
+        <div class="status-block theme clickable" @click="$emit('toggleTheme')">{{ theme }}</div>
+        <div class="status-block lang clickable">
             {{ languageName }} 
             <span v-if="languageAuto" class="auto">(auto)</span>
         </div>
@@ -82,15 +83,16 @@
         .status-block
             padding: 2px 12px
             cursor: default
+            &.clickable
+                cursor: pointer
+                &:hover
+                    background: rgba(255,255,255, 0.1)
             &.line-number
                 color: rgba(255, 255, 255, 0.7)
                 .num
                     color: rgba(255, 255, 255, 1.0)
             &.lang
-                cursor: pointer
                 .auto
                     color: rgba(255, 255, 255, 0.7)
-                &:hover
-                    background: rgba(255,255,255, 0.1)
 
 </style>
diff --git a/src/editor/editor.js b/src/editor/editor.js
index ed6c1c0..1e7e36f 100644
--- a/src/editor/editor.js
+++ b/src/editor/editor.js
@@ -14,16 +14,17 @@ import { languageDetection } from "./language-detection/autodetect.js"
 
 export class HeynoteEditor {
     constructor({element, content, focus=true, theme="light"}) {
+        this.theme = new Compartment
+
         this.state = EditorState.create({
             doc: content || "",
             extensions: [
                 heynoteKeymap,
 
                 //minimalSetup,
-                
                 customSetup, 
                 
-                theme === "dark" ? heynoteDark : heynoteLight,
+                this.theme.of("dark" ? heynoteDark : heynoteLight),
                 heynoteBase,
                 indentUnit.of("    "),
                 EditorView.scrollMargins.of(f => {
@@ -56,6 +57,12 @@ export class HeynoteEditor {
             this.view.focus()
         }
     }
+
+    setTheme(theme) {
+        this.view.dispatch({
+            effects: this.theme.reconfigure(theme === "dark" ? heynoteDark : heynoteLight),
+        })
+    }
 }