From 71fe5b83ebe642a4c37b85c91b54d930c81a1648 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Sun, 1 Mar 2026 15:34:51 -0800
Subject: [PATCH] css changes

---
 webui/index.html       |  3 ++-
 webui/static/script.js | 13 +++++++++----
 webui/static/style.css |  4 ++--
 3 files changed, 13 insertions(+), 7 deletions(-)

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 @@
                                         <select id="accent-preset" class="form-select">
                                             <option value="#1db954">Spotify Green</option>
                                             <option value="#1d8ab9">Ocean Blue</option>
-                                            <option value="#8b5cf6">Purple</option>
+                                            <option value="#a78bfa">Purple</option>
+                                            <option value="#8b5cf6">Boulder Purple</option>
                                             <option value="#f59e0b">Sunset Orange</option>
                                             <option value="#f43f5e">Rose</option>
                                             <option value="#14b8a6">Teal</option>
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 {