A browser extension that themes GitHub. Click it, pick a theme or set your own colors, and every open GitHub tab repaints. That includes the contribution graph, which normally stays green or switches to whatever GitHub picks for a holiday.
The repo also has a GitHub Action that draws your contribution graph as an SVG in your colors, so visitors to your profile see them too.
The extension isn't in the Chrome Web Store or on Firefox Add-ons yet. To load it from this repo in Chrome, Edge, Brave or Arc:
- On the repo page, click Code, then Download ZIP, and unzip it.
- Open
chrome://extensions, turn on Developer mode, click Load unpacked and pick theextensionfolder. - Reload any GitHub or Gist tabs you already had open, then click GitHub Reskin in your browser's extensions menu to pick a theme.
Firefox only keeps an unsigned extension until it restarts, and Safari can't load one at all. For those browsers, GitHub Reskin also comes as a userscript with the same themes and color card, and it stays installed.
- Install a userscript manager. In Firefox, use Violentmonkey or Tampermonkey. In Safari on a Mac, iPhone or iPad, use Userscripts or Tampermonkey. Safari asks you to turn the extension on in its settings and allow it on github.com.
- Open github-reskin.user.js and install it from your manager's prompt. In Userscripts, the prompt is under its toolbar button.
- Reload any GitHub or Gist tabs you already had open.
To pick a theme, choose Theme and colors from your manager's menu. Userscripts has no menu, so open https://github.com/#reskin instead. Click outside the card or press Escape to close it. Other GitHub tabs pick up your change when you switch back to them.
You can also try the extension itself in Firefox 140 or newer. Open about:debugging#/runtime/this-firefox, click Load Temporary Add-on and pick extension/manifest.json. Firefox removes it when it restarts.
Twelve themes come with it. The dark ones are Editing Suite, Dracula, Nord, Catppuccin Mocha, Gruvbox, Tokyo Night, Rosé Pine, One Dark and Solarized Dark. The light ones are Catppuccin Latte, Rosé Pine Dawn and Solarized Light.
Under the themes you can change four colors: background, text, accent and the contribution graph. GitHub Reskin works out the rest, like borders, muted text and button colors. "Reset to theme" puts the theme's colors back, and the switch at the top turns the theme off.
It adjusts the colors it works out so they stay readable:
- Muted text and links move toward your text color until they reach WCAG AA contrast, 4.5:1.
- Primary buttons get a darker shade of your accent when GitHub's white button text wouldn't read on the accent itself.
- If your text color is hard to read on your background, the popup warns you. GitHub's main text still uses your color, but borders, muted text and links are then worked out from black or white instead.
The extension recolors github.com and gist.github.com through the color variables GitHub's own CSS uses. A dark theme also brings in GitHub's standard dark colors for code, diffs and labels, and a light theme brings the light ones. These replace whatever palette your GitHub account uses, including dimmed, high contrast, colorblind and tritanopia, so code stays readable under any theme. If you use a colorblind palette, diffs go back to GitHub's standard red and green while a theme is on.
Your settings stay in the browser, and the extension makes no network requests. The userscript runs the same code and keeps your settings in the userscript manager's storage. The manager checks this repo for userscript updates. Both cache the generated CSS in github.com's local storage, so a full page load doesn't flash GitHub's own colors first.
Themes live in extension/themes.js. A theme needs an id, a name and four colors: bg, text, accent and graph. You can also give surface, border and muted if the original palette has them. Run node --test to check that every theme keeps its text, links and button text readable.
GitHub's standard light and dark colors live in extension/github-modes.js, which is generated. If GitHub changes its colors, node scripts/github-modes.mjs rebuilds that file from github.com's current CSS.
The userscript in userscript/github-reskin.user.js is generated too, from the extension and userscript/main.js. After changing either, run node scripts/userscript.mjs. node --test fails while the userscript is out of date. Userscript managers only install an update when its version goes up, so raise version in extension/manifest.json when you change what users see.
The extension only changes what you see. To show your colors to everyone who visits your profile, add this workflow to your profile repo, the one named after you, like you/you. Save it as .github/workflows/contributions.yml:
name: Contribution graph
on:
schedule:
- cron: "17 6 * * *"
workflow_dispatch:
permissions:
contents: write
jobs:
update:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v5
- uses: sidebandstudio/GitHub-Reskin@v1
with:
output: assets/contributions.svg
color: "#f2a93b"
- name: Commit if changed
run: |
git add assets/contributions.svg
if git diff --cached --quiet; then exit 0; fi
git config user.name "github-actions[bot]"
git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
git commit -m "Refresh contribution graph [skip ci]"
git pull --rebase
git pushRun it once from the Actions tab, then put this in your README:
<img src="assets/contributions.svg" alt="My GitHub contributions over the last year" width="100%">The workflow redraws the graph once a day, starting around 06:17 UTC. GitHub can start scheduled runs late. It reads the same calendar GitHub uses, through the GraphQL API, so busy and quiet days shade the way they do on your profile. GitHub still shows its own graph under your README, since there's no setting to hide it.
| Input | Default | What it does |
|---|---|---|
username |
owner of the repo | Whose graph to draw. Set this when the repo belongs to an organization. |
color |
#f2a93b |
Color of the busiest days. Quieter days get fainter mixes of it. |
background |
#0a0a0b |
Panel color |
text |
#ededea |
Text color. Empty days and labels are mixed from it. |
output |
contributions.svg |
Where the SVG goes |
token |
the workflow token | Token for the GraphQL API |
Colors are 6-digit hex, with or without the #. Quote them when you include the #, because YAML reads an unquoted # as the start of a comment. With the default workflow token, the graph shows what visitors see on your profile. That includes private contributions as plain counts if you turned on "Include private contributions on my profile" in your GitHub settings.
To run it on your own computer, you need Node 20 or newer and a GitHub token. With the GitHub CLI:
GITHUB_TOKEN=$(gh auth token) node index.mjs --username you --color "#7c5cff" --output contributions.svgThe theme palettes come from these MIT-licensed projects:
Editing Suite is the amber and near-black from Ali Tleis's profile.
MIT