From 56de652f7ac616005e6b1bb086c444aee8869bf2 Mon Sep 17 00:00:00 2001 From: MechaCat02 Date: Sun, 24 May 2026 22:58:27 +0200 Subject: [PATCH] fix(dashboard): keep selection visible against active-line tint CodeMirror layers the active-line background above the selection layer, so the previous opaque active-line color hid selections on the current line. Bumps selection alpha and switches active-line to a subtle sky tint, with the brighter gutter line number as the primary cue. Co-Authored-By: Claude Opus 4.7 (1M context) --- dashboard/src/lib/editor-theme.ts | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/dashboard/src/lib/editor-theme.ts b/dashboard/src/lib/editor-theme.ts index 250a2de..96bc263 100644 --- a/dashboard/src/lib/editor-theme.ts +++ b/dashboard/src/lib/editor-theme.ts @@ -17,8 +17,19 @@ const palette = { text: '#e2e8f0', textMuted: '#94a3b8', cursor: '#38bdf8', - selection: '#38bdf830', - activeLine: '#1e293b', + // Selection alpha was originally 30 (≈19%) — bumped to 55 (≈33%) + // so it stays clearly visible when it sits on top of (or under, in + // CodeMirror's case) the active-line tint. The default CM layering + // puts the selection layer behind line backgrounds, so an opaque + // active line hides selections on the current line; this pair of + // values makes both visible at once. + selection: '#38bdf855', + // Active line: very subtle sky tint at ~6% alpha. Strong enough to + // see at a glance which line the caret is on, weak enough to leave + // the selection visible underneath. The active-line gutter (the + // brighter line number on the left) is the primary indicator. + activeLine: '#38bdf810', + activeLineGutter: '#1e293b', matchingBracket: '#38bdf850', searchMatch: '#38bdf850', searchMatchSelected: '#38bdf8', @@ -76,7 +87,7 @@ export const dashboardTheme = EditorView.theme( borderRight: `1px solid ${palette.border}` }, '.cm-activeLineGutter': { - backgroundColor: palette.activeLine, + backgroundColor: palette.activeLineGutter, color: palette.text }, '.cm-matchingBracket, .cm-nonmatchingBracket': {