icon and label text color harmonize

README.md

@@ -11,7 +11,7 @@ Az alábbi paraméterekkel szabályozhatod a `/badge` végpont működését:
 | `icon`      | `portainer`           | A SimpleIcons ikon neve (kisbetű, kötőjellel).                                         | `github`, `docker`, `nginx`  |
 | `label`     | `Portainer`           | A badge-en megjelenő szöveg.                                                           | `MyApp`, `Status`            |
 | `bg`        | `#f0f0f0`             | Háttérszín (hex vagy CSS színnév).                                                     | `#fff`, `#222`, `red`        |
-| `color`     | `#000000`             | Szöveg színe (hex vagy CSS színnév).                                                   | `#333`, `white`              |
+| `color`     | `#000000`             | Szöveg színe (hex vagy CSS színnév). Harmonizál az icon szinével ha nem kérünk külön.  | `#333`, `white`              |
 | `size`      | `24`                  | Ikon (és badge) magassága pixelben.                                                    | `16`, `32`, `64`             |
 | `labelpos`  | `right`               | Szöveg pozíciója az ikonhoz képest: `right`, `left`, `above`, `below`.                 | `left`, `above`              |
 | `fontweight`| `normal`              | Szöveg vastagsága (`normal`, `bold`, `lighter`, szám is lehet pl. `600`).              | `bold`, `600`                |

index.js

@@ -24,6 +24,25 @@ app.get('/badge', async (req, res) => {
     }
     const iconSVG = iconResponse.data;
 
+    // Ha a color paraméter nincs megadva, próbáljuk kinyerni az ikon színét
+    let effectiveColor = color;
+    if (!req.query.color || req.query.color === '#000000') {
+      // Próbáljuk kinyerni az ikon fő színét a SimpleIcons API-ból
+      try {
+        const iconMetaUrl = `https://cdn.simpleicons.org/${icon}`;
+        const iconMetaResp = await axios.get(iconMetaUrl, { responseType: 'text' });
+        // Kikeressük az első "fill=" attribútumot
+        const match = iconMetaResp.data.match(/fill="([^"]+)"/);
+        if (match && match[1]) {
+          effectiveColor = match[1];
+        } else {
+          effectiveColor = "#222"; // fallback
+        }
+      } catch {
+        effectiveColor = "#222";
+      }
+    }
+
     // Badge méretek
     const padding = 10;
     const iconSize = parseInt(size);
@@ -44,25 +63,25 @@ app.get('/badge', async (req, res) => {
       height = padding * 2 + iconSize + textPadding + fontSize;
       if (labelpos === 'above') {
         // Szöveg felül, ikon alul
-        textElem = `<text x="${width / 2}" y="${padding + fontSize}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${color}" text-anchor="middle" dominant-baseline="middle">${label}</text>`;
+        textElem = `<text x="${width / 2}" y="${padding + fontSize}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="middle">${label}</text>`;
         iconGroup = `<g transform="translate(${(width - iconSize) / 2}, ${padding + fontSize + textPadding})">${iconSVG}</g>`;
       } else {
         // Szöveg alul, ikon felül
         iconGroup = `<g transform="translate(${(width - iconSize) / 2}, ${padding})">${iconSVG}</g>`;
-        textElem = `<text x="${width / 2}" y="${padding + iconSize + textPadding}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${color}" text-anchor="middle" dominant-baseline="hanging">${label}</text>`;
+        textElem = `<text x="${width / 2}" y="${padding + iconSize + textPadding}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="hanging">${label}</text>`;
       }
     } else if (labelpos === 'left') {
       width = padding * 2 + iconSize + textPadding + textWidth;
       height = Math.max(iconSize + padding * 2, fontSize + padding * 2);
       // Szöveg balra, ikon jobbra (függőleges közép)
-      textElem = `<text x="${padding}" y="${height / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${color}" alignment-baseline="middle" dominant-baseline="middle">${label}</text>`;
+      textElem = `<text x="${padding}" y="${height / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" alignment-baseline="middle" dominant-baseline="middle">${label}</text>`;
       iconGroup = `<g transform="translate(${padding + textWidth + textPadding}, ${(height - iconSize) / 2})">${iconSVG}</g>`;
     } else {
       width = padding * 2 + iconSize + textPadding + textWidth;
       height = Math.max(iconSize + padding * 2, fontSize + padding * 2);
       // Alapértelmezett: ikon balra, szöveg jobbra (függőleges közép)
       iconGroup = `<g transform="translate(${padding}, ${(height - iconSize) / 2})">${iconSVG}</g>`;
-      textElem = `<text x="${padding + iconSize + textPadding + textWidth / 2}" y="${height / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${color}" text-anchor="middle" dominant-baseline="middle">${label}</text>`;
+      textElem = `<text x="${padding + iconSize + textPadding + textWidth / 2}" y="${height / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="middle">${label}</text>`;
     }
 
     // SVG badge string összefűzéssel, szöveg árnyékkal