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) <noreply@anthropic.com>
This commit is contained in:
@@ -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': {
|
||||
|
||||
Reference in New Issue
Block a user