Azure DevOps: Colour Code Tags v1.0.0

← Back to Stylus Rules

Applies colour coding to specific tags in Azure DevOps work items for quick visual identification.

What it does

This style rule colour-codes tags which are of particular interest to me:

  • Red tags: "On Hold" and "Blocked"
  • Orange tags: "Mike"
  • Blue tags: "TKO"

This makes it easy to quickly scan work item lists and identify items needing attention or specific categorisation.

You can install this rule and then modify the CSS to highlight tags that are important to you.

Install Style

Style Content

/* ==UserStyle==
@name           Azure DevOps: Colour Code Tags
@namespace      https://www.timhilton.xyz/stylus-rules/
@version        1.0.0
@description    Applies color coding to specific tags in Azure DevOps work items for quick visual identification
@author         Tim Hilton
@homepageURL    https://www.timhilton.xyz/stylus-rules/azure-devops/colour-code-tags/
@updateURL      https://www.timhilton.xyz/stylus-rules/azure-devops/colour-code-tags/latest/colour-code-tags.user.css
==/UserStyle==*/

@-moz-document domain("dev.azure.com") {
/* Color-codes specific tags for quick visual identification.
   The aria-label selector uses $= (ends with) because the query view adds a space at the beginning. */

.bolt-pill:has([aria-label$="On Hold"]) {
    background: red;
}

.bolt-pill:has([aria-label$="Blocked"]) {
    background: red;
}

.bolt-pill:has([aria-label$="Mike"]) {
    background: orange;
}

.bolt-pill:has([aria-label$="TKO"]) {
    background: blue;
}
}