From d1289ff456b68cb4b2311dc00b9e41df9712ebd8 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Mon, 22 Dec 2025 01:13:32 +0100
Subject: [PATCH] fix: use One Dark theme for CodeMirror syntax highlighting

- Replace custom highlight styles with @codemirror/theme-one-dark
- Cleaner implementation with official CodeMirror theme
- Keep custom font and padding overrides
---
 package-lock.json      | 13 ++++++++++
 package.json           |  1 +
 src/impl/CodeEditor.js | 56 +++++-------------------------------------
 3 files changed, 20 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e91b96f..e1a485c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
 				"@codemirror/lang-css": "^6.3.1",
 				"@codemirror/lang-html": "^6.4.11",
 				"@codemirror/state": "^6.5.2",
+				"@codemirror/theme-one-dark": "^6.1.3",
 				"@codemirror/view": "^6.39.4",
 				"@emmetio/codemirror6-plugin": "^0.4.0",
 				"codemirror": "^6.0.2",
@@ -269,6 +270,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.39.4",
 			"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.4.tgz",
diff --git a/package.json b/package.json
index 7e10b4d..0cb46d2 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
 		"@codemirror/lang-css": "^6.3.1",
 		"@codemirror/lang-html": "^6.4.11",
 		"@codemirror/state": "^6.5.2",
+		"@codemirror/theme-one-dark": "^6.1.3",
 		"@codemirror/view": "^6.39.4",
 		"@emmetio/codemirror6-plugin": "^0.4.0",
 		"codemirror": "^6.0.2",
diff --git a/src/impl/CodeEditor.js b/src/impl/CodeEditor.js
index ddb71e8..106d716 100644
--- a/src/impl/CodeEditor.js
+++ b/src/impl/CodeEditor.js
@@ -3,70 +3,25 @@
  */
 import { EditorState, Prec } from "@codemirror/state";
 import { EditorView, keymap, placeholder } from "@codemirror/view";
-import { defaultKeymap, indentWithTab, indentMore, indentLess } from "@codemirror/commands";
+import { defaultKeymap, indentMore, indentLess } from "@codemirror/commands";
+import { oneDark } from "@codemirror/theme-one-dark";
 import { html } from "@codemirror/lang-html";
 import { css } from "@codemirror/lang-css";
 import { autocompletion } from "@codemirror/autocomplete";
 import { abbreviationTracker, expandAbbreviation } from "@emmetio/codemirror6-plugin";
 
-// Dark theme matching our editor
+// Custom overrides for One Dark theme
 const editorTheme = EditorView.theme({
 	"&": {
 		height: "100%",
-		fontSize: "14px",
-		backgroundColor: "#1e1e1e"
+		fontSize: "14px"
 	},
 	".cm-content": {
 		fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-		padding: "12px 0",
-		caretColor: "#fff",
-		color: "#d4d4d4"
+		padding: "12px 0"
 	},
 	".cm-line": {
 		padding: "0 12px"
-	},
-	"&.cm-focused .cm-cursor": {
-		borderLeftColor: "#fff"
-	},
-	"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": {
-		backgroundColor: "#3a3d41"
-	},
-	".cm-activeLine": {
-		backgroundColor: "#2a2d2e"
-	},
-	".cm-gutters": {
-		backgroundColor: "#1e1e1e",
-		color: "#858585",
-		border: "none",
-		paddingRight: "8px"
-	},
-	".cm-activeLineGutter": {
-		backgroundColor: "#2a2d2e"
-	},
-	// Syntax highlighting
-	".cm-keyword": { color: "#569cd6" },
-	".cm-tagName": { color: "#569cd6" },
-	".cm-attributeName": { color: "#9cdcfe" },
-	".cm-attributeValue": { color: "#ce9178" },
-	".cm-string": { color: "#ce9178" },
-	".cm-comment": { color: "#6a9955" },
-	".cm-propertyName": { color: "#9cdcfe" },
-	".cm-number": { color: "#b5cea8" },
-	".cm-unit": { color: "#b5cea8" },
-	".cm-variableName": { color: "#9cdcfe" },
-	// Autocomplete
-	".cm-tooltip": {
-		backgroundColor: "#252526",
-		border: "1px solid #454545"
-	},
-	".cm-tooltip-autocomplete": {
-		"& > ul > li": {
-			padding: "4px 8px"
-		},
-		"& > ul > li[aria-selected]": {
-			backgroundColor: "#094771",
-			color: "#fff"
-		}
 	}
 }, { dark: true });
 
@@ -92,6 +47,7 @@ export class CodeEditor {
 		// Build extensions array
 		const extensions = [
 			langExtension,
+			oneDark,
 			editorTheme,
 			// Emmet abbreviation tracking
 			abbreviationTracker(),