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:
parent
9226963516
commit
5289ae307f
1 changed files with 49 additions and 0 deletions
49
l4d2web/scripts/editor-src/themes.js
Normal file
49
l4d2web/scripts/editor-src/themes.js
Normal 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);
|
||||
Loading…
Reference in a new issue