openconstruct
diff --git a/‎src/index.html‎
Lines changed: 8 additions & 12 deletions b/‎src/index.html‎
Lines changed: 8 additions & 12 deletions
diff --git a/‎src/main-styles.css‎
Lines changed: 506 additions & 0 deletions b/‎src/main-styles.css‎
Lines changed: 506 additions & 0 deletions
@@ -5,20 +5,19 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="manifest" href="manifest.json">
 <title>PeerSuite</title>
-<link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="main-styles.css">
+<link id="active-theme-stylesheet" rel="stylesheet" href="themes/light.css">
 <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script>
 </head>
 <body>
 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute; overflow:hidden" class="hidden">
   <defs>
-    <!-- Glass distortion filter -->
+
     <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%">
       <feTurbulence type="fractalNoise" baseFrequency="0.008 0.008" numOctaves="2" seed="92" result="noise"/>
       <feGaussianBlur in="noise" stdDeviation="2" result="blurred"/>
       <feDisplacementMap in="SourceGraphic" in2="blurred" scale="3" xChannelSelector="R" yChannelSelector="G"/>
     </filter>
-    
-    <!-- Glass highlight filter -->
     <filter id="glass-highlight" x="0%" y="0%" width="100%" height="100%">
       <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
       <feSpecularLighting in="blur" result="specOut" lighting-color="#87CEEB" specularConstant="1.5" specularExponent="20">
@@ -28,7 +27,6 @@
       <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
     </filter>
 
-    <!-- Aurora gradient definitions -->
     <linearGradient id="aurora-blue-green" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" style="stop-color:#00D4FF;stop-opacity:0.8" />
       <stop offset="33%" style="stop-color:#5DADE2;stop-opacity:0.6" />
@@ -47,12 +45,10 @@
     <div class="app-header">
         <div class="app-header-title-group">
             <h1>PeerSuite</h1>
-            <label class="theme-switch">
-                <span class="light-icon">☀️</span>
-                <input type="checkbox" id="themeToggle" class="theme-switch-checkbox">
-                <span class="theme-switch-track"><span class="theme-switch-thumb"></span></span>
-                <span class="dark-icon">🌙</span>
-            </label>
+            <button id="cycleThemeBtn" class="btn btn-outline theme-cycle-button">
+                <span class="icon">🎨</span>
+                <span id="currentThemeNameSpan">Light</span>
+            </button>
         </div>
     </div>
 
@@ -314,4 +310,4 @@ <h2>Settings</h2>
 <script async src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
 <script type="module" src="main.js"></script>
 </body>
-</html>
+</html>