Skip to content

feat(desktop): code block syntax highlighting follows light/dark theme#1655

Merged
esengine merged 1 commit into
esengine:mainfrom
CVEngineer66:feat/desktop-code-block-theme
May 24, 2026
Merged

feat(desktop): code block syntax highlighting follows light/dark theme#1655
esengine merged 1 commit into
esengine:mainfrom
CVEngineer66:feat/desktop-code-block-theme

Conversation

@CVEngineer66

Copy link
Copy Markdown
Contributor

Summary

Code block syntax highlighting colors now switch together with the app theme (light ↔ dark).

Motivation

The Prism syntax highlighting theme in CodeView.tsx was hardcoded with dark-mode-only colors (#dde1ea on dark backgrounds). When switching to light mode (data-theme=light), the code text remained in pale dark-mode colors — nearly invisible on a white background.

Changes

desktop/src/CodeView.tsx — Added a LIGHT_THEME with GitHub-style light syntax colors alongside the existing DARK_THEME. Added a usePrismTheme() hook that observes <html data-theme> via MutationObserver and returns the appropriate theme. CodeView now passes the dynamic theme to <Highlight>.

Only the syntax colors change — the code block background is already handled by CSS variables.

Verification

  • npm run verify passes
  • Manually tested: toggling theme in desktop app swaps code block colors instantly
  • MutationObserver only fires on data-theme attribute changes (no unnecessary re-renders)

@esengine esengine merged commit 267c490 into esengine:main May 24, 2026
4 checks passed
@esengine

Copy link
Copy Markdown
Owner

Thanks @CVEngineer66 — nicely scoped this time (one file, one concern) and the MutationObserver pattern is clean. Merged.

Heads-up: dashboard/src/CodeView.tsx has the same hardcoded-dark-theme issue. If you'd like to mirror the fix there, that would be a great follow-up.

@CVEngineer66 CVEngineer66 deleted the feat/desktop-code-block-theme branch May 24, 2026 09:04
esengine pushed a commit that referenced this pull request May 24, 2026
…moved, persisted usage stats, plan dispatch gate

Headline themes:
- Desktop: bundle the CLI-hosted React dashboard, retire Tauri+Preact duplicate (#1418)
- Config: drop preset abstraction; flash/pro are direct model selections (#1657, #1630)
- Stats: persist cumulative usage to session meta + auto-restore on startup (#1667, #1680, #1643, #1628)
- Plans: editMode="plan" enforced at the ToolRegistry dispatch gate (#1681); step advance fix (#1629)
- Context: fold once at turn start, drop pre-flight + byte-ceiling (#1642, #1646); collapsible compacted card (#1649)
- Subagents: per-skill flash/pro override + Settings UI (#1632)
- Desktop polish: sidebar drag-resize (#1688), responsive collapse (#1585), copy/edit overlay + msg-history nav (#1645), Esc closes modal not turn (#1685), QQ tab isolation (#1672), DiffCard for edits (#1662), theme-aware highlighting (#1655), system events toggle (#1654/#1650), macOS TCC inheritance (#1614), dashboard.enabled (#1612)
- Dashboard polish: persistent session URL (#1586, #1589, #1599), theme-aware highlighting (#1664), IME confirm-enter guard (#1689), code-fence lang fix (#1677), vendor chunk split (#1587), markdown table h-scroll (#1562)
- TUI: Alt+S input stash/recall; static history isolated from input rerenders (#1635); legacy mouse drop (#1637, #1648); multi-edit gated in review (#1647)
- Diff: SplitDiff column border holds under CJK (#1686)
- MCP: workspace roots passed to servers (#1625); codeCommand honors mcpServers (#1603)
- Config plumbing: (baseUrl, apiKey) resolved as a tuple (#1658); stale model id self-heal (#1663)

See CHANGELOG for the full list.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants