chore(screenshot): use automad-prism-themes

Kikobeats · Kikobeats · commit f0982eafcefd · 2026-03-17T14:43:19.000+01:00
diff --git a/README.md b/README.md
@@ -419,7 +419,7 @@ The color schemes is based on the [Prism library](https://prismjs.com).
 
 ![](https://i.imgur.com/uFfviX7.png)
 
-The [Prism repository](https://github.com/PrismJS/prism-themes/tree/master?tab=readme-ov-file#available-themes) offers a wide range of themes to choose from as well as a [CDN option](https://unpkg.com/browse/prismjs@1.29.0/themes).
+The [automad-prism-themes repository](https://github.com/automadcms/automad-prism-themes) offers a wide range of themes to choose from as well as a [CDN option](https://unpkg.com/browse/automad-prism-themes@latest/dist/).
 
 ##### element
 
diff --git a/packages/screenshot/README.md b/packages/screenshot/README.md
@@ -61,17 +61,17 @@ const buffer = await browserless.screenshot('https://example.com', {
 
 ### Options
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `type` | `string` | `'png'` | Image format: `'png'`, `'jpeg'`, `'webp'` |
-| `quality` | `number` | — | Quality (0-100) for JPEG/WebP |
-| `fullPage` | `boolean` | `false` | Capture full scrollable page |
-| `element` | `string` | — | CSS selector for element screenshot |
-| `codeScheme` | `string` | `'atom-dark'` | Prism.js theme for code highlighting |
-| `waitUntil` | `string` | `'auto'` | When to consider navigation done |
-| `waitForDom` | `number` | `0` | DOM stability window in ms (idle is `waitForDom / 10`, `0` disables DOM wait) |
-| `isPageReady` | `function` | `({ isWhite }) => !isWhite` | Custom readiness predicate for retry loop |
-| `overlay` | `object` | `{}` | Browser overlay options |
+| Option        | Type       | Default                     | Description                                                                   |
+| ------------- | ---------- | --------------------------- | ----------------------------------------------------------------------------- |
+| `type`        | `string`   | `'png'`                     | Image format: `'png'`, `'jpeg'`, `'webp'`                                     |
+| `quality`     | `number`   | —                           | Quality (0-100) for JPEG/WebP                                                 |
+| `fullPage`    | `boolean`  | `false`                     | Capture full scrollable page                                                  |
+| `element`     | `string`   | —                           | CSS selector for element screenshot                                           |
+| `codeScheme`  | `string`   | `'atom-dark'`               | Prism.js theme for code highlighting                                          |
+| `waitUntil`   | `string`   | `'auto'`                    | When to consider navigation done                                              |
+| `waitForDom`  | `number`   | `0`                         | DOM stability window in ms (idle is `waitForDom / 10`, `0` disables DOM wait) |
+| `isPageReady` | `function` | `({ isWhite }) => !isWhite` | Custom readiness predicate for retry loop                                     |
+| `overlay`     | `object`   | `{}`                        | Browser overlay options                                                       |
 
 All [Puppeteer page.screenshot() options](https://pptr.dev/api/puppeteer.screenshotoptions) are supported.
 
@@ -84,10 +84,10 @@ const buffer = await browserless.screenshot(url, {
   overlay: {
     // Browser frame theme: 'dark' or 'light'
     browser: 'dark',
-    
+
     // Background: color, gradient, or image URL
     background: 'linear-gradient(225deg, #FF057C 0%, #8D0B93 50%, #321575 100%)',
-    
+
     // Margin around the screenshot (default: 0.2 = 20%)
     margin: 0.2
   }
@@ -149,8 +149,37 @@ const buffer = await browserless.screenshot('https://api.example.com/data', {
 })
 ```
 
-Available themes from [prism-themes](https://github.com/PrismJS/prism-themes):
-- `atom-dark`, `ghcolors`, `dracula`, `duotone-dark`, `duotone-light`, `material-dark`, `material-light`, `nord`, `synthwave84`, and more
+Available themes from [automad-prism-themes](https://github.com/automadcms/automad-prism-themes):
+- `atom-dark`, `github-light`, `github-dark`, `dracula`, `duotone-dark`, `duotone-light`, `nord`, `synthwave84`, `catppuccin-mocha`, `catppuccin-latte`, and [many more](https://github.com/automadcms/automad-prism-themes#available-themes)
+
+Legacy [prism-themes](https://github.com/PrismJS/prism-themes) names are supported via aliases (e.g., `ghcolors` → `github-light`, `one-dark` → `atom-one-dark`, `material-dark` → `nightfall`).
+
+Some themes also offer light/dark combo variants that bundle both modes in a single CSS file, switching automatically based on the page's dark mode class. Since screenshots render without a dark mode context, the light variant will always be used — prefer explicit themes like `github-light` or `github-dark` instead.
+
+Available combo themes: 
+
+| Combo theme                        | Light                 | Dark                    |
+| ---------------------------------- | --------------------- | ----------------------- |
+| `atom-one.light-dark`              | `atom-one-light`      | `atom-one-dark`         |
+| `automad.light-dark`               | `automad-light`       | `automad-dark`          |
+| `ayu.light-dark`                   | `ayu-light`           | `ayu-dark`              |
+| `ayu-mirage.light-dark`            | `ayu-light`           | `ayu-mirage`            |
+| `bearded-arc-blueberry.light-dark` | `bearded-vivid-light` | `bearded-arc-blueberry` |
+| `boola.light-dark`                 | `boola-light`         | `boola-dark`            |
+| `catppuccin-frappe.light-dark`     | `catppuccin-latte`    | `catppuccin-frappe`     |
+| `catppuccin-macchiato.light-dark`  | `catppuccin-latte`    | `catppuccin-macchiato`  |
+| `catppuccin-mocha.light-dark`      | `catppuccin-latte`    | `catppuccin-mocha`      |
+| `coldark.light-dark`               | `coldark-cold`        | `coldark-dark`          |
+| `github.light-dark`                | `github-light`        | `github-dark`           |
+| `gruvbox.light-dark`               | `gruvbox-light`       | `gruvbox-dark`          |
+| `night-owl.light-dark`             | `night-owl-light`     | `night-owl`             |
+| `rose-pine.light-dark`             | `rose-pine-dawn`      | `rose-pine`             |
+| `serendipity-midnight.light-dark`  | `serendipity-morning` | `serendipity-midnight`  |
+| `serendipity-sunset.light-dark`    | `serendipity-morning` | `serendipity-sunset`    |
+| `tailwind-moon-blue.light-dark`    | `tailwind-ice`        | `tailwind-moon-blue`    |
+| `tokyo-night-storm.light-dark`     | `tokyo-night-light`   | `tokyo-night-storm`     |
+| `tokyo-night.light-dark`           | `tokyo-night-light`   | `tokyo-night`           |
+| `verdandi.light-dark`              | `verdandi`            | `verdandi-alter`        |
 
 ### Smart Content Detection
 
@@ -222,22 +251,22 @@ const buffer = await browserless.screenshot('https://example.com', {
 
 This is a **core functionality package** for screenshot capture:
 
-| Consumer | Purpose |
-|----------|---------|
-| `browserless` (core) | Provides the `.screenshot()` method |
-| `@browserless/cli` | Powers the `browserless screenshot` command |
-| `@browserless/pdf` | Uses `isWhiteScreenshot` for content detection |
+| Consumer             | Purpose                                        |
+| -------------------- | ---------------------------------------------- |
+| `browserless` (core) | Provides the `.screenshot()` method            |
+| `@browserless/cli`   | Powers the `browserless screenshot` command    |
+| `@browserless/pdf`   | Uses `isWhiteScreenshot` for content detection |
 
 ### Dependencies
 
-| Package | Purpose |
-|---------|---------|
-| `@browserless/goto` | Page navigation with ad blocking |
-| `sharp` | Image composition for overlays; White/blank screenshot detection |
-| `prism-themes` | Syntax highlighting themes |
-| `svg-gradient` | Generate gradient backgrounds |
-| `got` | Fetch remote background images |
-| `is-html-content` | Detect if content is HTML vs code |
+| Package                | Purpose                                                          |
+| ---------------------- | ---------------------------------------------------------------- |
+| `@browserless/goto`    | Page navigation with ad blocking                                 |
+| `sharp`                | Image composition for overlays; White/blank screenshot detection |
+| `automad-prism-themes` | Syntax highlighting themes                                       |
+| `svg-gradient`         | Generate gradient backgrounds                                    |
+| `got`                  | Fetch remote background images                                   |
+| `is-html-content`      | Detect if content is HTML vs code                                |
 
 ## License
 
diff --git a/packages/screenshot/package.json b/packages/screenshot/package.json
@@ -45,7 +45,7 @@
     "null-prototype-object": "~1.2.5",
     "p-reflect": "~2.1.0",
     "pretty-ms": "~7.0.1",
-    "prism-themes": "~1.9.0",
+    "automad-prism-themes": "~0.3.7",
     "sharp": "~0.34.5",
     "svg-gradient": "~1.0.4"
   },
diff --git a/packages/screenshot/src/pretty/theme.js b/packages/screenshot/src/pretty/theme.js
@@ -7,16 +7,67 @@ const path = require('path')
 
 const CACHE = new NullProtoObj()
 
-const GET_THEME_PATH = () => require('prism-themes').themesDirectory
+const DEFAULT_THEME_ID = 'atom-dark'
 
-const THEME_PATH = () => CACHE.root || (CACHE.root = GET_THEME_PATH())
+const THEME_ALIASES = {
+  ghcolors: 'github-light',
+  'one-dark': 'atom-one-dark',
+  'one-light': 'atom-one-light',
+  darcula: 'atom-one-dark',
+  'a11y-dark': 'github-dark',
+  cb: 'gruvbox-dark',
+  'coy-without-shadows': 'github-light',
+  'holi-theme': 'aura-dark',
+  hopscotch: 'dracula',
+  lucario: 'dark-space',
+  'material-dark': 'nightfall',
+  'material-light': 'catppuccin-latte',
+  'material-oceanic': 'nightfall',
+  pojoaque: 'gruvbox-dark',
+  vs: 'github-light',
+  xonokai: 'dracula',
+  'z-touch': 'poimandres'
+}
+
+const GET_THEME_PATHS = () => {
+  const packageRoot = path.dirname(require.resolve('automad-prism-themes/package.json'))
+  const { themesDirectory } = require('automad-prism-themes')
+
+  return [themesDirectory, path.resolve(packageRoot, 'dist'), packageRoot].filter(Boolean)
+}
+
+const THEME_PATHS = () => CACHE.root || (CACHE.root = GET_THEME_PATHS())
+
+const readTheme = async themeId => {
+  const ids = [themeId]
+  const alias = THEME_ALIASES[themeId]
+  if (alias) ids.push(alias)
+
+  for (const id of ids) {
+    for (const dirPath of THEME_PATHS()) {
+      try {
+        return await readFile(path.resolve(dirPath, `prism-${id}.css`))
+      } catch (error) {
+        if (error.code !== 'ENOENT') throw error
+      }
+    }
+  }
+
+  throw new Error(`Unable to resolve Prism theme: ${themeId}`)
+}
 
 module.exports = async themeId => {
   if (isHttpUrl(themeId)) return `<link rel="stylesheet" type="text/css" href="${themeId}">`
 
-  const stylesheet =
-    CACHE[themeId] ||
-    (CACHE[themeId] = await readFile(path.resolve(THEME_PATH(), `prism-${themeId}.css`)))
+  try {
+    CACHE[themeId] = CACHE[themeId] || (await readTheme(themeId))
+  } catch (error) {
+    if (themeId !== DEFAULT_THEME_ID) {
+      CACHE[themeId] = CACHE[themeId] || (await readTheme(DEFAULT_THEME_ID))
+    } else {
+      throw error
+    }
+  }
 
-  return `<style>${stylesheet}</style>`
+  return `<style>${CACHE[themeId]}</style>`
 }
diff --git a/packages/screenshot/src/pretty/themes/prism-ghcolors.css b/packages/screenshot/src/pretty/themes/prism-ghcolors.css
@@ -0,0 +1,122 @@
+/**
+ * GHColors theme by Avi Aryan (http://aviaryan.in)
+ * Inspired by Github syntax coloring
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+        color: #393A34;
+        font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+        direction: ltr;
+        text-align: left;
+        white-space: pre;
+        word-spacing: normal;
+        word-break: normal;
+        font-size: .9em;
+        line-height: 1.2em;
+
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+
+        -webkit-hyphens: none;
+        -moz-hyphens: none;
+        -ms-hyphens: none;
+        hyphens: none;
+}
+
+pre > code[class*="language-"] {
+        font-size: 1em;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+        background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+        background: #b3d4fc;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+        padding: 1em;
+        margin: .5em 0;
+        overflow: auto;
+        border: 1px solid #dddddd;
+        background-color: white;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+        padding: .2em;
+        padding-top: 1px;
+        padding-bottom: 1px;
+        background: #f8f8f8;
+        border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+        color: #999988;
+        font-style: italic;
+}
+
+.token.namespace {
+        opacity: .7;
+}
+
+.token.string,
+.token.attr-value {
+        color: #e3116c;
+}
+
+.token.punctuation,
+.token.operator {
+        color: #393A34; /* no highlight */
+}
+
+.token.entity,
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.property,
+.token.regex,
+.token.inserted {
+        color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-name,
+.language-autohotkey .token.selector {
+        color: #00a4db;
+}
+
+.token.function,
+.token.deleted,
+.language-autohotkey .token.tag {
+        color: #9a050f;
+}
+
+.token.tag,
+.token.selector,
+.language-autohotkey .token.keyword {
+        color: #00009f;
+}
+
+.token.important,
+.token.function,
+.token.bold {
+        font-weight: bold;
+}
+
+.token.italic {
+        font-style: italic;
+}
diff --git a/packages/screenshot/test/snapshots/pretty.js.md b/packages/screenshot/test/snapshots/pretty.js.md
diff --git a/packages/screenshot/test/snapshots/pretty.js.snap b/packages/screenshot/test/snapshots/pretty.js.snap
