GitHub Syntax Themes

A browser extension that lets you apply custom syntax highlighting themes to GitHub code blocks, gists, and Markdown snippets.

It works by injecting CSS overrides into GitHub’s existing syntax system and mapping theme values to GitHub’s internal token classes (.pl-*) and modern PrettyLights CSS variables.

GitHub has its own built-in syntax highlighting system.

This extension overrides it by:

• Mapping theme colors to GitHub token classes (.pl-c, .pl-k, .pl-s, etc.)
• Injecting CSS variables for GitHub’s PrettyLights syntax system
• Applying themes across:
  • Code blocks
  • Pull request diffs
  • File views
  • Markdown snippets

In short:

You choose a theme → GitHub gets recolored

GitHub Syntax Themes can be installed on any Chromium-based browser (Chrome, Edge, Opera, Brave, Vivaldi, Arc, etc.) and Firefox.

Clone the repository and build it:

git clone https://github.com/calebephrem/github-syntax-themes.git
cd github-syntax-themes

npm install

# For chromium based browsers:
npm run build

# For firefox:
npm run build:firefox

After building, a production-ready extension will be generated inside the dist/ directory.

Open the extension management page for your browser:

For Chromium-based browsers:

1. Open the Extensions page.
2. Enable Developer Mode.
3. New options such as Load unpacked will appear.

Firefox users can skip this step.

1. Click Load unpacked.
2. Go to the extension's dist/ folder and select chrome-mv3.
3. The extension should appear immediately in your installed extensions list.

1. Open about:addons.
2. Click the gear icon.
3. Select Install Add-on From File...
4. Go to the extension's dist/ folder and select firefox-mv2.

1. Open any GitHub repository.
2. Click the GitHub Syntax Themes icon in your browser toolbar.
3. Choose a theme.
4. Voila.

Your selected theme will automatically be applied to:

• Repository files
• Pull request diffs
• Markdown code blocks
• GitHub code views

When a new version is released:

1. Pull down the latest release.
2. Reload the extension from your browser's extension page.

Your saved theme preferences will remain intact.

You can remove the extension at any time from your browser's extension manager.

Removing the extension restores GitHub's default syntax highlighting immediately.

You can install GitHub Syntax Themes depending on your browser.

Themes are not bundled inside the extension.

Instead, they are pulled from a separate theme repository:

👉 https://github.com/calebephrem/github-syntax-theme-store

Each theme is defined like:

syntaxHighlighting: {
  keyword: "#ff79c6",
  string: "#f1fa8c",
  comment: "#6272a4",
  functionName: "#50fa7b"
}

The extension automatically converts these values into GitHub-compatible styles.

Two styling layers are applied:

.pl-k {
  color: #ff79c6 !important;
}

:root {
  --color-prettylights-syntax-keyword: #ff79c6 !important;
}

This ensures compatibility across both old and new GitHub UI systems.

• Fully custom GitHub syntax highlighting
• Lightweight CSS injection (no DOM rewriting)
• Instant theme switching
• Works across code, diffs, and markdown
• Multi-browser support via WXT

• WXT (browser extension framework)
• React (popup UI)
• TypeScript
• TailwindCSS
• Lucide icons

Install dependencies:

npm install

Run development build:

npm run dev

Build extension:

npm run build

We welcome contributions to both the browser extension and the theme collection. If you’d like to add a new theme or improve an existing one, please submit it to the dedicated theme repository:

👉 https://github.com/calebephrem/github-syntax-theme-store

MIT © Caleb Ephrem