GitHub Vercel Theme

A Chrome extension that re-skins github.com with Vercel's clean, minimalist dark aesthetic — pure black canvas, hairline borders, Geist typography, and neutral accents in place of GitHub's blue.

Status: Beta. The theme covers the surfaces most people use daily, but GitHub is huge and ships UI changes constantly. Expect rough edges on less-trafficked pages — see Known issues below. PRs are very welcome.

Install (developer mode)

Until this is published to the Chrome Web Store, install it as an unpacked extension:

1. Download or clone this repository:

   git clone https://github.com/sak0a/github-vercel-theme-extension.git

2. Open chrome://extensions in Chrome (or any Chromium browser — Edge, Brave, Arc, Vivaldi).
3. Toggle Developer mode in the top-right corner.
4. Click Load unpacked and select the cloned folder (the one containing manifest.json).
5. Visit any page on github.com — the theme applies automatically.

To update, git pull and click the refresh icon on the extension card. To disable or uninstall, use the toggle / Remove button on chrome://extensions.

Requirements

GitHub must be set to Dark mode (Settings → Appearance → Theme → Dark, or data-color-mode="dark"). The stylesheet only targets dark-mode tokens — it intentionally won't fight your light mode.

Features

• Pure black canvas instead of GitHub's tinted #0d1117, with #111 surfaces and hairline #222 / #333 borders.
• Vercel-style typography — Geist Sans for UI, Geist Mono for code, loaded from Google Fonts.
• Neutral accents — white replaces GitHub blue across links, focus rings, selected tabs, and primary buttons. Functional colors (red errors, green merge / pass states, yellow warnings, diff add / delete tints) are preserved because they encode state, not brand.
• Single-border inputs, single-underline tabs, flat menus, and themed tooltips — all matched to Vercel's component language.
• White user mentions in place of the default blue.
• Releases tab added to repo navigation (lightweight JS — promotes the sidebar Releases section into the top tab bar).
• No tracking, no telemetry, no host permissions beyond github.com. The CSS is the bulk of the work; the JS only injects the Releases tab and caches its count in localStorage.

How it works

GitHub's UI is built on Primer, which exposes its color palette as CSS custom properties on :root[data-color-mode="dark"]. The stylesheet overrides those tokens, so the theme cascades through every Primer button, card, sidebar, diff, and timeline automatically. A small set of legacy / non-tokenized surfaces (state labels, topic tags, code blocks, the underline nav) get targeted overrides using stable selectors only — no hashed CSS-module class names that change per deploy.

Known issues

This is a beta. Some surfaces aren't fully themed yet, and GitHub occasionally ships UI rewrites that break selectors overnight. Things you may run into:

• Sporadic flashes of unthemed UI on slow connections or first paint of certain views.
• Newer/experimental GitHub features (anything behind a feature flag, recently shipped Issues redesign, Copilot panels, etc.) may show GitHub's defaults until selectors are added.
• Edge cases on settings, billing, and admin pages — these are lower priority and partially themed.
• Releases tab JS assumes a stable sidebar structure; it no-ops cleanly if GitHub changes the markup, but it can briefly miss a count.
• Minor spacing / radius inconsistencies on a handful of components.

These will (probably) be fixed in future releases. If you hit one, opening an issue with a screenshot + URL is the fastest way to get it on the list.

Contributing

Contributions are very welcome — this kind of theme lives or dies by how many eyes are on it.

Good first PRs:

• Fix a specific unthemed component (open an issue first with a screenshot if it's not obvious).
• Add a missing selector for a newly shipped GitHub view.
• Tighten spacing / radius / border tokens to better match Vercel's design language.

Guidelines:

• CSS-first. Prefer overriding Primer's CSS variables on :root[data-color-mode="dark"] over targeting elements directly. Reach for selectors only when there's no token.
• Stable selectors only. Don't rely on hashed CSS-module class names — they change every deploy.
• Don't fight light mode. All overrides should be scoped to [data-color-mode="dark"].
• Keep the JS minimal. Visual changes belong in content.css; content.js is reserved for structural tweaks like the Releases tab.
• Test on a handful of representative pages: a repo home, Issues, a PR with diffs, Actions, Settings, and your own profile.

To work on the extension, follow the install steps, then edit content.css / content.js and click the refresh icon on the extension card to reload.

Credits

• Design language inspired by Vercel and the Geist Design System.
• Built on top of Primer, GitHub's design system.
• Not affiliated with GitHub or Vercel.

License

MIT.