525 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

/* 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.