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)

src/impl/CodeEditor.js

@@ -5,13 +5,88 @@ import { EditorState, Prec } from "@codemirror/state";
 import { EditorView, keymap, placeholder } from "@codemirror/view";
 import { defaultKeymap, historyKeymap, indentMore, indentLess, undo, redo } from "@codemirror/commands";
 import { history } from "@codemirror/commands";
-import { oneDark } from "@codemirror/theme-one-dark";
 import { html } from "@codemirror/lang-html";
 import { css } from "@codemirror/lang-css";
 import { autocompletion } from "@codemirror/autocomplete";
 import { abbreviationTracker, expandAbbreviation } from "@emmetio/codemirror6-plugin";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
 
-// Custom overrides for One Dark theme
+// Custom theme with purple accent colors (matching app completed state)
+const crispyTheme = EditorView.theme(
+	{
+		"&": {
+			backgroundColor: "#262630",
+			color: "#c8c8d0"
+		},
+		".cm-content": {
+			caretColor: "#9b6dd4"
+		},
+		".cm-cursor, .cm-dropCursor": {
+			borderLeftColor: "#9b6dd4"
+		},
+		"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+			backgroundColor: "#3e3e4a"
+		},
+		".cm-panels": {
+			backgroundColor: "#262630",
+			color: "#c8c8d0"
+		},
+		".cm-searchMatch": {
+			backgroundColor: "#3e3e4a",
+			outline: "1px solid #9b6dd4"
+		},
+		".cm-searchMatch.cm-searchMatch-selected": {
+			backgroundColor: "rgba(155, 109, 212, 0.3)"
+		},
+		".cm-activeLine": {
+			backgroundColor: "#2e2e3a"
+		},
+		".cm-selectionMatch": {
+			backgroundColor: "#3e3e4a"
+		},
+		".cm-gutters": {
+			backgroundColor: "#262630",
+			color: "#808090",
+			border: "none"
+		},
+		".cm-activeLineGutter": {
+			backgroundColor: "#2e2e3a"
+		},
+		".cm-lineNumbers .cm-gutterElement": {
+			color: "#808090"
+		}
+	},
+	{ dark: true }
+);
+
+// Syntax highlighting with purple accent
+const crispyHighlight = HighlightStyle.define([
+	{ tag: tags.keyword, color: "#c9a6eb" },
+	{ tag: tags.operator, color: "#cdd6f4" },
+	{ tag: tags.variableName, color: "#89b4fa" },
+	{ tag: tags.propertyName, color: "#89b4fa" },
+	{ tag: tags.attributeName, color: "#89b4fa" },
+	{ tag: tags.className, color: "#89b4fa" },
+	{ tag: tags.tagName, color: "#c9a6eb" },
+	{ tag: tags.string, color: "#a6e3a1" },
+	{ tag: tags.number, color: "#fab387" },
+	{ tag: tags.bool, color: "#fab387" },
+	{ tag: tags.null, color: "#fab387" },
+	{ tag: tags.comment, color: "#6c7086", fontStyle: "italic" },
+	{ tag: tags.bracket, color: "#cdd6f4" },
+	{ tag: tags.punctuation, color: "#cdd6f4" },
+	{ tag: tags.definition(tags.variableName), color: "#89b4fa" },
+	{ tag: tags.function(tags.variableName), color: "#89b4fa" },
+	{ tag: tags.atom, color: "#c9a6eb" },
+	{ tag: tags.unit, color: "#a6e3a1" },
+	{ tag: tags.color, color: "#f9e2af" }
+]);
+
+// Combined theme export
+export const crispyEditorTheme = [crispyTheme, syntaxHighlighting(crispyHighlight)];
+
+// Custom overrides for editor styling
 const editorTheme = EditorView.theme(
 	{
 		"&": {
@@ -51,7 +126,7 @@ export class CodeEditor {
 		// Build extensions array
 		const extensions = [
 			langExtension,
-			oneDark,
+			crispyEditorTheme,
 			editorTheme,
 			// History for undo/redo
 			history(),