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:199

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:201

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

calendarNormal ​

readonly calendarNormal: ThemeRole

Defined in: color/theme.ts:185

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

calendarSelected ​

readonly calendarSelected: ThemeRole

Defined in: color/theme.ts:193

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:187

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

calendarWeekNumber ​

readonly calendarWeekNumber: ThemeRole

Defined in: color/theme.ts:203

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:209

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.

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:217

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

editorSelected ​

readonly editorSelected: ThemeRole

Defined in: color/theme.ts:219

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

fileInfo ​

readonly fileInfo: ThemeRole

Defined in: color/theme.ts:214

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.

historyButtonArrow ​

readonly historyButtonArrow: ThemeRole

Defined in: color/theme.ts:132

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

historyButtonSides ​

readonly historyButtonSides: ThemeRole

Defined in: color/theme.ts:130

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

historyViewer ​

readonly historyViewer: ThemeRole

Defined in: color/theme.ts:140

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

historyViewerFocused ​

readonly historyViewerFocused: ThemeRole

Defined in: color/theme.ts:142

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

historyWindow ​

readonly historyWindow: ThemeRole & object

Defined in: color/theme.ts:138

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:233

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:228

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.

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:121

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

listFocused ​

readonly listFocused: ThemeRole

Defined in: color/theme.ts:117

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

listNormal ​

readonly listNormal: ThemeRole

Defined in: color/theme.ts:115

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

listSelected ​

readonly listSelected: ThemeRole

Defined in: color/theme.ts:119

A list's selected row: yellow on cyan.

memoNormal ​

readonly memoNormal: ThemeRole

Defined in: color/theme.ts:221

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

memoSelected ​

readonly memoSelected: ThemeRole

Defined in: color/theme.ts:223

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:147

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

outlineNormal ​

readonly outlineNormal: ThemeRole

Defined in: color/theme.ts:145

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

outlineNotExpanded ​

readonly outlineNotExpanded: ThemeRole

Defined in: color/theme.ts:151

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

outlineSelected ​

readonly outlineSelected: ThemeRole

Defined in: color/theme.ts:149

An outline/tree selected row: brightGreen on blue.

progressFill ​

readonly progressFill: ThemeRole

Defined in: color/theme.ts:167

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:173

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:113

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

scrollBarPage ​

readonly scrollBarPage: ThemeRole

Defined in: color/theme.ts:111

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:245

The window drop-shadow: darkGray on black.

sliderThumb ​

readonly sliderThumb: ThemeRole

Defined in: color/theme.ts:183

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:178

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

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:237

The status line.

statusSelected ​

readonly statusSelected: ThemeRole

Defined in: color/theme.ts:243

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:157

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:161

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:159

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:127

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:235

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

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