GitHub Colorize Project View

README.md

GitHub Colorization Bookmarklet and Custom Style

A bookmarklet for visualizing different card types in the GitHub project view better.

To create the bookmarklet, use a minifyer (like Minify for VS Code), or a tool like Bookmarklet builder.

Add the minified code as a bookmarklet (start with javascript:).

Alternatively, use the custom style file with e.g. Stylus. This is the preferred option if you’re able to install an extension to the browser (the bookmarklet requires activation every time but does not require installing anything).

There’s also an additional style file for emphasizing cards assigned to you (with a border and shadow).

code.js

javascript: function findTypeIndicators(label) {
  return document.querySelectorAll(`svg[aria-label="${label}"]`);
}
function changeBgColor(label, newColor) {
  findTypeIndicators(label).forEach((node) => {
    var card =
      node.parentElement.parentElement.parentElement.parentElement.parentElement
        .parentElement;
    card.style.backgroundColor = newColor;
  });
}
function colorCards() {
  changeBgColor('Merged pull request', '#efe');
  changeBgColor('Draft pull request', '#eee');
  changeBgColor('Open pull request', 'lightyellow');
  changeBgColor('Open issue', '#eef');
}
function addScrollListener(node) {
  node.addEventListener('scrollend', colorCards);
}
function addScrollListenerToDropZone(zoneName) {
  addScrollListener(
    document.querySelector(`div[data-testid= "drop-zone-${zoneName}"]`)
  );
}
/**
 * GitHub renders only visible parts --
 * re-running coloring required after scrolling the view.
 */
function addScrollListeners() {
  // add listeners to the columns that matter
  addScrollListenerToDropZone('In Progress');
  addScrollListenerToDropZone('Review');
  addScrollListenerToDropZone('Done');
  // horizontal scroll to reveal more columns
  addScrollListener(document.querySelector('div[data-dnd-drop-id="board"]'));
}
addScrollListeners();
colorCards();

code.min.js

javascript:function changeBgColor(e,r){findTypeIndicators(e).forEach(e=>{var o=e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;o.style.backgroundColor=r})}function colorCards(){changeBgColor("Merged pull request","#efe"),changeBgColor("Draft pull request","#eee"),changeBgColor("Open pull request","lightyellow"),changeBgColor("Open issue","#eef")}function addScrollListener(e){e.addEventListener("scrollend",colorCards)}function addScrollListenerToDropZone(e){addScrollListener(document.querySelector(`div[data-testid= "drop-zone-${e}"]`))}function addScrollListeners(){addScrollListenerToDropZone("In Progress"),addScrollListenerToDropZone("Review"),addScrollListenerToDropZone("Done"),addScrollListener(document.querySelector('div[data-dnd-drop-id="board"]'))}function findTypeIndicators(e){return document.querySelectorAll(`svg[aria-label="${e}"]`)}addScrollListeners(),colorCards();

stylus-assigned-cards.css

/* ==UserStyle==
@name           GitHub Project View Mine - Jan 2024
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Emphasize GitHub project view cards assigned to a user
@author         [email protected]
==/UserStyle== */
@-moz-document regexp("https://github.com/.*/projects/.*") {
  div[data-testid="board-view-column-card"]:has(img[alt="YOUR_GITHUB_USERNAME_HERE"]) {
    border: 2px outset teal;
    box-shadow: 3px 3px 4px darkgray;
  }
}

stylus.css

/* ==UserStyle==
@name           GitHub Project View - Jan 2024
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Colorize GitHub project view cards to highlight PRs done or waiting for review
@author         [email protected]
==/UserStyle== */
@-moz-document regexp("https://github.com/.*/projects/.*") {
  div[data-testid="board-view-column-card"]:has([aria-label="Draft pull request"]) > div {
    background-color: #eee;
  }
  div[data-testid="board-view-column-card"]:has([aria-label="Merged pull request"]) > div {
    background-color: #dfd;
  }
  div[data-testid="board-view-column-card"]:has([aria-label="Open pull request"]) > div {
    background-color: #ffd;
  }
  div[data-testid="board-view-column-card"]:has([aria-label="Open issue"]) > div {
    background-color: #eef;
  }
  div[data-testid="board-view-column-card"]:has([aria-label="Closed as completed issue"]) > div {
    background-color: #eff;
  }
  div[data-testid="board-view-column-card"]:has([aria-label="Draft issue"]) > div {
    background-color: #eee;
  }
  div[data-testid="board-view-column-card"]:has([aria-label="Open issue"]) > div {
    background-color: #fff;
  }
}