feat: add custom CodeMirror theme with purple accent colors

Replace oneDark theme with custom crispyEditorTheme featuring:
- Purple accent (#c9a6eb) for keywords and HTML tags
- Matching dark background (#262630)
- Applied consistently across editor and reference code blocks

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
2026-01-16 02:08:16 +01:00
parent 983e9ca19f
commit 8d67405cf1
3 changed files with 82 additions and 8 deletions

View File

@@ -1,5 +1,5 @@
import { LessonEngine } from "./impl/LessonEngine.js";
import { CodeEditor } from "./impl/CodeEditor.js";
import { CodeEditor, crispyEditorTheme } from "./impl/CodeEditor.js";
import { renderLesson, renderModuleList, renderLevelIndicator, updateActiveLessonInSidebar } from "./helpers/renderer.js";
import { loadModules } from "./config/lessons.js";
import { initI18n, t, getLanguage, setLanguage, applyTranslations } from "./i18n.js";
@@ -10,7 +10,6 @@ import { getRandomTemplate } from "./config/playground-templates.js";
// CodeMirror imports for syntax highlighting
import { EditorState } from "@codemirror/state";
import { EditorView } from "@codemirror/view";
import { oneDark } from "@codemirror/theme-one-dark";
import { html } from "@codemirror/lang-html";
import { css } from "@codemirror/lang-css";
@@ -79,7 +78,7 @@ function highlightSectionCodeBlocks() {
// Create read-only CodeMirror view
const state = EditorState.create({
doc: content,
extensions: [langExtension, oneDark, readOnlyTheme, EditorState.readOnly.of(true), EditorView.lineWrapping]
extensions: [langExtension, crispyEditorTheme, readOnlyTheme, EditorState.readOnly.of(true), EditorView.lineWrapping]
});
const view = new EditorView({
@@ -2153,7 +2152,7 @@ function highlightReferenceCodeBlocks() {
const view = new EditorView({
state: EditorState.create({
doc: code,
extensions: [isHtml ? html() : css(), oneDark, readOnlyTheme, EditorState.readOnly.of(true), EditorView.editable.of(false)]
extensions: [isHtml ? html() : css(), crispyEditorTheme, readOnlyTheme, EditorState.readOnly.of(true), EditorView.editable.of(false)]
}),
parent
});