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

[data-listview-component="items-list"] li:has([data-testid="review-decision-compact"][aria-label*="approval"]) {
    border-right: 4px solid #5eb4a7;
    background-color: rgba(94, 180, 167, 0.1);
}
[data-listview-component="items-list"] li:has([data-testid="review-decision-compact"][aria-label*="changes"]) , [data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] button[aria-label*="Changes requested"]){
    border-right: 4px solid #9b59b6;
    background-color: rgba(255, 89, 182, 0.1);
}
[data-listview-component="items-list"] li:has(svg[aria-label="Draft pull request"]) {
    border-right: 4px solid #e68934;
    background-color: rgba(230, 137, 52, 0.1);
}
[data-listview-component="items-list"] li:has(.commit-ref) {
    border-right: 4px solid #0369a1;
    background-color: rgba(3, 105, 161, 0.05);
}
[data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] .octicon-check-circle-fill), [data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] button[aria-label*="Approved"]) {
    border-right: 4px solid #5eb4a7;
    background-color: rgba(94, 180, 167, 0.1);
}
[data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] .octicon-x-circle-fill), [data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] button[aria-label*="Changes requested"]) {
    border-right: 4px solid #9b59b6;
    background-color: rgba(255, 89, 182, 0.1);
}
[data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] .octicon-no-entry-fill):has(.octicon-comment) {
    border-right: 4px solid #e84393;
    background-color: rgba(232, 67, 147, 0.1);
}
[data-listview-component="items-list"] li:has([data-testid="review-decision-compact"][aria-label*="Review required"]):has(.octicon-comment) {
    border-right: 4px solid #e84393;
    background-color: rgba(232, 67, 147, 0.1);
}

@media (prefers-color-scheme: dark) {
    [data-listview-component="items-list"] li:has([data-testid="review-decision-compact"][aria-label*="approval"]) {
        background-color: rgba(94, 180, 167, 0.25);
    }
    [data-listview-component="items-list"] li:has([data-testid="review-decision-compact"][aria-label*="changes"]), [data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] button[aria-label*="Changes requested"]) {
        background-color: rgba(255, 89, 182, 0.25);
    }
    [data-listview-component="items-list"] li:has(svg[aria-label="Draft pull request"]) {
        background-color: rgba(230, 137, 52, 0.25);
    }
    [data-listview-component="items-list"] li:has(.commit-ref) {
        background-color: rgba(3, 105, 161, 0.05);
    }
    [data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] .octicon-check-circle-fill), [data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] button[aria-label*="Approved"]) {
        background-color: rgba(94, 180, 167, 0.25);
    }
    [data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] .octicon-x-circle-fill), [data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] button[aria-label*="Changes requested"]) {
        background-color: rgba(255, 89, 182, 0.25);
    }
    [data-listview-component="items-list"] li:has([data-testid="review-decision-icon"] .octicon-no-entry-fill):has(.octicon-comment) {
        background-color: rgba(232, 67, 147, 0.25);
    }
    [data-listview-component="items-list"] li:has([data-testid="review-decision-compact"][aria-label*="Review required"]):has(.octicon-comment) {
        background-color: rgba(232, 67, 147, 0.25);
    }
}

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.