feat(editor-v2): light + dark themes + syntax highlight style

themes.js exports four extensions:
- editorLightTheme / editorDarkTheme: EditorView.theme() variants
  keyed to the --cm-* CSS variables defined in tokens.css (light) and
  its prefers-color-scheme: dark block.
- editorHighlightStyle: HighlightStyle bound to Lezer tags
  (comment, string, number, keyword, variableName).
- editorHighlighting: syntaxHighlighting(editorHighlightStyle) ready
  to drop into the EditorState extensions array.

@lezer/highlight comes in transitively via @codemirror/language;
no new package.json dependency needed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mwiegand 2026-05-17 01:56:26 +02:00
parent 9226963516
commit 5289ae307f
No known key found for this signature in database

View file

@ -0,0 +1,49 @@
import { EditorView } from "@codemirror/view";
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { tags as t } from "@lezer/highlight";
// CSS variables are defined in static/css/tokens.css (light) and the
// `prefers-color-scheme: dark` block. Both themes route through the
// same --cm-* variable names; the OS toggle swaps the underlying values.
//
// Two named themes so we can also force-pick light/dark in tests if needed.
const baseRules = {
"&": {
backgroundColor: "var(--cm-bg)",
color: "var(--cm-fg)",
fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)",
fontSize: "14px",
},
".cm-content": { caretColor: "var(--cm-fg)", padding: "8px" },
".cm-cursor": { borderLeftColor: "var(--cm-fg)" },
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection": {
backgroundColor: "var(--cm-selection)",
},
".cm-gutters": {
backgroundColor: "var(--cm-bg)",
color: "var(--fg-muted, #888)",
border: "none",
},
".cm-tooltip": {
backgroundColor: "var(--cm-bg)",
border: "1px solid var(--border-strong, #444)",
color: "var(--cm-fg)",
},
".cm-tooltip-autocomplete > ul > li[aria-selected]": {
backgroundColor: "var(--cm-selection)",
},
};
export const editorLightTheme = EditorView.theme(baseRules, { dark: false });
export const editorDarkTheme = EditorView.theme(baseRules, { dark: true });
export const editorHighlightStyle = HighlightStyle.define([
{ tag: t.comment, color: "var(--cm-comment)" },
{ tag: t.string, color: "var(--cm-string)" },
{ tag: t.number, color: "var(--cm-number)" },
{ tag: t.keyword, color: "var(--cm-keyword)" },
{ tag: t.variableName, color: "var(--cm-fg)" },
]);
export const editorHighlighting = syntaxHighlighting(editorHighlightStyle);