Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

YamlEditor: fix dark-mode cursor visibility and selection contrast (#30978)

Browse source
This commit is contained in:
Michael Geers 2026-06-18 08:33:27 +02:00 • committed by GitHub
parent 1056e85af2
commit d62ccfe3df
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/js/components/Config/YamlEditor.vue
View file

@ -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;

10
assets/js/components/Config/codemirror.ts
View file

@ -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(),