JSVision

Appearance

@jsvision/core / Theme

Interface: Theme ​

Defined in: color/theme.ts:30

Named semantic UI roles mapped to colors. See defaultTheme.

Properties ​

button ​

readonly button: ThemeRole

Defined in: color/theme.ts:57

A normal command button face.

buttonDefault ​

readonly buttonDefault: ThemeRole

Defined in: color/theme.ts:70

The default button's face when unfocused: brightCyan on green.

buttonDisabled ​

readonly buttonDisabled: ThemeRole

Defined in: color/theme.ts:72

A disabled button's face: darkGray on lightGray.

buttonFocused ​

readonly buttonFocused: ThemeRole

Defined in: color/theme.ts:59

A focused command button face.

buttonShadow ​

readonly buttonShadow: ThemeRole

Defined in: color/theme.ts:80

The button's drop-shadow blocks (▄/█/▀): black on lightGray. Painting black block glyphs over the dialog's own gray field produces the shadow. This is NOT the window drop-shadow (shadow, darkGray on black).

buttonShortcut ​

readonly buttonShortcut: ThemeRole

Defined in: color/theme.ts:74

A button's ~hotkey~ accent character: yellow on green.

calendarCursor ​

readonly calendarCursor: ThemeRole

Defined in: color/theme.ts:204

A calendar's focus cursor — the navigable focus cell, drawn only while the calendar has focus, at highest precedence: black on white (a filled reverse block) so the focused day reads as a solid highlight against the cyan grid.

calendarDisabled ​

readonly calendarDisabled: ThemeRole

Defined in: color/theme.ts:206

A calendar's disabled day — dimmed but still navigable: darkGray on cyan.

calendarNormal ​

readonly calendarNormal: ThemeRole

Defined in: color/theme.ts:190

A calendar's in-month day cell (normal): yellow on cyan.

calendarSelected ​

readonly calendarSelected: ThemeRole

Defined in: color/theme.ts:198

A calendar's selected day — the committed value cell: white on blue, a distinct blue cell against the cyan grid. Takes precedence over calendarToday when they coincide.

calendarToday ​

readonly calendarToday: ThemeRole

Defined in: color/theme.ts:192

A calendar's "today" cell — the highlighted current date: blue on green.

calendarWeekNumber ​

readonly calendarWeekNumber: ThemeRole

Defined in: color/theme.ts:208

A calendar's ISO week-number column (the opt-in leading NN column): black on cyan.

clusterDisabled ​

readonly clusterDisabled: ThemeRole

Defined in: color/theme.ts:88

A disabled cluster item: darkGray on cyan.

clusterNormal ​

readonly clusterNormal: ThemeRole

Defined in: color/theme.ts:82

A check/radio cluster item, normal: black on cyan.

clusterSelected ​

readonly clusterSelected: ThemeRole

Defined in: color/theme.ts:84

A check/radio cluster item, focused: white on cyan.

clusterShortcut ​

readonly clusterShortcut: ThemeRole

Defined in: color/theme.ts:86

A cluster item's ~hotkey~ accent: yellow on cyan.

colorMarker ​

readonly colorMarker: ThemeRole

Defined in: color/theme.ts:214

The forced-contrast ◘ selection marker drawn on a near-black color-swatch cell: black on lightGray, so the marker stays visible against the dark cell. A normal (non-dark) cell's marker uses the cell's own color instead.

dangerText ​

readonly dangerText: ThemeRole

Defined in: color/theme.ts:295

Danger/error body text — a validation error or alert line: danger-red on the static-text field.

desktop ​

readonly desktop: ThemeRole & object

Defined in: color/theme.ts:32

The desktop fill: a role plus the repeating pattern glyph tiled across it.

Type Declaration ​

pattern ​

readonly pattern: string

dialog ​

readonly dialog: ThemeRole & object

Defined in: color/theme.ts:55

