UPD: 4.5 perfect colorization of green svgs

JulienMaille · Jul 24, 2023 · 42e44e8 · 42e44e8
1 parent 625c978
commit 42e44e8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git 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
@@ -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 {