From 42e44e883b320b6cb25f4c5e2493114820b1efbd Mon Sep 17 00:00:00 2001
From: Julien <182520+JulienMaille@users.noreply.github.com>
Date: Mon, 24 Jul 2023 23:05:41 +0200
Subject: [PATCH] UPD: 4.5 perfect colorization of green svgs

---
 default-dynamic.js | 18 +++++++++++++++---
 user.css           |  5 +++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/default-dynamic.js b/default-dynamic.js
index 8d67341..0d9afb2 100644
--- a/default-dynamic.js
+++ b/default-dynamic.js
@@ -1,4 +1,4 @@
-let current = "4.4";
+let current = "4.5";
 
 function waitForElement(els, func, timeout = 100) {
     const queries = els.map((el) => document.querySelector(el));
@@ -177,8 +177,20 @@ function updateColors(textColHex) {
     setRootColor("highlight", softerHighlightHex);
 
     // compute hue rotation to change spotify green to main color
-    let hue = 360 * rgbToHsl(hexToRgb(textColHex))[0];
-    document.documentElement.style.setProperty("--hue-from-green", (hue + 235).toFixed(0) + "deg");
+    let rgb = hexToRgb(textColHex);
+    let m = `url('data:image/svg+xml;utf8,
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <filter id="recolor" color-interpolation-filters="sRGB">
+          <feColorMatrix type="matrix" values="
+            0 0 0 0 ${rgb[0] / 255}
+            0 0 0 0 ${rgb[1] / 255}
+            0 0 0 0 ${rgb[2] / 255}
+            0 0 0 1 0
+          "/>
+        </filter>
+      </svg>
+      #recolor')`;
+    document.documentElement.style.setProperty("--colormatrix", encodeURI(m));
 }
 
 let nearArtistSpanText = "";
diff --git a/user.css b/user.css
index cd66438..dd6adb1 100644
--- a/user.css
+++ b/user.css
@@ -40,7 +40,8 @@ input:focus {
     box-shadow: none !important;
 }
 
-/* h2-like titles */
+/* h1-like titles */
+h1,
 .main-entityHeader-titleButton,
 .main-entityHeader-title,
 .main-shelf-title,
@@ -71,7 +72,7 @@ input:focus {
 img.main-devicePicker-nowPlayingActiveIcon,
 .main-trackList-playingIcon,
 .main-trackList-rowHeartButton svg:not(.Svg-img-16-icon) {
-    filter: hue-rotate(var(--hue-from-green));
+    filter: var(--colormatrix);
 }
 
 .contentSpacing hr {