Set theme as a data property in App component

src/App.vue

@@ -18,6 +18,7 @@
                 column: 1,
                 language: "plaintext",
                 languageAuto: true,
+                theme: "dark",
             }
         },
 
@@ -37,6 +38,7 @@
 <template>
     <Editor 
         @cursorChange="onCursorChange"
+        :theme="theme"
         class="editor"
     />
     <StatusBar 
@@ -44,6 +46,7 @@
         :column="column" 
         :language="language" 
         :languageAuto="languageAuto"
+        :theme="theme"
         class="status" 
     />
 </template>

src/components/Editor.vue

@@ -4,6 +4,9 @@
     import initialData from "../editor/fixture.js"
 
     export default {
+        props: [
+            "theme",
+        ],
         mounted() {
             this.$refs.editor.addEventListener("selectionChange", (e) => {
                 //console.log("selectionChange:", e)
@@ -18,6 +21,7 @@
                 element: this.$refs.editor,
                 //content: "\n∞∞∞text\n",
                 content: initialData,
+                theme: this.theme,
             })
         },
     }

src/components/StatusBar.vue

@@ -18,6 +18,7 @@
             "column", 
             "language", 
             "languageAuto",
+            "theme",
         ],
 
         mounted() {
@@ -28,12 +29,16 @@
             languageName() {
                 return LANGUAGE_NAMES[this.language] || this.language
             },
+
+            className() {
+                return `status ${this.theme}`
+            },
         },
     }
 </script>
 
 <template>
-    <div class="status">
+    <div :class="className">
         <div class="status-block line-number">
             Ln <span class="num">{{ line }}</span>
             Col <span class="num">{{ column }}</span>

src/editor/editor.js

@@ -13,7 +13,7 @@ import { languageDetection } from "./language-detection/autodetect.js"
 
 
 export class HeynoteEditor {
-    constructor({element, content, focus=true}) {
+    constructor({element, content, focus=true, theme="light"}) {
         this.state = EditorState.create({
             doc: content || "",
             extensions: [
@@ -23,8 +23,7 @@ export class HeynoteEditor {
                 
                 customSetup, 
                 
-                //heynoteDark,
-                heynoteLight,
+                theme === "dark" ? heynoteDark : heynoteLight,
                 heynoteBase,
                 indentUnit.of("    "),
                 EditorView.scrollMargins.of(f => {