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 =