prism-themes

Prism Themes is the de-facto companion package for Prism.js, packaging more than three dozen community-designed CSS themes that replicate popular editor color schemes — Dracula, Nord, One Dark, Gruvbox, Material, Solarized, and more — as simple drop-in stylesheets.

Rather than shipping application code, the repository is organized as a curated CSS library with a lightweight gulp-based build (minification, screenshot generation, and consistency checks) and a shared theme template so new themes stay visually and structurally consistent with the existing set.

What You Get

• 37 ready-to-use CSS theme files covering popular editor aesthetics (Dracula, Nord, One Dark/Light, Gruvbox, Material, Solarized, Synthwave ‘84, and more)
• A shared theme template (template/prism-theme-template.css) plus matching plugin stylesheets (line-highlight, line-numbers, toolbar, diff-highlight, match-braces, treeview) so plugin UI shares the same visual language as the base theme
• Minified .min.css builds generated via the project’s gulp pipeline for production use
• Consistent, source-attributed themes — each one credited to its original author or adapter in the README

Common Use Cases

• Swapping Prism.js’s default theme for a specific editor look (Dracula, One Dark, Nord) on a docs site or blog
• Matching a code-highlighting theme to an app’s existing light/dark design system
• Building a custom highlighting theme by starting from the shared prism-theme-template.css
• Pairing a theme with Prism plugin stylesheets (line numbers, line highlighting, toolbar) for a fully themed code-block experience

Under The Hood

Architecture The repository has no runtime application logic — index.js merely exports the absolute path to the themes/ directory for consumers that resolve theme files programmatically, while the real content lives as flat, independent CSS files in themes/ and companion plugin overrides in template/. The build/QA layer is where structure actually lives: gulpfile.js defines discrete tasks (screenshot, screenshot-all, check, linkify, minify) that operate uniformly across every theme by reading the themes/ directory listing at runtime, so adding a new theme requires no changes to the build pipeline itself — the CI-facing check task (screenshot presence + README entry checks) enforces consistency instead of a code-level abstraction.

Tech Stack The project is npm-published pure CSS with no runtime dependencies; its devDependencies cover the entire toolchain — gulp 4 as the task runner, gulp-clean-css/gulp-rename for producing minified .min.css builds, capture-website (a headless-browser screenshot tool) for regenerating the README’s theme preview images, and stylelint with stylelint-config-standard for linting the theme CSS itself. There is no bundler, transpiler, or server component — npm run build is just gulp minify, and the published package (per the files field) ships only the themes/*.css output.

Code Quality There are no JavaScript unit tests and no test framework — quality is enforced entirely through stylelint (npm run lint) and a custom gulp check task that programmatically verifies every theme file in themes/ has a matching screenshot in screenshots/ and a corresponding entry in README.md, failing the build if a contributor forgets either. Naming is consistent (prism-<theme-name>.css), and CONTRIBUTING.md codifies concrete style rules for new theme submissions, which substitutes for automated logic testing given the project’s CSS-only nature.

API Design As a CSS-only package there’s no traditional API surface to design around ergonomics — the entire integration is a single <link> tag, about as low-friction as a syntax-highlighting integration can get. Its real differentiator is curatorial and process-oriented rather than technical: a shared theme template plus enforced screenshot/README consistency checks turn a normally ad-hoc, scattered pattern of one-off Prism theme gists into a maintained, attributed, discoverable theme index.