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',
|
text: '#e2e8f0',
|
||||||
textMuted: '#94a3b8',
|
textMuted: '#94a3b8',
|
||||||
cursor: '#38bdf8',
|
cursor: '#38bdf8',
|
||||||
selection: '#38bdf830',
|
// Selection alpha was originally 30 (≈19%) — bumped to 55 (≈33%)
|
||||||
activeLine: '#1e293b',
|
// 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',
|
matchingBracket: '#38bdf850',
|
||||||
searchMatch: '#38bdf850',
|
searchMatch: '#38bdf850',
|
||||||
searchMatchSelected: '#38bdf8',
|
searchMatchSelected: '#38bdf8',
|
||||||
@@ -76,7 +87,7 @@ export const dashboardTheme = EditorView.theme(
|
|||||||
borderRight: `1px solid ${palette.border}`
|
borderRight: `1px solid ${palette.border}`
|
||||||
},
|
},
|
||||||
'.cm-activeLineGutter': {
|
'.cm-activeLineGutter': {
|
||||||
backgroundColor: palette.activeLine,
|
backgroundColor: palette.activeLineGutter,
|
||||||
color: palette.text
|
color: palette.text
|
||||||
},
|
},
|
||||||
'.cm-matchingBracket, .cm-nonmatchingBracket': {
|
'.cm-matchingBracket, .cm-nonmatchingBracket': {
|
||||||
|
|||||||
Reference in New Issue
Block a user