Added dark mode and fixed the icon

frontend/src/app.css

@@ -142,3 +142,29 @@ dialog#command-dialog option {
 option .option-label {
     padding: 10px;
 }
+
+@media (prefers-color-scheme: dark) {
+    .status-bar {
+        background-color: rgb(40, 44, 52);
+        border-top-color: rgb(70, 74, 82);
+        color: rgb(220, 220, 220);
+    }
+
+    dialog#prompt-dialog,
+    dialog#command-dialog {
+        background: rgba(40, 44, 52, 0.55);
+        border-color: rgba(120, 120, 120, 0.4);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+        color: rgb(220, 220, 220);
+    }
+
+    dialog#prompt-dialog .prompt-label {
+        color: rgba(255, 255, 255, 0.65);
+    }
+
+    dialog#prompt-dialog input,
+    dialog#command-dialog input,
+    dialog#command-dialog select {
+        color: rgb(230, 230, 230);
+    }
+}

frontend/src/main.js

@@ -3,12 +3,17 @@ import './app.css';
 
 import {basicSetup} from "codemirror";
 import {EditorView, keymap} from "@codemirror/view";
+import {Compartment} from "@codemirror/state";
+import {oneDark} from "@codemirror/theme-one-dark";
 import {Application} from "@hotwired/stimulus";
 
 import {textProcessor} from "./services.js";
 import {multiCursorKeymap, commandPalette} from "./cmplugins.js";
 import {indentWithTab} from "@codemirror/commands";
 
+const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
+const themeCompartment = new Compartment();
+
 import {StatusController} from "./controllers/status_controller.js";
 import {CommandsController} from "./controllers/commands_controller.js";
 import {PromptController} from "./controllers/prompt_controller.js";
@@ -24,9 +29,16 @@ const view = new EditorView({
         EditorView.lineWrapping,
         multiCursorKeymap,
         commandPalette,
+        themeCompartment.of(darkMode.matches ? oneDark : []),
     ]
 })
 
+darkMode.addEventListener("change", (e) => {
+    view.dispatch({
+        effects: themeCompartment.reconfigure(e.matches ? oneDark : []),
+    });
+});
+
 window.Stimulus = Application.start()
 Stimulus.register("commands", CommandsController);
 Stimulus.register("prompt", PromptController);

frontend/src/style.css

@@ -1,4 +1,6 @@
-html {}
+html {
+    color-scheme: light dark;
+}
 
 body {
     margin: 0;

package-lock.json

@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "@codemirror/theme-one-dark": "^6.1.3",
         "@hotwired/stimulus": "^3.2.2",
         "codemirror": "^6.0.2",
         "mousetrap": "^1.6.5"
@@ -79,6 +80,18 @@
         "@marijn/find-cluster-break": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/view": {
       "version": "6.38.2",
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.2.tgz",

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@codemirror/theme-one-dark": "^6.1.3",
     "@hotwired/stimulus": "^3.2.2",
     "codemirror": "^6.0.2",
     "mousetrap": "^1.6.5"