From 7ed455f72b7ed3970cf5d5ead1293bd62ff9498d Mon Sep 17 00:00:00 2001
From: ltadeu6 <ltadeu6@protonmail.com>
Date: Sun, 7 Jun 2026 13:10:24 -0300
Subject: [PATCH] feat: secondary color gradient on VU meter bars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extract a hue-distinct secondary color from album art and apply a
primary→secondary gradient across the VU meter bars (bass end = primary,
treble end = secondary). Falls back to complementary hue if no distinct
color is found.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 plugin/contents/ui/dancer.html | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html
index f738d49..2f59386 100644
--- a/plugin/contents/ui/dancer.html
+++ b/plugin/contents/ui/dancer.html
@@ -1014,11 +1014,11 @@ requestAnimationFrame(flushBars);
 /* ============================================================
    MUSIC-LIGHT THEME (album color)
    ============================================================ */
-function applyTheme(rgb) {
+function applyTheme(rgb, rgb2) {
   const [r, g, b] = rgb;
-  const color = `rgba(${r},${g},${b},1)`;
-  document.documentElement.style.setProperty('--theme-color', color);
-  // Tint horizon
+  const [r2, g2, b2] = rgb2 || [r, g, b];
+  document.documentElement.style.setProperty('--theme-color', `rgba(${r},${g},${b},1)`);
+  // Tint horizon with primary color
   horizonEl.style.background = `linear-gradient(to right,
     transparent 0%,
     rgba(${r},${g},${b},0.7) 20%,
@@ -1027,6 +1027,15 @@ function applyTheme(rgb) {
     transparent 100%)`;
   horizonEl.style.boxShadow =
     `0 0 30px rgba(${r},${g},${b},0.9), 0 0 90px rgba(${r},${g},${b},0.3)`;
+  // Apply primary→secondary gradient across VU bars
+  vuBars.forEach((bar, i) => {
+    const t  = i / (vuBars.length - 1);
+    const br = Math.round(r  + (r2  - r)  * t);
+    const bg = Math.round(g  + (g2  - g)  * t);
+    const bb = Math.round(b  + (b2  - b)  * t);
+    bar.style.background  = `rgb(${br},${bg},${bb})`;
+    bar.style.boxShadow   = `0 0 4px rgba(${br},${bg},${bb},0.8)`;
+  });
 }
 
 const albumArtEl = document.getElementById('albumArt');
@@ -1037,7 +1046,7 @@ function fetchTheme() {
   fetch('http://127.0.0.1:8765/current')
     .then(r => r.json())
     .then(d => {
-      if (d.rgb) applyTheme(d.rgb);
+      if (d.rgb) applyTheme(d.rgb, d.rgb2);
       if (d.art_url && d.art_url !== lastArtUrl) {
         lastArtUrl = d.art_url;
         document.getElementById('albumArtImg').src =