diff --git a/webui/index.html b/webui/index.html index 0313c3fe..b7468c6c 100644 --- a/webui/index.html +++ b/webui/index.html @@ -3363,7 +3363,8 @@ Spotify Green Ocean Blue - Purple + Purple + Boulder Purple Sunset Orange Rose Teal diff --git a/webui/static/script.js b/webui/static/script.js index 067faade..a097a547 100644 --- a/webui/static/script.js +++ b/webui/static/script.js @@ -328,7 +328,8 @@ const API = { // ---- Accent Color System ---- function getAccentFallbackColors() { - const accent = localStorage.getItem('soulsync-accent') || '#1db954'; + let accent = localStorage.getItem('soulsync-accent') || '#1db954'; + if (!/^#[0-9a-fA-F]{6}$/.test(accent)) accent = '#1db954'; // Compute a lighter variant for the second color const r = parseInt(accent.slice(1, 3), 16), g = parseInt(accent.slice(3, 5), 16), b = parseInt(accent.slice(5, 7), 16); const lighter = '#' + [Math.min(r + 20, 255), Math.min(g + 30, 255), Math.min(b + 12, 255)] @@ -337,6 +338,10 @@ function getAccentFallbackColors() { } function applyAccentColor(hex) { + // Validate hex format — reject corrupt values + if (typeof hex !== 'string' || !/^#[0-9a-fA-F]{6}$/.test(hex)) { + hex = '#1db954'; // fallback to default + } // Convert hex to RGB const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); @@ -402,10 +407,10 @@ function initAccentColorListeners() { presetSelect.addEventListener('change', () => { const val = presetSelect.value; if (val === 'custom') { - customGroup.style.display = ''; - applyAccentColor(customPicker.value); + if (customGroup) customGroup.style.display = ''; + if (customPicker) applyAccentColor(customPicker.value); } else { - customGroup.style.display = 'none'; + if (customGroup) customGroup.style.display = 'none'; applyAccentColor(val); } }); diff --git a/webui/static/style.css b/webui/static/style.css index 524534f2..4b88534e 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -25884,7 +25884,7 @@ body { } .candidates-modal-body::-webkit-scrollbar { width: 8px; } .candidates-modal-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; } -.candidates-modal-body::-webkit-scrollbar-thumb { background: rgba(29,185,84,0.3); border-radius: 4px; } +.candidates-modal-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.3); border-radius: 4px; } .candidates-error-summary { background: rgba(255, 255, 255, 0.05); @@ -25950,7 +25950,7 @@ body { letter-spacing: 0.5px; margin-right: 4px; } -.candidates-quality-flac { background: rgba(29,185,84,0.2); color: rgb(var(--accent-rgb)); } +.candidates-quality-flac { background: rgba(var(--accent-rgb),0.2); color: rgb(var(--accent-rgb)); } .candidates-quality-mp3 { background: rgba(100,149,237,0.2); color: #6495ed; } .candidates-quality-ogg, .candidates-quality-aac, .candidates-quality-wma { background: rgba(255,165,0,0.2); color: #ffa500; } .candidates-download-btn {