From d62ccfe3dff8b11add0bbadf2d7873acc40d3fc6 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Thu, 18 Jun 2026 08:33:27 +0200
Subject: [PATCH] YamlEditor: fix dark-mode cursor visibility and selection
 contrast (#30978)

---
 assets/js/components/Config/YamlEditor.vue |  6 +++---
 assets/js/components/Config/codemirror.ts  | 10 +++++++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/assets/js/components/Config/YamlEditor.vue b/assets/js/components/Config/YamlEditor.vue
index 5ce2d2c88..22b7f1560 100644
--- a/assets/js/components/Config/YamlEditor.vue
+++ b/assets/js/components/Config/YamlEditor.vue
@@ -73,7 +73,7 @@ export default {
 	height: 100%;
 	font-size: 13px;
 	background-color: var(--evcc-box);
-	color: var(--bs-body-color);
+	color: var(--evcc-default-text);
 }
 .editor :global(.cm-editor.cm-focused) {
 	outline: none;
@@ -93,11 +93,11 @@ export default {
 	background-color: transparent;
 }
 .editor :global(.cm-cursor) {
-	border-left-color: var(--bs-body-color);
+	border-left-color: var(--evcc-default-text) !important;
 }
 .editor :global(.cm-selectionBackground),
 .editor :global(.cm-focused .cm-selectionBackground) {
-	background-color: var(--evcc-gray-50);
+	background-color: rgba(128, 128, 128, 0.4) !important;
 }
 .editor :global(.cm-errorLine) {
 	background-color: var(--bs-danger) !important;
diff --git a/assets/js/components/Config/codemirror.ts b/assets/js/components/Config/codemirror.ts
index 9065162ef..7b61fad29 100644
--- a/assets/js/components/Config/codemirror.ts
+++ b/assets/js/components/Config/codemirror.ts
@@ -1,6 +1,13 @@
 // Separate module so YamlEditor.vue can dynamic-import it, keeping CodeMirror out of the main chunk.
 import { EditorState, Compartment, StateField, StateEffect } from "@codemirror/state";
-import { EditorView, lineNumbers, keymap, Decoration, type DecorationSet } from "@codemirror/view";
+import {
+  EditorView,
+  lineNumbers,
+  keymap,
+  drawSelection,
+  Decoration,
+  type DecorationSet,
+} from "@codemirror/view";
 import {
   indentOnInput,
   foldGutter,
@@ -71,6 +78,7 @@ export function createEditor(opts: EditorOptions): EditorController {
     extensions: [
       lineNumbers(),
       foldGutter(),
+      drawSelection(),
       history(),
       bracketMatching(),
       yaml(),