417 words, 3 min read

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

  1. Install Refined GitHub from your browser's extension store.
  2. Click the Refined GitHub icon in your toolbar and open its Options page.
  3. Scroll down to the Custom CSS section.
  4. Paste the CSS below and save.

The CSS

/* Draft PRs — targets the draft octicon on the PR status icon */
.js-issue-row:has(svg.octicon-git-pull-request-draft) {
border-right: 4px solid #e68934 !important;
background-color: rgba(230,137,52,0.1);
}
/* At least one approving review */
.js-issue-row:has([aria-label*="review approval"]) {
border-right: 4px solid #5eb4a7;
background-color: rgba(94, 180, 167, 0.2);
}
/* Changes Requested */
.js-issue-row:has([aria-label*="review requesting changes"]),
.js-issue-row:has([title="Changes requested"]) {
border-right: 4px solid #9b59b6;
background-color: rgba(155,89,182,0.1) !important;
}

How It Works

GitHub's PR list uses SVG status icons and review-state badges to indicate a PR's current state. The CSS uses the :has() selector to look up from those indicators to the parent row and apply a colored right border and tinted background.

Selector Meaning Color
svg.octicon-git-pull-request-draft Draft PR Orange #e68934
[aria-label*="review approval"] Approved Teal #5eb4a7
[aria-label*="review requesting changes"] Changes requested Purple #9b59b6

The Result

Head to any GitHub PR list and you'll immediately see rows highlighted by status. Approved PRs glow teal, 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.