update custom colors

static/app.js

@@ -472,15 +472,19 @@ document.getElementById('globalAudio').addEventListener('ended', () => {
 
 
 function syncThemeColor() {
-  // read the CSS variable from :root (or any selector)
   const cssVar = getComputedStyle(document.documentElement)
-                     .getPropertyValue('--dark-background').trim();
+                       .getPropertyValue('--dark-background')
-  if (cssVar) {
+                       .trim();
-    document
+  if (!cssVar) return;
-      .querySelector('meta[name="theme-color"]')
+
+  // sync the theme‑color meta tag
+  document.querySelector('meta[name="theme-color"]')
           .setAttribute('content', cssVar);
-  }
+
+  // apply fill to every <svg> inside elements with .icon-color
+  document
+    .querySelectorAll('.icon-color svg')
+    .forEach(svg => svg.setAttribute('fill', cssVar));
 }
 
-// sync once on load
 document.addEventListener('DOMContentLoaded', syncThemeColor);

static/audioplayer.js

@@ -1,19 +1,22 @@
+// read the CSS variable from :root (or any selector)
+const cssVar = getComputedStyle(document.documentElement).getPropertyValue('--dark-background').trim();
+
 const playerButton = document.querySelector('.player-button'),
       audio = document.querySelector('audio'),
       timeline = document.querySelector('.timeline'),
       timeInfo = document.getElementById('timeInfo'),
       playIcon = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#34495e">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="${cssVar}">
           <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
         </svg>
       `,
       pauseIcon = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#34495e">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="${cssVar}">
           <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
         </svg>
       `,
       soundIcon = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#34495e">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="${cssVar}">
           <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clip-rule="evenodd" />
         </svg>
       `

templates/app.html

@@ -63,8 +63,8 @@
             Your browser does not support the audio element.
           </audio>
           <div class="controls">
-            <button class="player-button">
+            <button class="player-button icon-color">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#34495e">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                 <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
               </svg>
             </button>
@@ -72,8 +72,8 @@
               <input type="range" class="timeline" max="100" value="0" step="0.1">
               <div id="timeInfo" class="now-playing-info"></div>
             </div>
-            <button class="sound-button" onclick="downloadAudio()">
+            <button class="sound-button icon-color" onclick="downloadAudio()">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 120.89" fill="#34495e" width="35" height="35">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 120.89" width="35" height="35">
                 <path fill-rule="evenodd" d="M84.58,47a7.71,7.71,0,1,1,10.8,11L66.09,86.88a7.72,7.72,0,0,1-10.82,0L26.4,58.37a7.71,7.71,0,1,1,10.81-11L53.1,63.12l.16-55.47a7.72,7.72,0,0,1,15.43.13l-.15,55L84.58,47ZM0,113.48.1,83.3a7.72,7.72,0,1,1,15.43.14l-.07,22q46,.09,91.91,0l.07-22.12a7.72,7.72,0,1,1,15.44.14l-.1,30h-.09a7.71,7.71,0,0,1-7.64,7.36q-53.73.1-107.38,0A7.7,7.7,0,0,1,0,113.48Z"/>
                 </svg>
             </button>