If you spend a lot of time reviewing pull requests on GitHub, you've probably wished the PR list gave you more visual signal at a glance. Which PRs are approved and ready to merge? Which ones have a reviewer blocking them? Which are still drafts?
With the Refined GitHub browser extension and a few lines of custom CSS, you can color-code your PR list to answer all of those questions instantly.
What You'll Need
- Refined GitHub — a browser extension for Chrome, Firefox, and Safari that enhances the GitHub UI with dozens of quality-of-life improvements. One of its lesser-known features is the ability to inject your own custom CSS.
Setting Up Custom CSS in Refined GitHub
- Install Refined GitHub from your browser's extension store.
- Click the Refined GitHub icon in your toolbar and open its Options page.
- Scroll down to the Custom CSS section.
- Paste the CSS below and save.
The CSS
/* Approved — green */
.js-issue-row:has([aria-label*="approval"]) > div {
border-right: 4px solid #5eb4a7;
background-color: rgba(94,180,167,0.2);
}
/* Changes requested — purple */
.js-issue-row:has([aria-label*="changes"]) > div {
border-right: 4px solid #9b59b6;
background-color: rgba(155,89,182,0.1) !important;
}
/* Review required (no review yet) — yellow */
.js-issue-row:has([aria-label*="Review required"]) > div {
border-right: 4px solid #f0c040;
background-color: rgba(240,192,64,0.1);
}
/* Draft — orange */
.js-issue-row:has([aria-label*="Draft"]) > div {
border-right: 4px solid #e68934 !important;
background-color: rgba(230,137,52,0.1);
}
/* No review badge (e.g. merged into another branch) — grey */
.js-issue-row:has(.commit-ref) > div {
border-right: 4px solid #ddd;
background-color: rgb(240,240,240);
}
How It Works
GitHub's PR list items each have a small review-status badge — an <a> tag with an aria-label describing the current review state. The CSS uses the :has() selector to look up from the badge to the parent row and apply a colored left border and tinted background.
aria-label contains |
Meaning | Color |
|---|---|---|
approval |
At least one approval | Teal / green |
changes |
At least one "changes requested" | Purple |
Review required |
Review required but none submitted yet | Yellow |
Draft |
PR is a draft | Orange |
.commit-ref class |
No review badge present | Grey |
The selector order matters: approval and changes are checked first so a PR with an approval doesn't accidentally match a broader rule.
The Result
Head to any GitHub PR list and you'll immediately see rows highlighted by status. Approved PRs glow green, blocked ones turn purple, and drafts stand out in orange — no more scanning each row individually.
It's a small change, but when you're triaging dozens of open PRs every day, the visual grouping saves a surprising amount of time.
If this post was enjoyable or useful for you, please share it! If you have comments, questions, or feedback, you can email my personal email. To get new posts, subscribe use the RSS feed.