Skip to content

feat(editor): per-theme syntax tokens for CodeMirror and live preview#86

Merged
jsgrrchg merged 2 commits into
mainfrom
feat/per-theme-syntax-tokens
May 15, 2026
Merged

feat(editor): per-theme syntax tokens for CodeMirror and live preview#86
jsgrrchg merged 2 commits into
mainfrom
feat/per-theme-syntax-tokens

Conversation

@jsgrrchg
Copy link
Copy Markdown
Owner

@jsgrrchg jsgrrchg commented May 15, 2026

Summary

  • Each of the 21 UI themes now drives its own syntax-highlight palette for CodeMirror (source mode) and for the static highlighter used in chat/diffs.
  • The boundary is CSS variables (--code-*): applyThemeColors publishes them on :root, both buildSyntaxHighlightStyle() and .cm-static-token-* resolve through them, and theme changes propagate without any compartment reconfigure or themeName plumbing.
  • Live preview headings and inline code now pick up --code-markup / --code-string so they match the source-mode coloring.
  • Removes the unused @codemirror/theme-one-dark dependency.

Why

All 21 themes (Catppuccin, Gruvbox, Tokyo Night, Synthwave '84, etc.) previously shared oneDarkHighlightStyle (dark) or defaultHighlightStyle (light), so the code blocks and markdown markup looked identical across themes — defeating the point of having distinct themes for poweruser identity.

Approach

  1. ThemeColors extends ThemeUiColors and adds codeAnchors: CodeColorAnchors (12 slots: comment, constant, escape, function, keyword, markup, parameter, property, string, type, typeParameter, variable).
  2. applyThemeColors writes --code-* vars to :root next to the existing UI vars.
  3. New extensions/syntaxTheme.ts defines a HighlightStyle mapping Lezer tags to var(--code-*). Coverage mirrors staticCodeHighlight.tsx so source mode and rendered code stay aligned.
  4. getSyntaxExtension() no longer takes arguments; isDark plumbing and the reconfigure effects are removed.
  5. Anchors for the 21 themes ported as-is from the curated palettes in a sibling project (canonical themes use their published colors; in-house themes are harmonized with the accent).

Test plan

  • `tsc -b` clean.
  • `eslint` clean on touched dirs.
  • `vitest run`: 149 files, 1547 tests passing, 0 failing.
  • Sub-agent audit + fixes (2 majors, 5 minors).
  • Smoke manual: open a `.md` with headings/bold/italic/inline code/fences, cycle through `default`, `gruvbox`, `tokyoNight`, `synthwave84` × light/dark, validate source mode and live preview.
  • Smoke manual: chat code blocks and agent diffs over add/remove/update backgrounds.

Out of scope

  • Importing/exporting custom user themes.
  • Porting accessibility contrast checks.
  • Theming terminal, search panel, merge view, or diff semantic colors beyond what the static syntax highlighter already touches.

Each of the 21 UI themes now drives its own syntax-highlight palette.
Previously every theme shared `oneDarkHighlightStyle` / `defaultHighlightStyle`
so code and markdown markup looked identical across themes.

The boundary is CSS variables: `applyThemeColors` publishes 12 `--code-*`
vars on `:root`, and both `buildSyntaxHighlightStyle()` (CodeMirror) and
the `.cm-static-token-*` rules (chat/diffs) reference those vars. Theme
changes propagate via the vars — no compartment reconfigure, no
`themeName`/`isDark` plumbing through editor extensions.

Live preview headings and inline code now pick up `--code-markup` and
`--code-string` so they match the source-mode coloring.

Removes the unused `@codemirror/theme-one-dark` dependency.
@jsgrrchg jsgrrchg linked an issue May 15, 2026 that may be closed by this pull request
@jsgrrchg jsgrrchg marked this pull request as ready for review May 15, 2026 04:22
@jsgrrchg jsgrrchg merged commit 0205a9b into main May 15, 2026
8 checks passed
@jsgrrchg jsgrrchg deleted the feat/per-theme-syntax-tokens branch May 15, 2026 04:56
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.

[Feature] Per theme syntax token Code Mirror

1 participant