Repository navigation
feat: add monochrome visual themes #121
Description
Problem
browser.cpp currently offers five visual themes, but none provides a strictly monochrome reading mode. Users who want black-on-white or white-on-black code and interface surfaces still see chromatic syntax, ANSI output, controls, and semantic states.
Proposed solution
Add two persistent visual themes:
monochrome-light: black primary content on white surfaces, with#666666for tertiary elements.monochrome-dark: white primary content on black surfaces, with#999999for tertiary elements.
The monochrome themes must apply consistently to the shell, Monaco, xterm, ANSI palettes, controls, previews, borders, and semantic states. Source code must have no syntax highlighting: all code tokens use uniform foreground styling. Success, warning, and error states remain distinguishable through grayscale levels, borders, labels, and existing icons.
Existing themes, the browser-cpp-dark default, settings persistence, and Memory Debug Mode remain unchanged.
Acceptance criteria
- Both themes appear exactly once in the registry and settings cards.
- Both themes persist across reloads and unknown values still fall back safely.
- New-theme CSS, Monaco, xterm, ANSI, preview, control, and semantic-state colors are grayscale.
- Monochrome source code has no token-based syntax color, font-weight, or font-style differences.
- Monaco and xterm selection colors remain readable and consistent.
- Success, warning, and error remain distinguishable without hue.
- Existing five themes retain their current behavior.
npm run lint,npm run build,npm run test:e2e, and available browser smoke tests pass.
Activity
kbuffardi commentedon Oct 30, 2026
Plan update
The requested refinement is implemented in PR #122:
#f2f2f2,#ffffff, and#e6e6e6.#1a1a1a,#000000, and#262626.The existing five themes remain unchanged.
kbuffardi commentedon Oct 30, 2026
When highlighting text in the file editor (in either monochrome theme) the contrast is too small between the highlight background and the text.
Fix this.
kbuffardi commentedon Oct 30, 2026
Plan: WCAG-compliant monochrome selections
Agreed scope for the reopened selection-contrast issue:
monochrome-lightandmonochrome-darkselection colors only.Verification will include
npm run lint,npm run build,npm run test:e2e, and available browser smoke tests.kbuffardi commentedon Oct 30, 2026
Implementation correction
@kbuffardi reported:
Root cause: Monaco applied the configured selection background but retained the token foreground inside selected text. The previous smoke hook created a synthetic span, so it did not prove the actual Monaco selection rendering.
The PR now:
.selected-textforegrounds for the two monochrome themes;Verification passed: lint, production build, and 234 E2E tests.
kbuffardi commentedon Oct 30, 2026
Monaco overlay correction
@kbuffardi reported:
The active-state screenshots showed that Monaco draws selection backgrounds in an overlay separate from source-code text spans. The previous selected-text CSS targeted the overlay and could not change the glyph color.
The PR now removes that ineffective override and uses WCAG AA grayscale overlay backgrounds that contrast with Monaco's actual code foreground:
#999999(active) and#bbbbbb(inactive).#555555(active) and#707070(inactive).The smoke hook now reads the real selection overlay background and the rendered source span color independently. Lint, production build, and 234 E2E tests passed.