feat(editor): per-theme syntax tokens for CodeMirror and live preview#86
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
--code-*):applyThemeColorspublishes them on:root, bothbuildSyntaxHighlightStyle()and.cm-static-token-*resolve through them, and theme changes propagate without any compartment reconfigure orthemeNameplumbing.--code-markup/--code-stringso they match the source-mode coloring.@codemirror/theme-one-darkdependency.Why
All 21 themes (Catppuccin, Gruvbox, Tokyo Night, Synthwave '84, etc.) previously shared
oneDarkHighlightStyle(dark) ordefaultHighlightStyle(light), so the code blocks and markdown markup looked identical across themes — defeating the point of having distinct themes for poweruser identity.Approach
ThemeColorsextendsThemeUiColorsand addscodeAnchors: CodeColorAnchors(12 slots: comment, constant, escape, function, keyword, markup, parameter, property, string, type, typeParameter, variable).applyThemeColorswrites--code-*vars to:rootnext to the existing UI vars.extensions/syntaxTheme.tsdefines aHighlightStylemapping Lezer tags tovar(--code-*). Coverage mirrorsstaticCodeHighlight.tsxso source mode and rendered code stay aligned.getSyntaxExtension()no longer takes arguments;isDarkplumbing and the reconfigure effects are removed.Test plan
Out of scope