diff --git a/build/appicon.png b/build/appicon.png
index 2e756a5..8b4dd15 100644
Binary files a/build/appicon.png and b/build/appicon.png differ
diff --git a/extra-assets/AppIcon.afdesign b/extra-assets/AppIcon.afdesign
index 93b11b1..a8cfc05 100644
Binary files a/extra-assets/AppIcon.afdesign and b/extra-assets/AppIcon.afdesign differ
diff --git a/frontend/src/app.css b/frontend/src/app.css
index efc3d8f..4f31543 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -141,4 +141,30 @@ 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);
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/main.js b/frontend/src/main.js
index b6da20d..c09fa63 100644
--- a/frontend/src/main.js
+++ b/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);
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 850fe00..7909e1b 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,4 +1,6 @@
-html {}
+html {
+    color-scheme: light dark;
+}
 
 body {
     margin: 0;
diff --git a/icon_asset/appicon.png b/icon_asset/appicon.png
index 4af2319..8b4dd15 100644
Binary files a/icon_asset/appicon.png and b/icon_asset/appicon.png differ
diff --git a/package-lock.json b/package-lock.json
index ef247d6..d3878e7 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index a76b9ab..7b73bac 100644
--- a/package.json
+++ b/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"