From c08b5f73de6bdda4cf2b359a30346e23015f1728 Mon Sep 17 00:00:00 2001
From: Glenn Thompson <glennt40@gmail.com>
Date: Sat, 6 Dec 2025 18:56:43 +0300
Subject: [PATCH] Add monotone theme and dynamic border color

- Add monotone theme with deep blue to cobalt gradient
- Update canvas border color dynamically to match selected theme
- Set initial border color on page load based on saved preference
---
 parenscript/spectrum-analyzer.lisp | 19 ++++++++++++++++---
 template/front-page-content.ctml   |  1 +
 template/front-page.ctml           |  1 +
 template/player-content.ctml       |  1 +
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/parenscript/spectrum-analyzer.lisp b/parenscript/spectrum-analyzer.lisp
index fe03fa6..9d379b3 100644
--- a/parenscript/spectrum-analyzer.lisp
+++ b/parenscript/spectrum-analyzer.lisp
@@ -20,6 +20,7 @@
     ;; Color themes for spectrum analyzer
     (defvar *themes* 
       (ps:create
+       "monotone" (ps:create "top" "#0047ab" "mid" "#002966" "bottom" "#000d1a")
        "green" (ps:create "top" "#00ff00" "mid" "#00aa00" "bottom" "#005500")
        "blue" (ps:create "top" "#00ffff" "mid" "#0088ff" "bottom" "#0044aa")
        "purple" (ps:create "top" "#ff00ff" "mid" "#aa00aa" "bottom" "#550055")
@@ -184,6 +185,12 @@
       (when (ps:getprop *themes* theme-name)
         (setf *current-theme* theme-name)
         (ps:chain local-storage (set-item "spectrum-theme" theme-name))
+        
+        ;; Update canvas border color to match theme
+        (when *canvas*
+          (let ((theme (ps:getprop *themes* theme-name)))
+            (setf (ps:@ *canvas* style border-color) (ps:@ theme top))))
+        
         (ps:chain console (log (+ "Spectrum theme changed to: " theme-name)))))
     
     (defun get-available-themes ()
@@ -212,13 +219,19 @@
           (when (and saved-style (or (= saved-style "bars") (= saved-style "wave") (= saved-style "dots")))
             (setf *current-style* saved-style))
           
-          ;; Update UI selectors if they exist
+          ;; Update UI selectors and canvas border if they exist
           (let ((theme-selector (ps:chain document (get-element-by-id "spectrum-theme-selector")))
-                (style-selector (ps:chain document (get-element-by-id "spectrum-style-selector"))))
+                (style-selector (ps:chain document (get-element-by-id "spectrum-style-selector")))
+                (canvas (ps:chain document (get-element-by-id "spectrum-canvas"))))
             (when theme-selector
               (setf (ps:@ theme-selector value) *current-theme*))
             (when style-selector
-              (setf (ps:@ style-selector value) *current-style*))))
+              (setf (ps:@ style-selector value) *current-style*))
+            
+            ;; Set initial canvas border color
+            (when canvas
+              (let ((theme (ps:getprop *themes* *current-theme*)))
+                (setf (ps:@ canvas style border-color) (ps:@ theme top))))))
         
         (let ((audio-element (or (ps:chain document (get-element-by-id "live-audio"))
                                  (ps:chain document (get-element-by-id "persistent-audio")))))
diff --git a/template/front-page-content.ctml b/template/front-page-content.ctml
index 4068d12..904d914 100644
--- a/template/front-page-content.ctml
+++ b/template/front-page-content.ctml
@@ -38,6 +38,7 @@
           <label>
             Theme: 
             <select id="spectrum-theme-selector" onchange="setSpectrumTheme(this.value)" style="padding: 3px; background: #000; color: #00ff00; border: 1px solid #00ff00;">
+              <option value="monotone">Monotone</option>
               <option value="green">Green</option>
               <option value="blue">Blue</option>
               <option value="purple">Purple</option>
diff --git a/template/front-page.ctml b/template/front-page.ctml
index e3b0f40..b8cd620 100644
--- a/template/front-page.ctml
+++ b/template/front-page.ctml
@@ -38,6 +38,7 @@
           <label>
             Theme: 
             <select id="spectrum-theme-selector" onchange="setSpectrumTheme(this.value)" style="padding: 3px; background: #000; color: #00ff00; border: 1px solid #00ff00;">
+              <option value="monotone">Monotone</option>
               <option value="green">Green</option>
               <option value="blue">Blue</option>
               <option value="purple">Purple</option>
diff --git a/template/player-content.ctml b/template/player-content.ctml
index bc7777e..5fabf31 100644
--- a/template/player-content.ctml
+++ b/template/player-content.ctml
@@ -32,6 +32,7 @@
         <label>
           Theme: 
           <select id="spectrum-theme-selector" onchange="setSpectrumTheme(this.value)" style="padding: 3px; background: #000; color: #00ff00; border: 1px solid #00ff00;">
+            <option value="monotone">Monotone</option>
             <option value="green">Green</option>
             <option value="blue">Blue</option>
             <option value="purple">Purple</option>