Style editor dynamically

web/package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@bjorn3/browser_wasi_shim": "^0.3.0",
     "@codemirror/commands": "^6.8.0",
+    "@codemirror/state": "^6.5.1",
     "@codemirror/view": "^6.36.2",
     "codemirror": "^6.0.1",
     "thememirror": "^2.0.1"

web/src/editorconf.js

@@ -0,0 +1,55 @@
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, lineNumbers } from "@codemirror/view";
+import { basicSetup } from "codemirror";
+import { boysAndGirls, tomorrow } from "thememirror";
+
+const themeConfig = new Compartment();
+
+function createEditorState(initialContents, myTheme) {
+  let extensions = [basicSetup, themeConfig.of(themeIdentifier(myTheme))];
+
+  return EditorState.create({
+    doc: initialContents,
+    extensions,
+  });
+}
+
+function themeIdentifier(myTheme) {
+  switch (myTheme) {
+    case "light":
+      return tomorrow;
+    case "dark":
+      return boysAndGirls;
+    default:
+      return tomorrow;
+  }
+}
+
+function changeEditorTheme(myEditor, myTheme) {
+  myEditor.dispatch({
+    effects: themeConfig.reconfigure(themeIdentifier(myTheme)),
+  });
+}
+
+function createEditorView(parent, initialDoc) {
+  const initState = createEditorState(initialDoc, "light");
+  const editorView = new EditorView({state: initState, parent: parent});
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", (event) => {
+      if (event.matches) {
+        changeEditorTheme(editorView, "dark"); // Switch to dark mode
+      } else {
+        changeEditorTheme(editorView, "light"); // Switch to light mode
+      }
+    });
+
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    changeEditorTheme(editorView, "dark");
+  } else {
+    changeEditorTheme(editorView, "light");
+  }
+  return editorView;
+}
+
+export { createEditorView };

web/src/index.js

@@ -8,34 +8,27 @@ import {
   ConsoleStdout,
   PreopenDirectory,
 } from "@bjorn3/browser_wasi_shim";
-import { basicSetup } from "codemirror";
-import { EditorView } from "@codemirror/view";
-import { boysAndGirls } from "thememirror";
+import { createEditorView } from "./editorconf.js";
 
 const loxFilename = "hello.lox";
 const originalLoxFileStr = `print "hello";`;
 const loxFile = new File(new TextEncoder("utf-8").encode(originalLoxFileStr));
 
 const buttonElement = document.getElementById("run-button");
 const editorContainer = document.getElementById("content");
-const rightBox = document.getElementById("right-box");
-rightBox.value = "";
-
-const editorView = new EditorView({
-  doc: originalLoxFileStr,
-  extensions: [basicSetup, boysAndGirls],
-  parent: editorContainer,
-});
+const outputBox = document.getElementById("output-box");
+outputBox.value = "";
 
+const editorView = createEditorView(editorContainer, originalLoxFileStr);
 const wasiArgs = ["xolsh-exe.wasm", "hello.lox"];
 const wasiEnv = [];
 
 const wasiStdout = ConsoleStdout.lineBuffered((msg) => {
-  rightBox.value += `[WASI stdout] ${msg}\n`;
+  outputBox.value += `[WASI stdout] ${msg}\n`;
   // console.log(`[WASI stdout] ${msg}`);
 });
 const wasiStderr = ConsoleStdout.lineBuffered((msg) => {
-  rightBox.value += `[WASI stderr] ${msg}\n`;
+  outputBox.value += `[WASI stderr] ${msg}\n`;
   // console.warn(`[WASI stderr] ${msg}`);
 });
 
@@ -66,13 +59,12 @@ const runWasi = async () => {
 };
 
 const encode = (str) => new TextEncoder().encode(str);
-const decode = (str) => new TextDecoder().decode(str);
 
 await runWasi();
 // Event listener for the button
 buttonElement.addEventListener("click", async () => {
   loxFile.data = encode(editorView.state.doc);
-  rightBox.value = "";
+  outputBox.value = "";
   await runWasi();
 });
 

web/static/index.html

@@ -31,7 +31,7 @@ <h2>xolsh - hslox</h2>
     </header>
     <div id="content">
       <textarea
-        id="right-box"
+        id="output-box"
         placeholder="Output will appear here..."
         readonly
       ></textarea>

web/static/style.css

@@ -1,10 +1,21 @@
+:root {
+  color-scheme: light dark;
+  --normal-fg: light-dark(black, white);
+  --normal-bg: light-dark(white, black);
+
+  --inverse-fg: var(--normal-bg);
+  --inverse-bg: var(--normal-fg);
+  --caret-color: #E60065;
+}
+
 body {
   display: flex;
   flex-direction: column;
   height: 100vh;
   margin: 0;
   font-family: monospace;
-  color: white;
+  color: var(--normal-fg);
+  background-color: var(--inverse-bg);
   gap: 1px;
 }
 
@@ -14,7 +25,7 @@ header {
   justify-content: space-between;
   align-items: center;
   padding: 1.5rem;
-  background-color: black;
+  background-color: var(--normal-bg);
 }
 
 a {
@@ -46,8 +57,8 @@ button {
   font-size: 1rem;
   border: 0;
   /* border-radius: 0.5rem; */
-  background-color: white;
-  color: black;
+  background-color: var(--inverse-bg);
+  color: var(--inverse-fg);
   padding: 0.5rem 1.2rem;
 }
 
@@ -68,9 +79,9 @@ textarea {
   padding: 10px;
   height: 100%;
   width: calc(50% - 1px);
-  color: white;
-  background-color: black;
-  caret-color: #E60065;
+  color: var(--normal-fg);
+  background-color: var(--normal-bg);
+  caret-color: var(--caret-color);
   box-sizing: border-box;
 }
 
@@ -83,7 +94,7 @@ textarea:focus-visible {
   height: 100%;
   margin: 0px;
   overflow: hidden;
-  background-color: white;
+  background-color: var(--inverse-bg);
   gap: 1px;
 }
 
@@ -99,4 +110,8 @@ textarea:focus-visible {
 
 .cm-scroller {
   overflow: auto;
+}
+
+.cm-editor .cm-cursor {
+  border-left-color: var(--caret-color);
 }