From a412ca7cbc754361037eb4318f5bfc42b306f0f3 Mon Sep 17 00:00:00 2001
From: oliver <zhoutianjun127@126.com>
Date: Wed, 5 Aug 2026 09:34:29 +0800
Subject: [PATCH] Preserve NE icon white textures when applying vendor tint
 colors.

Layer the original PNG under a color blend tint so luminosity highlights stay visible while brand hues remain editable.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/index.css              | 19 ++++++++++++++++++-
 web/src/pages/TopologyPage.tsx | 12 ++++++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index b49ccee..f1575e9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -7132,13 +7132,30 @@ pre {
 }
 
 .topo-node__icon {
+  position: relative;
   display: block;
   width: 56px;
   height: 56px;
   margin: 0;
   pointer-events: none;
   user-select: none;
+  isolation: isolate;
+  transition: transform 0.12s ease;
+}
+
+.topo-node__icon-art {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Recolor hue/sat from --topo-icon-color; keep luminosity so white textures remain. */
+.topo-node__icon-tint {
+  position: absolute;
+  inset: 0;
   background-color: var(--topo-icon-color, #3b82f6);
+  mix-blend-mode: color;
   -webkit-mask-image: url(/topo/ne-router.png);
   mask-image: url(/topo/ne-router.png);
   -webkit-mask-size: contain;
@@ -7147,7 +7164,7 @@ pre {
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
-  transition: transform 0.12s ease, background-color 0.12s ease;
+  transition: background-color 0.12s ease;
 }
 
 .topo-node__caption {
diff --git a/web/src/pages/TopologyPage.tsx b/web/src/pages/TopologyPage.tsx
index 44773ae..b22272a 100644
--- a/web/src/pages/TopologyPage.tsx
+++ b/web/src/pages/TopologyPage.tsx
@@ -371,9 +371,17 @@ function nodeMatchesQuery(n: Node<NeNodeData>, query: string): boolean {
   return tokens.every((tok) => bits.some((b) => fuzzyIncludes(String(b || ""), tok)));
 }
 
-/** Silhouette via CSS mask; fill color comes from --topo-icon-color (vendor palette). */
+/**
+ * Keep the PNG’s white texture/highlights; tint brand color via mix-blend-mode.
+ * Color comes from --topo-icon-color (vendor palette in Display settings).
+ */
 function RouterIcon() {
-  return <span className="topo-node__icon" aria-hidden="true" />;
+  return (
+    <span className="topo-node__icon" aria-hidden="true">
+      <img className="topo-node__icon-art" src="/topo/ne-router.png" alt="" draggable={false} />
+      <span className="topo-node__icon-tint" />
+    </span>
+  );
 }
 
 /** Fixed box for onlyRenderVisibleElements (xyflow skips off-screen mount when sized + handles set). */