The gray dialog chrome. border/title color the frame lines and title; icon is the accent for the close-box [×] glyph. The gray dialog palette is deliberately distinct from the blue window.

Type Declaration ​

border ​

readonly border: Color

icon ​

readonly icon: Color

title ​

readonly title: Color

editorNormal ​

readonly editorNormal: ThemeRole

Defined in: color/theme.ts:252

Editor text — an editor/memo body's normal cell: yellow on blue.

editorSelected ​

readonly editorSelected: ThemeRole

Defined in: color/theme.ts:254

Editor selected text — the reverse-video selection band: blue on lightGray.

fileInfo ​

readonly fileInfo: ThemeRole

Defined in: color/theme.ts:249

A file dialog's info pane — the strip below the dialog that reads out the expanded path and the focused entry's name/size/date/time: cyan on blue.

gridCursor ​

readonly gridCursor: ThemeRole

Defined in: color/theme.ts:221

The focused cell highlight in an editable data grid — a filled black-on-white reverse block drawn over the focused row so the cursor cell reads distinctly inside the row highlight. Painted only while the grid body has focus.

gridDirty ​

readonly gridDirty: ThemeRole

Defined in: color/theme.ts:227

The pending-commit marker colour in an editable data grid: the • drawn on a cell whose edit has not yet been confirmed. Its foreground is composited over the cell's own background at draw time, so the stored background is nominal.

gridInvalid ​

readonly gridInvalid: ThemeRole

Defined in: color/theme.ts:244

A cell whose edit failed validation in an editable data grid — a solid band (white on a deep red), distinct from both the gridDirty pending-commit marker (a •, not a band) and the gridCursor focus. Painted over the whole invalid cell so a rejected value reads as a hard error; it wins over the dirty marker but yields to the focused-cell cursor.

gridSelectedRow ​

readonly gridSelectedRow: ThemeRole

Defined in: color/theme.ts:236

A selected row in an editable data grid — the multi-row selection highlight, a solid band distinct from both the focused-cell gridCursor and the base list's listSelected: bright white on blue. It carries its own background (not listSelected's cyan, which matches a normal row), so a selected row reads clearly even against zebra striping. Painted for every row whose key is in the selection set; the focused-cell cursor and the pending-commit marker win over it.

historyButtonArrow ​

readonly historyButtonArrow: ThemeRole

Defined in: color/theme.ts:137

The history dropdown button's ↓ arrow: black on green.

historyButtonSides ​

readonly historyButtonSides: ThemeRole

Defined in: color/theme.ts:135

The history dropdown button's ▐/▌ half-block sides: green on lightGray.

historyViewer ​

readonly historyViewer: ThemeRole

Defined in: color/theme.ts:145

A history list's normal (unfocused) row: white on blue.

historyViewerFocused ​

readonly historyViewerFocused: ThemeRole

Defined in: color/theme.ts:147

A history list's focused row: white on green.

historyWindow ​

readonly historyWindow: ThemeRole & object

Defined in: color/theme.ts:143

The history popup window — the same shape as window (interior fg/bg + border + icon). It renders as a blue window (white-on-blue border, brightGreen icon accent) even when opened from a gray dialog.

Type Declaration ​

border ​

readonly border: Color

icon ​

readonly icon: Color

indicatorDragging ​

readonly indicatorDragging: ThemeRole

Defined in: color/theme.ts:268

The line:col indicator while its window is being dragged: brightGreen on blue, drawn over a ─ fill.

indicatorNormal ​

readonly indicatorNormal: ThemeRole

Defined in: color/theme.ts:263

The line:col indicator in an editor window's bottom border, at rest: white on blue, drawn over a ═ fill while the window is not being dragged.

inputArrows ​

readonly inputArrows: ThemeRole

Defined in: color/theme.ts:104

The input-line ◄/► scroll arrows shown when text overflows: brightGreen on blue.

inputNormal ​

