Color high-tier gear pips/diamonds to match in game visual

[ferazambuja]

Proposed change

Color the existing gear tier pips/diamonds on DIM item tiles so high-tier gear is easier to distinguish visually.

Suggested behavior:

• Tier 4 pips: purple
• Tier 5 pips: gold

This would better match Destiny’s in-game visual language and make the existing tier indicator easier to read at a glance. It also helps clarify that other item visuals, such as holofoil-style backgrounds, do not necessarily mean an item is Tier 5. In the attached examples, coloring the pips makes the actual gear tier much easier to scan across similar item tiles.

I attached screenshots from a local Tampermonkey proof of concept showing the difference.

If anyone, including the DIM devs, wants to try the idea first, the small Tampermonkey script is a quick way to test it locally: install Tampermonkey or a similar userscript extension, then paste in the code.

// ==UserScript==
// @name         Destiny Tier Pip Colors
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Colors DIM item tier markers (4=purple, 5=gold)
// @author       You
// @match        https://beta.destinyitemmanager.com/*
// @match        https://app.destinyitemmanager.com/*
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  const tier4 = 'https://www.bungie.net/img/destiny_content/items/inventory-item-tier4.png';
  const tier5 = 'https://www.bungie.net/img/destiny_content/items/inventory-item-tier5.png';

  const style = document.createElement('style');

  style.textContent = `
    .item-img {
      position: relative !important;
    }

    .item-img:has([style*="inventory-item-tier4.png"])::after,
    .item-img:has([style*="inventory-item-tier5.png"])::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 20;
      background: var(--dim-tier-color);
      -webkit-mask: var(--dim-tier-mask) center / 100% 100% no-repeat;
      mask: var(--dim-tier-mask) center / 100% 100% no-repeat;
      filter:
        drop-shadow(0 0 1px #111)
        drop-shadow(0 0 2px var(--dim-tier-color));
    }

    .item-img:has([style*="inventory-item-tier4.png"])::after {
      --dim-tier-color: #A970FF;
      --dim-tier-mask: url("${tier4}");
    }

    .item-img:has([style*="inventory-item-tier5.png"])::after {
      --dim-tier-color: #FFD700;
      --dim-tier-mask: url("${tier5}");
    }
  `;

  document.head.appendChild(style);
})();

I briefly inspected the DIM code and believe this could be implemented natively in the React/CSS path that renders item icons, since DIM already has access to item.tier. Likely relevant files are src/app/inventory/ItemIcon.tsx, src/app/inventory/ItemIcon.m.scss, and src/app/item-popup/ItemPopupHeader.tsx if maintainers want the popup header to match.

I did not want to jump straight into a PR without checking whether this is a direction the team would actually want. The Tampermonkey script was a quick way to test the idea locally, and I’m happy to try a small focused PR if this seems useful.

How does this fit into your workflow?

When scanning inventory or vault items, the current tier pips are visible but easy to miss.
Coloring Tier 4 and Tier 5 pips would make high-tier weapons and armor faster to spot during use.
It preserves the compact DIM tile layout while improving visual scanability for the user.

Purple is not the best color for legendaries, but it matches the in-game visual. Bronze, silver, and gold would make more sense.

[bhollis]

We're using the images from Bungie, which used to be tinted. So I'm guessing they just messed them up? We can wait for them to fix

[ferazambuja]

Makes sense. Meanwhile, for those who can't wait, there is my TamperMonkey script 😀
Should I leave it open until they fix it?

[bhollis]

I checked and their images actually are colorful, if not to the same degree as in game. You can hang onto your script