From 1560bb7762d8e8898843b501ad57a6754b2a18ce Mon Sep 17 00:00:00 2001
From: Mega-Volti <119437326+Mega-Volti@users.noreply.github.com>
Date: Wed, 26 Jul 2023 02:31:42 +0200
Subject: [PATCH] Support custom colors for icons (#1724)

* Add custom colors to resolvedicon.jsx

Enables appending a color code (e.g. "#123456") to all mdi and si icons, in order to change their color to a per-icon custom one.

* Streamline code for custom icon colors in resolvedicon.jsx

Removed redundant if statement when defaulting to theme colors if no custom icon color code is provided

* Update resolvedicon.jsx

Remove unnecessary variable, restoring the fallback code in case no custom icon color is provided.

* Update resolvedicon.jsx - test for custom color suffix

Changed if condition from string.match to string.test and expanded regex to also include upper case letters.

* Update resolvedicon.jsx - DRY

Removed repetition, slimmed down if statement.

Also reverse previous commit as it did not work as intended.

* Update resolvedicon.jsx - upper case color hex codes

Update regular expression to also allow for upper case letters as part of the hex color code, as either are valid when describing an objects color.

* Refactor custom color code

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
---
 src/components/resolvedicon.jsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/resolvedicon.jsx b/src/components/resolvedicon.jsx
index fa9fa68d9..6e28ee249 100644
--- a/src/components/resolvedicon.jsx
+++ b/src/components/resolvedicon.jsx
@@ -33,11 +33,22 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
   }
 
   // check mdi- or si- prefixed icons
-  const prefix = icon.split("-")[0]
+  const prefix = icon.split("-")[0];
 
   if (prefix in iconSetURLs) {
-    // get icon source
-    const iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
+    // default to theme setting
+    let iconName = icon.replace(`${prefix}-`, "").replace(".svg", "");
+    let iconColor = settings.iconStyle === "theme" ?
+      `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity, 1))` :
+      "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))";
+
+    // use custom hex color if provided
+    const colorMatches = icon.match(/[#][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9][a-f0-9]$/i)
+    if (colorMatches?.length) {
+      iconName = icon.replace(`${prefix}-`, "").replace(".svg", "").replace(`-${colorMatches[0]}`, "");
+      iconColor = `${colorMatches[0]}`;
+    }
+
     const iconSource = `${iconSetURLs[prefix]}${iconName}.svg`;
 
     return (
@@ -47,16 +58,13 @@ export default function ResolvedIcon({ icon, width = 32, height = 32, alt = "log
           height,
           maxWidth: '100%',
           maxHeight: '100%',
-          background: settings.iconStyle === "theme" ?
-            `rgb(var(--color-${ theme === "dark" ? 300 : 900 }) / var(--tw-text-opacity, 1))` :
-            "linear-gradient(180deg, rgb(var(--color-logo-start)), rgb(var(--color-logo-stop)))",
+          background: `${iconColor}`,
           mask: `url(${iconSource}) no-repeat center / contain`,
           WebkitMask: `url(${iconSource}) no-repeat center / contain`,
         }}
       />
     );
   }
-
  
   // fallback to dashboard-icons
   if (icon.endsWith(".svg")) {