@howssatoshi/quantumcss 1.7.5 → 1.8.0

package/examples/index.html

@@ -33,7 +33,7 @@
         <div class="star" style="top: 90%; left: 90%; --duration: 4s;"></div>
     </div>
     <button class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
-        <svg class="sun-icon hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
+        <svg class="sun-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path></svg>
         <svg class="moon-icon" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
     </button>
 
@@ -82,7 +82,7 @@
 
     <header class="hero container">
         <div class="pt-8 pb-12 text-center">
-            <span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.7.5</span>
+            <span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.7.9</span>
             <h1 class="text-7xl md:text-8xl text-gradient-starlight font-black uppercase italic tracking-tighter mb-8">Starlight Design</h1>
             <p class="text-xl text-slate-400 max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
                 A standardized, high-performance UI library. 
@@ -100,7 +100,7 @@
         <h2 class="text-3xl font-black uppercase tracking-tighter mb-8 text-center">Template Gallery</h2>
         <div class="grid-3">
             <a href="blog-template.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-blue-500_20 to-purple-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-blue-500_60 to-purple-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
                     </svg>
@@ -110,7 +110,7 @@
             </a>
 
             <a href="email-template.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-starlight_20 to-blue-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-starlight_60 to-blue-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                     </svg>
@@ -120,7 +120,7 @@
             </a>
 
             <a href="gaming-template.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-purple-500_20 to-pink-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-purple-500_60 to-pink-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
@@ -131,7 +131,7 @@
             </a>
 
             <a href="news-template.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-orange-500_20 to-red-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-orange-500_60 to-red-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
                     </svg>
@@ -141,7 +141,7 @@
             </a>
 
             <a href="shopping/index.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-green-500_20 to-teal-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-green-500_60 to-teal-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                     </svg>
@@ -151,7 +151,7 @@
             </a>
 
             <a href="travel/index.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-cyan-500_20 to-blue-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-cyan-500_60 to-blue-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                     </svg>
@@ -161,7 +161,7 @@
             </a>
 
             <a href="analytics-dashboard.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-indigo-500_20 to-purple-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-indigo-500_60 to-purple-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                     </svg>
@@ -171,7 +171,7 @@
             </a>
 
             <a href="admin-panel.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-rose-500_20 to-orange-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-rose-500_60 to-orange-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                     </svg>
@@ -181,7 +181,7 @@
             </a>
 
             <a href="music-streaming.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-pink-500_20 to-rose-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-pink-500_60 to-rose-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="currentColor" viewBox="0 0 24 24">
                         <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
                     </svg>
@@ -191,7 +191,7 @@
             </a>
 
             <a href="chat-messaging.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-blue-500_20 to-cyan-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-blue-500_60 to-cyan-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                     </svg>
@@ -201,7 +201,7 @@
             </a>
 
             <a href="portfolio-resume.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-violet-500_20 to-purple-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-violet-500_60 to-purple-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                     </svg>
@@ -211,7 +211,7 @@
             </a>
 
             <a href="video-streaming.html" class="starlight-card">
-                <div class="h-40 bg-gradient-to-br from-red-500_20 to-orange-500_20 rounded-xl mb-4 flex items-center justify-center">
+                <div class="h-40 bg-gradient-to-br from-red-500_60 to-orange-500_60 rounded-xl mb-4 flex items-center justify-center">
                     <svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
@@ -254,7 +254,7 @@
                         Asset Actions <span>&darr;</span>
                     </button>
                     <div id="demo-dropdown" class="dropdown-menu w-full">
-                        <button class="dropdown-item">View Analytics</button>
+                        <a href="kitchen-sink.html" class="dropdown-item">Kitchen Sink</a>
                         <button class="dropdown-item">Security Audit</button>
                         <div style="border-top: 1px solid rgba(255,255,255,0.05); margin: 0.5rem 0;"></div>
                         <button class="dropdown-item" style="color: #ff7e5f;">Decommission</button>

package/examples/kitchen-sink.html

