1 files changed, 32 insertions, 5 deletions
diff --git a/index.html b/index.html
index 60ff812..5a9d28e 100755
--- a/index.html
+++ b/index.html
@@ -3,6 +3,9 @@
 <head>
 <meta charset="UTF-8" />
 <title>tyler.xyz · Aqua Desktop</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&family=Michroma&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" />
 <link rel="stylesheet" href="aero.css" />
 <style>
   /* ============= LOCKED PALETTE ============= */
@@ -19,7 +22,7 @@
     --start-border: oklch(40% 0.14 150);
   }
   .desk { position: fixed; inset: 0; overflow: hidden; background: var(--sky); background-size: cover; background-position: center; }
-  .icons { position: absolute; left: 24px; top: 24px; display: grid; grid-template-columns: 1fr; gap: 18px; }
+  .icons { position: absolute; left: 24px; top: 24px; display: grid; grid-template-columns: 1fr; gap: 18px; z-index: 10; }
   .icon { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; cursor: pointer; text-align: center; }
   .icon .glyph {
     width: 56px; height: 56px; border-radius: 14px;
@@ -37,7 +40,7 @@
   .icon .label { font-size: 12px; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.6); font-weight: 500; }
   .icon:hover .glyph { transform: translateY(-2px) scale(1.04); transition: transform 200ms; }
 
-  .win { position: absolute; min-width: 320px; }
+  .win { position: absolute; min-width: 320px; z-index: 50; }
   .win .titlebar {
     height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
     border-radius: 18px 18px 0 0;
@@ -113,6 +116,7 @@
 </style>
 </head>
 <body>
+  <script>(function(){var t=localStorage.getItem('tyler.theme')||'aero';document.body.setAttribute('data-theme',t);})();</script>
   <div class="desk" id="desk">
     <div class="sun" style="background: var(--sun);"></div>
     <div class="lens-flare"></div>
@@ -323,15 +327,17 @@
       </div>
     </div>
 
-    <audio id="bgm" src="/mus/bazaar-theme.mp3" loop preload="none"></audio>
+    <audio id="bgm" loop preload="none"></audio>
   </div>
 
 <script src="aero.js"></script>
 <script>
+  Aero.initTheme();
   const desk = document.getElementById('desk');
   Aero.makeClouds(document.getElementById('clouds'));
   Aero.spawnBubbles(desk, 24);
   Aero.sparkleCursor();
+  Aero.mountThemeSwitcher();
 
   document.querySelectorAll('.win').forEach(w => {
     Aero.makeDraggable(w, w.querySelector('.titlebar'));
@@ -384,7 +390,11 @@
     ic.addEventListener('dblclick', loadPodcast);
   });
 
-  // music toggle + volume slider
+  // music toggle + volume slider (theme-aware)
+  const MUSIC = {
+    aero:   { src: '/mus/bazaar-theme.mp3',                 label: '♪ a-dog — bazaar theme' },
+    chrome: { src: '/CoolMan - WhoIsUsingThisComputer_.mp3', label: '♪ coolman — who is using this computer?' },
+  };
   document.getElementById('mt').innerHTML = Aero.musicToggleHTML();
   const mtDiv = document.getElementById('mt');
   const mtBtn = mtDiv.querySelector('.mt-btn');
@@ -401,12 +411,26 @@
   vol.addEventListener('input', () => { bgm.volume = Number(vol.value); });
 
   let musicOn = false;
+
+  function applyMusicTheme() {
+    const track = MUSIC[Aero.getTheme()] || MUSIC.aero;
+    if (bgm.getAttribute('src') !== track.src) {
+      const pos = bgm.currentTime;
+      bgm.src = track.src;
+      if (musicOn) { bgm.load(); bgm.currentTime = 0; bgm.play(); }
+    }
+    if (musicOn) mtLabel.textContent = (MUSIC[Aero.getTheme()] || MUSIC.aero).label;
+  }
+
   mtBtn.addEventListener('click', () => {
     musicOn = !musicOn;
     if (musicOn) {
+      const track = MUSIC[Aero.getTheme()] || MUSIC.aero;
+      bgm.src = track.src;
+      bgm.load();
       bgm.play();
       mtBtn.textContent = '❚❚';
-      mtLabel.textContent = '♪ a-dog — bazaar theme';
+      mtLabel.textContent = track.label;
       mtBtn.style.background = 'radial-gradient(circle at 30% 25%,white,oklch(75% 0.14 55) 60%,oklch(55% 0.15 35))';
     } else {
       bgm.pause();
@@ -416,6 +440,9 @@
     }
   });
 
+  // swap track live when theme changes while music is playing
+  window.addEventListener('themechange', applyMusicTheme);
+
   // counter
   document.getElementById('cc').innerHTML = Aero.counterHTML(0, 'visitors');
   Aero.fetchVisitorCount()