readonly inputNormal: ThemeRole

Defined in: color/theme.ts:95

An input-line field, unfocused: white on blue. A focused field uses the same color (inputSelected) — focus is signalled by the blinking caret, not by a color change. The reverse-video highlight over a text selection is a separate role, inputSelection.

inputPlaceholder ​

readonly inputPlaceholder: ThemeRole

Defined in: color/theme.ts:109

The muted hint text shown in an empty input line (its placeholder): a dimmed, secondary foreground on the input field's own background — visible but clearly not the typed value.

inputSelected ​

readonly inputSelected: ThemeRole

Defined in: color/theme.ts:97

An input-line field, focused: white on blue — the same as inputNormal.

inputSelection ​

readonly inputSelection: ThemeRole

Defined in: color/theme.ts:102

The highlight band over selected text inside an input line: white on green. Distinct from the focused field color (inputSelected).

label ​

readonly label: ThemeRole

Defined in: color/theme.ts:64

A control label's normal text: black on lightGray.

labelSelected ​

readonly labelSelected: ThemeRole

Defined in: color/theme.ts:66

A label when its linked control is focused: white on lightGray.

labelShortcut ​

readonly labelShortcut: ThemeRole

Defined in: color/theme.ts:68

A label's ~hotkey~ accent character: yellow on lightGray.

listDivider ​

readonly listDivider: ThemeRole

Defined in: color/theme.ts:126

A list's inter-column divider │ (unused for a single-column list): blue on cyan.

listFocused ​

readonly listFocused: ThemeRole

Defined in: color/theme.ts:122

A list's focused row — the primary focus signal in color mode: white on green.

listNormal ​

readonly listNormal: ThemeRole

Defined in: color/theme.ts:120

A list's normal (unfocused) row: black on cyan.

listSelected ​

readonly listSelected: ThemeRole

Defined in: color/theme.ts:124

A list's selected row: yellow on cyan.

memoNormal ​

readonly memoNormal: ThemeRole

Defined in: color/theme.ts:256

A dialog-embedded memo's normal cell: black on cyan.

memoSelected ​

readonly memoSelected: ThemeRole

Defined in: color/theme.ts:258

A memo's selected text: white on green.

readonly menuBar: ThemeRole

Defined in: color/theme.ts:34

The top menu bar.

readonly menuSelected: ThemeRole

Defined in: color/theme.ts:36

The highlighted (hovered/open) menu item.

outlineFocused ​

readonly outlineFocused: ThemeRole

Defined in: color/theme.ts:152

An outline/tree focused row — a distinct inverted bar: blue on lightGray.

outlineNormal ​

readonly outlineNormal: ThemeRole

Defined in: color/theme.ts:150

An outline/tree normal row (an expanded node or a leaf): yellow on blue.

outlineNotExpanded ​

readonly outlineNotExpanded: ThemeRole

Defined in: color/theme.ts:156

An outline/tree collapsed-node's text: white on blue.

outlineSelected ​

readonly outlineSelected: ThemeRole

Defined in: color/theme.ts:154

An outline/tree selected row: brightGreen on blue.

progressFill ​

readonly progressFill: ThemeRole

Defined in: color/theme.ts:172

A progress bar's filled portion: brightCyan on blue — a brighter sibling of scrollBarPage. Paints the █/eighth-block sub-cell fill (and the whole-cell # fill in ASCII mode).

progressTrack ​

readonly progressTrack: ThemeRole

Defined in: color/theme.ts:178

A progress bar's unfilled track: cyan on blue (identical to scrollBarPage), so the fill reads brighter than the track on the shared blue field. Paints the ░ track (and the whole-cell - track in ASCII mode).

scrollBarControls ​

readonly scrollBarControls: ThemeRole

Defined in: color/theme.ts:118

A scrollbar's controls — the ▲▼◄► arrows and the ■ thumb: cyan on blue.