@@ -12,13 +12,13 @@
         .spacing-bar { height: 1rem; background: var(--q-color-starlight-blue, #3b82f6); border-radius: 0.25rem; }
         section { margin-bottom: 4rem; }
         h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; border-bottom: 2px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.5rem; }
-        body.light-mode h2 { border-bottom-color: rgba(0, 0, 0, 0.1); }
+        html[data-theme="light"] h2 { border-bottom-color: rgba(0, 0, 0, 0.1); }
         .token-name { font-family: monospace; font-size: 0.875rem; opacity: 0.7; }
         .token-value { font-size: 0.75rem; opacity: 0.5; }
         .ani-card { background: #0f172a; color: white; transition: all 0.3s; }
-        body.light-mode .ani-card { background: #f1f5f9; color: #0f172a; }
+        html[data-theme="light"] .ani-card { background: #f1f5f9; color: #0f172a; }
         .ani-orbit-star { background-color: white; }
-        body.light-mode .ani-orbit-star { background-color: var(--q-color-starlight-blue, #2563eb); }
+        html[data-theme="light"] .ani-orbit-star { background-color: var(--q-color-starlight-blue, #2563eb); }
         .theme-toggle { 
             position: fixed; top: 2rem; right: 2rem; z-index: 100; cursor: pointer; 
             width: 3rem; height: 3rem; border-radius: 50%; 
@@ -27,11 +27,11 @@
             color: white; transition: all 0.3s ease; backdrop-filter: blur(10px); 
         }
         .theme-toggle:hover { background: rgba(255,255,255,0.15); transform: scale(1.1); }
-        body.light-mode .theme-toggle { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.1); color: #0f172a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
-        body.light-mode .theme-toggle:hover { background: #f8fafc; }
+        html[data-theme="light"] .theme-toggle { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.1); color: #0f172a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
+        html[data-theme="light"] .theme-toggle:hover { background: #f8fafc; }
         .sun-icon { display: none; }
-        body.light-mode .sun-icon { display: block; }
-        body.light-mode .moon-icon { display: none; }
+        html[data-theme="light"] .sun-icon { display: block; }
+        html[data-theme="light"] .moon-icon { display: none; }
 
         /* Theme Designer Panel */
         .designer-panel {
@@ -61,8 +61,9 @@
         .designer-btn:hover { filter: brightness(1.1); transform: scale(1.02); }
         .designer-btn:active { transform: scale(0.98); }
         
-        body.light-mode .designer-panel { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.1); color: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
-        body.light-mode .designer-slider { background: rgba(0, 0, 0, 0.1); }
+        html[data-theme="light"] .designer-panel { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.1); color: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
+        html[data-theme="light"] .designer-slider { background: rgba(0, 0, 0, 0.1); }
+        html[data-theme="light"] .theme-glass { background: rgba(0, 0, 0, 0.03) !important; border-color: rgba(0, 0, 0, 0.1) !important; }
     </style>
 </head>
 <body class="p-8">
@@ -908,7 +909,7 @@
         <!-- Components Section -->
         <section>
             <h2>Component Utilities</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div class="grid grid-cols-1 md__grid-cols-2 gap-8">
                 <div class="starlight-card p-6">
                     <div class="mb-4 token-name">btn-base</div>
                     <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
@@ -1011,7 +1012,7 @@
                                 </ul>
                             </div>
                         </nav>
-                        <div class="p-12 text-center opacity-50 italic text-sm border-t border-white_5 light:bg-slate-300">Horizontal layout (standard)</div>
+                        <div class="p-12 text-center opacity-50 italic text-sm border-t border-white_5 light__bg-slate-300">Horizontal layout (standard)</div>
                     </div>
                 </div>
 
@@ -1038,7 +1039,7 @@
                                 </ul>
                             </div>
                         </nav>
-                        <div class="flex-1 p-8 opacity-50 italic text-sm overflow-y-auto light:bg-slate-300">Dashboard content area...</div>
+                        <div class="flex-1 p-8 opacity-50 italic text-sm overflow-y-auto light__bg-slate-300">Dashboard content area...</div>
                     </div>
                 </div>
 
@@ -1145,7 +1146,7 @@
                     <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dialog Window (.starlight-dialog)</div>
                     <div class="p-8">
                         <!-- Inline Preview -->
-                        <div class="dialog-base theme-glass-dark relative mx-auto mb-8 shadow-none border-white_10" style="max-width: 500px;">
+                        <div class="dialog-base theme-glass relative mx-auto mb-8 shadow-none border-white_10" style="max-width: 500px;">
                             <h3 class="text-xl font-bold mb-4 text-gradient-starlight">System Preview</h3>
                             <p class="mb-6 opacity-70 text-sm">This is an inline preview of the dialog component. It scales to fit its container.</p>
                             <div class="flex gap-4">
@@ -1225,7 +1226,7 @@
         </section>
 
         <footer class="mt-20 opacity-50 text-sm">
-            Generated by Quantum CSS Dynamic Docs · 3/1/2026
+            Generated by Quantum CSS Dynamic Docs · 3/2/2026
         </footer>
     </div>
 
@@ -1332,18 +1333,6 @@
             setTimeout(() => btn.innerText = oldText, 2000);
         }
 
-        // Theme Toggle
-        function toggleTheme() {
-            const body = document.body;
-            if (body.classList.contains('light-mode')) {
-                body.classList.remove('light-mode');
-                document.documentElement.setAttribute('data-theme', 'dark');
-            } else {
-                body.classList.add('light-mode');
-                document.documentElement.setAttribute('data-theme', 'light');
-            }
-        }
-
         // Dialog Toggle
         function toggleDialog(show) {
             const dialog = document.getElementById('systemDialog');

package/examples/music-streaming.html

@@ -59,7 +59,7 @@
             gap: 0.75rem;
             padding: 0.875rem 1rem;
             background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(59, 130, 246, 0.15));
-            border: 1px solid rgba(0, 212, 255, 0.2);
+            border: 1px solid rgba(0, 212, 255, 0.6);
             border-radius: 0.75rem;
             color: var(--color-starlight, #00d4ff);
             font-size: 0.875rem;
@@ -635,45 +635,45 @@
         }
 
         .sun-icon { display: none; }
-        body.light-mode .sun-icon { display: inline; }
-        body.light-mode .moon-icon { display: none; }
+        html[data-theme="light"] .sun-icon { display: inline; }
+        html[data-theme="light"] .moon-icon { display: none; }
 
         /* Light Mode */
-        body.light-mode {
+        html[data-theme="light"] {
             --bg-primary: #f8fafc;
             --text-primary: #0f172a;
             --text-secondary: #475569;
             --text-muted: #64748b;
         }
 
-        body.light-mode .music-sidebar {
+        html[data-theme="light"] .music-sidebar {
             background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
             border-right-color: #e2e8f0;
         }
 
-        body.light-mode .player-bar {
+        html[data-theme="light"] .player-bar {
             background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
             border-top-color: #e2e8f0;
         }
 
-        body.light-mode .track-row:hover {
+        html[data-theme="light"] .track-row:hover {
             background: rgba(0, 0, 0, 0.03);
         }
 
-        body.light-mode .track-row.active {
+        html[data-theme="light"] .track-row.active {
             background: rgba(0, 212, 255, 0.08);
         }
 
-        body.light-mode .nav-arrow {
+        html[data-theme="light"] .nav-arrow {
             background: rgba(0, 0, 0, 0.1);
         }
 
-        body.light-mode .upgrade-btn {
+        html[data-theme="light"] .upgrade-btn {
             border-color: rgba(0, 0, 0, 0.2);
             color: var(--text-primary);
         }
 
-        body.light-mode .control-btn.play {
+        html[data-theme="light"] .control-btn.play {
             background: var(--text-primary);
             color: white;
         }
@@ -696,7 +696,7 @@
             background: rgba(255, 255, 255, 0.2);
         }
 
-        body.light-mode ::-webkit-scrollbar-thumb {
+        html[data-theme="light"] ::-webkit-scrollbar-thumb {
             background: #cbd5e1;
         }
 
@@ -1142,29 +1142,29 @@
             <!-- Player Controls -->
             <div class="player-controls">
                 <div class="control-buttons">
-                    <button class="control-btn">
-                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M7 6v12l10-6z"/>
+                    <button class="control-btn" title="Shuffle">
+                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.45 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/>
                         </svg>
                     </button>
-                    <button class="control-btn">
+                    <button class="control-btn" title="Previous">
                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                             <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
                         </svg>
                     </button>
-                    <button class="control-btn play">
+                    <button class="control-btn play" title="Play/Pause">
                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                             <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                         </svg>
                     </button>
-                    <button class="control-btn">
+                    <button class="control-btn" title="Next">
                         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                             <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
                         </svg>
                     </button>
-                    <button class="control-btn">
-                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M7 6v12l10-6z"/>
+                    <button class="control-btn" title="Repeat">
+                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/>
                         </svg>
                     </button>
                 </div>
@@ -1206,15 +1206,7 @@
     </div>
 
     <script>
-        function toggleTheme() {
-            document.body.classList.toggle('light-mode');
-            localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
-        }
 
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme === 'light') {
-            document.body.classList.add('light-mode');
-        }
 
         // Track row click handler
         document.querySelectorAll('.track-row').forEach(row => {

package/examples/news-template.html

@@ -81,43 +81,43 @@
         }
 
         /* Light Mode Overrides */
-        body.light-mode {
+        html[data-theme="light"] {
             background-color: #ffffff;
             color: #0f172a;
         }
 
-        body.light-mode .bg-white {
+        html[data-theme="light"] .bg-white {
             background-color: #ffffff !important;
             color: #0f172a !important;
         }
 
-        body.light-mode .bg-slate-50 {
+        html[data-theme="light"] .bg-slate-50 {
             background-color: #f8fafc !important;
         }
 
-        body.light-mode .bg-slate-900 {
+        html[data-theme="light"] .bg-slate-900 {
             background-color: #0f172a !important;
             color: #ffffff !important;
         }
 
-        body.light-mode .border-slate-100 {
+        html[data-theme="light"] .border-slate-100 {
             border-color: #f1f5f9 !important;
         }
 
-        body.light-mode .text-slate-900 { color: #0f172a !important; }
-        body.light-mode .text-slate-500 { color: #64748b !important; }
-        body.light-mode .text-blue-600 { color: #2563eb !important; }
+        html[data-theme="light"] .text-slate-900 { color: #0f172a !important; }
+        html[data-theme="light"] .text-slate-500 { color: #64748b !important; }
+        html[data-theme="light"] .text-blue-600 { color: #2563eb !important; }
 
-        body.light-mode nav {
+        html[data-theme="light"] nav {
             background-color: #ffffff !important;
              ottom-color: #0f172a !important;
         }
 
-        body.light-mode .theme-toggle {
+        html[data-theme="light"] .theme-toggle {
             color: #0f172a;
         }
 
-        body.light-mode .theme-toggle:hover {
+        html[data-theme="light"] .theme-toggle:hover {
             background: rgba(0, 0, 0, 0.05);
         }
 
@@ -126,7 +126,7 @@
             color: rgba(255, 255, 255, 0.2) !important;
         }
 
-        body.light-mode .text-slate-100 {
+        html[data-theme="light"] .text-slate-100 {
             color: #cbd5e1 !important;
         }
 
@@ -136,13 +136,13 @@
             backdrop-filter: blur(4px);
         }
 
-        body.light-mode .hover\:glass-light="hover" {
+        html[data-theme="light"] .hover\:glass-light="hover" {
             background-color: rgba(0, 0, 0, 0.05) !important;
             backdrop-filter: blur(4px);
         }
 
         footer a:hover { color: #60a5fa !important; }
-        body.light-mode footer a:hover { color: #2563eb !important; }
+        html[data-theme="light"] footer a:hover { color: #2563eb !important; }
     </style>
 </head>
 <body class="font-sans antialiased">

package/examples/portfolio-resume.html

@@ -87,7 +87,7 @@
             gap: 0.5rem;
             padding: 0.5rem 1rem;
             background: rgba(0, 212, 255, 0.1);
-            border: 1px solid rgba(0, 212, 255, 0.2);
+            border: 1px solid rgba(0, 212, 255, 0.6);
             border-radius: 9999px;
             font-size: 0.875rem;
             color: var(--color-starlight, #00d4ff);
@@ -174,12 +174,12 @@
         .skill-card:hover {
             background: rgba(255, 255, 255, 0.05);
             transform: translateY(-5px);
-            border-color: rgba(0, 212, 255, 0.2);
+            border-color: rgba(0, 212, 255, 0.6);
         }
         .skill-icon {
             width: 60px;
             height: 60px;
-            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(59, 130, 246, 0.2));
+            background: linear-gradient(135deg, rgba(0, 212, 255, 0.6), rgba(59, 130, 246, 0.2));
             border-radius: 1rem;
             display: flex;
             align-items: center;
@@ -385,20 +385,20 @@
         footer p { color: var(--text-muted, #64748b); font-size: 0.9375rem; }
         
         /* Light Mode */
-        body.light-mode {
+        html[data-theme="light"] {
             --bg-primary: #f8fafc;
             --text-primary: #0f172a;
             --text-secondary: #475569;
             --text-muted: #64748b;
         }
-        body.light-mode nav { background: rgba(248, 250, 252, 0.9); border-bottom-color: #e2e8f0; }
-        body.light-mode .skill-card, body.light-mode .project-card, body.light-mode .timeline-content,
-        body.light-mode .testimonial-card, body.light-mode .contact-item {
+        html[data-theme="light"] nav { background: rgba(248, 250, 252, 0.9); border-bottom-color: #e2e8f0; }
+        html[data-theme="light"] .skill-card, html[data-theme="light"] .project-card, html[data-theme="light"] .timeline-content,
+        html[data-theme="light"] .testimonial-card, html[data-theme="light"] .contact-item {
             background: #ffffff;
             border-color: #e2e8f0;
         }
-        body.light-mode .timeline::before { background: linear-gradient(180deg, #3b82f6, transparent); }
-        body.light-mode .timeline-dot { border-color: #f8fafc; }
+        html[data-theme="light"] .timeline::before { background: linear-gradient(180deg, #3b82f6, transparent); }
+        html[data-theme="light"] .timeline-dot { border-color: #f8fafc; }
         
         @media (max-width: 768px) {
             .nav-links { display: none; }
@@ -422,7 +422,7 @@
                 <li><a href="#contact">Contact</a></li>
             </ul>
             <button class="btn btn-secondary" onclick="toggleTheme()" style="padding: 0.5rem 1rem;">
-                <svg class="sun-icon hidden" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
+                <svg class="sun-icon" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
                 <svg class="moon-icon" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
             </button>
         </div>
@@ -637,32 +637,11 @@
     </footer>
 
     <script>
-        function toggleTheme() {
-            const isLight = document.body.classList.toggle('light-mode');
-            const theme = isLight ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', theme);
-            localStorage.setItem('theme', theme);
-            updateIcons(isLight);
-        }
-
-        function updateIcons(isLight) {
-            const sun = document.querySelector('.sun-icon');
-            const moon = document.querySelector('.moon-icon');
-            if (isLight) {
-                sun.classList.remove('hidden');
-                moon.classList.add('hidden');
-            } else {
-                sun.classList.add('hidden');
-                moon.classList.remove('hidden');
+        document.addEventListener('DOMContentLoaded', () => {
+            if (typeof Starlight !== 'undefined') {
+                Starlight.initStars();
             }
-        }
-
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme === 'light') {
-            document.body.classList.add('light-mode');
-            document.documentElement.setAttribute('data-theme', 'light');
-            updateIcons(true);
-        }
+        });
     </script>
 </body>
 </html>