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 =