@codemirror/theme-one-dark

@codemirror/theme-one-dark packages the popular One Dark color scheme (originally from the vscode-one-dark-theme project) as a drop-in CodeMirror 6 extension. It exports a single oneDark extension that bundles both the editor chrome styling (oneDarkTheme, built with EditorView.theme()) and the token-level syntax highlighting (oneDarkHighlightStyle, built with @codemirror/language’s HighlightStyle against Lezer’s standard tags), so adding dark-mode syntax highlighting to an editor is a single line of configuration.

The package also exports its raw color palette object, letting consumers reuse the same hex values (chalky, coral, cyan, malibu, sage, and others) to build custom UI around the editor that visually matches the theme.

What You Get

• A single oneDark extension combining editor-chrome theming and syntax highlighting, ready to add to a CodeMirror 6 EditorState
• oneDarkTheme, the editor-chrome styles alone, for consumers who want to pair it with a different highlight style
• oneDarkHighlightStyle, the syntax-token color mapping alone, built against Lezer’s standard highlighting tags
• An exported color object with all the theme’s raw hex values for building matching custom UI around the editor

Common Use Cases

• Adding a polished, widely-recognized dark theme to a CodeMirror 6-based code editor with a single extension
• Building developer tools, playgrounds, or documentation sites that want visual parity with VS Code’s popular One Dark theme
• Reusing the theme’s exported color palette to style surrounding editor chrome (toolbars, panels) to match the editor itself
• Serving as a reference implementation for developers writing their own custom CodeMirror 6 theme extensions

Under The Hood

Architecture: The entire package is a single ~150-line file, src/one-dark.ts, split into three exports: a color constant object holding named hex values, oneDarkTheme (an EditorView.theme() call mapping CSS selectors like .cm-content, .cm-selectionBackground, and .cm-panels to those colors), and oneDarkHighlightStyle (a HighlightStyle.define() call mapping Lezer’s semantic highlight tags — keywords, strings, comments, etc. — to colors and font styles); oneDark is simply [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)], composing both into one Extension array. Tech Stack: TypeScript compiled via the shared CodeMirror build tooling (cm-buildhelper), with @codemirror/view, @codemirror/state, @codemirror/language, and @lezer/highlight as its only dependencies — all core CodeMirror 6 packages, meaning this theme package builds entirely on public, stable APIs. Code Quality: Being a static style-mapping module rather than executable logic, there isn’t traditional branching to unit-test; correctness is validated through the shared cm-runtests harness used across CodeMirror packages and, in practice, visually by comparison against the reference vscode-one-dark-theme project cited directly in a source comment. API Design: The three-tier export (oneDark for the common case, oneDarkTheme/oneDarkHighlightStyle for consumers who want to mix and match, plus the raw color palette) is a clean, minimal-boilerplate pattern that other CodeMirror theme packages in the ecosystem follow, making it easy to use as-is or as a template for authoring a custom theme.