scrollBarPage ​

readonly scrollBarPage: ThemeRole

Defined in: color/theme.ts:116

A scrollbar's track / page area (the ▒/▓ fill): cyan on blue. The track and the controls share a color; the glyph (■ thumb vs ▒ track) is the visual distinction.

shadow ​

readonly shadow: ThemeRole

Defined in: color/theme.ts:280

The window drop-shadow: darkGray on black.

sliderThumb ​

readonly sliderThumb: ThemeRole

Defined in: color/theme.ts:188

A slider's thumb — the █ block marking the current value: a solid blue-on-lightGray block, brighter than the sliderTrack groove.

sliderTrack ​

readonly sliderTrack: ThemeRole

Defined in: color/theme.ts:183

A slider's groove — the ─/│ rule the thumb travels along: a dim darkGray-on-lightGray line on the gray dialog field where sliders live.

splitter ​

readonly splitter: ThemeRole

Defined in: color/theme.ts:286

A split-pane divider at rest: lightGray on blue, drawn over the divider's │ (row split) or ─ (col split) fill, with a ▓ grab mark at its midpoint.

splitterDragging ​

readonly splitterDragging: ThemeRole

Defined in: color/theme.ts:292

A split-pane divider while it is being dragged: brightGreen on blue — the dragging counterpart of splitter, mirroring how indicatorDragging relates to indicatorNormal.

staticText ​

readonly staticText: ThemeRole

Defined in: color/theme.ts:62

Static (non-interactive) text: black on lightGray.

statusBar ​

readonly statusBar: ThemeRole

Defined in: color/theme.ts:272

The status line.

statusSelected ​

readonly statusSelected: ThemeRole

Defined in: color/theme.ts:278

The status-line pressed/selected item (mouse-down feedback): black on green, with a red-on-green hotkey run. The pressed counterpart of statusBar, mirroring how menuSelected relates to menuBar.

tabActive ​

readonly tabActive: ThemeRole

Defined in: color/theme.ts:162

The active (selected) tab — the brighter, "raised" button face: white on green, with a yellow accent for the ~X~ hotkey letter.

tabDisabled ​

readonly tabDisabled: ThemeRole

Defined in: color/theme.ts:166

A disabled tab — dimmed but kept on the green field so it stays part of the strip: darkGray on green.

tabInactive ​

readonly tabInactive: ThemeRole

Defined in: color/theme.ts:164

An inactive tab — the normal button face: black on green, with a yellow ~X~ hotkey accent.

tableHeader ​

readonly tableHeader: ThemeRole

Defined in: color/theme.ts:132

A data-grid header row: white on cyan — a bright heading over the same cyan field as the listNormal rows, distinct from both normal (black-on-cyan) and selected (yellow-on-cyan) rows.

terminalNormal ​

readonly terminalNormal: ThemeRole

Defined in: color/theme.ts:270

Terminal text — a streaming log sink's normal cell: yellow on blue.

warningText ​

readonly warningText: ThemeRole

Defined in: color/theme.ts:297

Advisory/warning body text — a non-blocking caution: amber on the static-text field.

window ​

readonly window: ThemeRole & object

Defined in: color/theme.ts:42

The active (focused) window chrome. border/title color the frame lines and title text; icon is the brighter accent used for the close/zoom glyphs and the resize grips so they stand out from the frame.

Type Declaration ​

border ​

readonly border: Color

icon ​

readonly icon: Color

title ​

readonly title: Color

windowInactive ​

readonly windowInactive: ThemeRole & object

Defined in: color/theme.ts:49

The inactive (background) window chrome — the same shape as window (fg/bg + border/title + icon) but dimmed, so a background window reads as distinct from the focused one. icon is present for shape symmetry but an inactive window draws no title-bar icons.

Type Declaration ​

border ​

readonly border: Color

icon ​

readonly icon: Color

title ​

readonly title: Color