Add ability to toggle dark/light theme

src/App.vue

@@ -47,6 +47,7 @@
         :language="language" 
         :languageAuto="languageAuto"
         :theme="theme"
+        @toggleTheme="theme = theme === 'dark' ? 'light' : 'dark'"
         class="status" 
     />
 </template>

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>
 

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>

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),
+        })
+    }
 }