feat: add proper color support to armor

public/resources/scss/shared.scss

@@ -54,6 +54,9 @@
   /* Normal Background */
   --bg: url(/resources/img/bg.webp);
 
+  /* Scrollbar color */
+  --scrollbar-color: #0bca51;
+
   color-scheme: dark;
 
   &.light {
@@ -1013,7 +1016,7 @@ body {
 
   *::-webkit-scrollbar-thumb {
     border-radius: 12px;
-    background-color: var(--icon-hex);
+    background-color: var(--scrollbar-color);
   }
 
   body::-webkit-scrollbar {

public/resources/scss/stats.scss

@@ -1343,7 +1343,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-admin-bg,
-.style-scrollbar .piece-admin-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-admin-bg {
   background-color: var(--§4);
 }
 .piece-admin-bg + .item-lore {
@@ -1354,7 +1354,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-supreme-bg,
-.style-scrollbar .piece-supreme-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-supreme-bg {
   background-color: var(--§4);
 }
 .piece-supreme-bg + .item-lore {
@@ -1365,7 +1365,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-very_special-bg,
-.style-scrollbar .piece-very_special-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-very_special-bg {
   background-color: var(--§c);
 }
 .piece-very_special-bg + .item-lore {
@@ -1376,7 +1376,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-special-bg,
-.style-scrollbar .piece-special-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-special-bg {
   background-color: var(--§c);
 }
 .piece-special-bg + .item-lore {
@@ -1387,7 +1387,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-divine-bg,
-.style-scrollbar .piece-divine-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-divine-bg {
   background-color: var(--§b);
 }
 .piece-divine-bg + .item-lore {
@@ -1398,7 +1398,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-mythic-bg,
-.style-scrollbar .piece-mythic-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-mythic-bg {
   background-color: var(--§d);
 }
 .piece-mythic-bg + .item-lore {
@@ -1409,7 +1409,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-legendary-bg,
-.style-scrollbar .piece-legendary-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-legendary-bg {
   background-color: var(--§6);
 }
 .piece-legendary-bg + .item-lore {
@@ -1420,7 +1420,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-epic-bg,
-.style-scrollbar .piece-epic-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-epic-bg {
   background-color: var(--§5);
 }
 .piece-epic-bg + .item-lore {
@@ -1431,7 +1431,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-rare-bg,
-.style-scrollbar .piece-rare-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-rare-bg {
   background-color: var(--§9);
 }
 .piece-rare-bg + .item-lore {
@@ -1442,7 +1442,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-uncommon-bg,
-.style-scrollbar .piece-uncommon-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-uncommon-bg {
   background-color: var(--§a);
 }
 .piece-uncommon-bg + .item-lore {
@@ -1453,7 +1453,7 @@ a.additional-player-stat:hover {
 }
 
 .piece-common-bg,
-.style-scrollbar .piece-common-bg + .item-lore::-webkit-scrollbar-thumb {
+.style-scrollbar .piece-common-bg {
   background-color: var(--§f);
 }
 .piece-common-bg + .item-lore {

public/resources/ts/globals.d.ts

@@ -126,6 +126,7 @@ interface DisplayItem {
   recombobulated: boolean | null;
   dungeon: boolean | null;
   shiny: boolean | null;
+  color: string | null;
 }
 
 interface ItemSlot {

public/resources/ts/stats-defer.ts

@@ -258,18 +258,25 @@ function fillLore(element: HTMLElement) {
 
   const itemNameString = ((item as Item).tag?.display?.Name ?? item.display_name ?? "???") as string;
   const colorCode = itemNameString.match(/^§([0-9a-fklmnor])/i);
-  if (colorCode && colorCode[1]) {
+
+  itemName.className = `item-name piece-${item.rarity || "common"}-bg nice-colors-dark`;
+  if (item.color !== undefined) {
+    itemName.style.backgroundColor = `#${item.color}`;
+  } else if (colorCode && colorCode[1]) {
     itemName.style.backgroundColor = `var(--§${colorCode[1]})`;
   } else {
     itemName.style.backgroundColor = `var(--§${(RARITY_COLORS as RarityColors)[item.rarity || "common"]})`;
   }
 
-  itemName.className = `item-name piece-${item.rarity || "common"}-bg nice-colors-dark`;
-  const itemNameHtml = renderLore((item as Item).tag?.display?.Name ?? item.display_name ?? "???");
+  const itemNameHtml = renderLore(itemNameString);
   const isMulticolor = (itemNameHtml.match(/<\/span>/g) || []).length > 1;
-  itemNameContent.dataset.multicolor = String(isMulticolor);
+
   itemNameContent.innerHTML = isMulticolor ? itemNameHtml : itemNameString.replace(/§([0-9a-fklmnor])/gi, "") ?? "???";
 
+  statsContent.style.setProperty("--scrollbar-color", itemName.style.backgroundColor);
+
+  itemNameContent.dataset.multicolor = String(isMulticolor);
+
   if (element.hasAttribute("data-pet-index")) {
     itemNameContent.dataset.multicolor = "false";
     itemNameContent.innerHTML = `[Lvl ${(item as Pet).level.level}] ${item.display_name}`;

src/stats/items/processing.js

@@ -255,6 +255,12 @@ export async function processItems(base64, source, customTextures = false, packs
       item.extra.skin = `PET_SKIN_${item.tag.ExtraAttributes.petInfo.skin}`;
     }
 
+    if (item.tag?.display?.color) {
+      const hex = item.tag.display.color.toString(16).padStart(6, "0");
+
+      item.color = hex.toUpperCase();
+    }
+
     // Set custom texture for colored leather armor
     if (typeof item.id === "number" && item.id >= 298 && item.id <= 301) {
       const color = item.tag?.display?.color?.toString(16).padStart(6, "0") ?? "955e3b";