@howssatoshi/quantumcss 1.7.5 → 1.8.0

package/examples/admin-panel.html

@@ -178,7 +178,7 @@
         .quick-action-card:hover {
             background: rgba(255, 255, 255, 0.05);
             transform: translateY(-2px);
-            border-color: rgba(0, 212, 255, 0.2);
+            border-color: rgba(0, 212, 255, 0.6);
         }
 
         .quick-action-icon {
@@ -204,41 +204,41 @@
         }
 
         /* Light Mode Overrides */
-        body.light-mode {
+        html[data-theme="light"] {
             --bg-primary: #f8fafc;
             --text-primary: #0f172a;
             --text-secondary: #475569;
             --text-muted: #64748b;
         }
 
-        body.light-mode .admin-logo {
+        html[data-theme="light"] .admin-logo {
             border-bottom-color: #e2e8f0;
         }
 
-        body.light-mode .table-container,
-        body.light-mode .quick-action-card {
+        html[data-theme="light"] .table-container,
+        html[data-theme="light"] .quick-action-card {
             background: #ffffff;
             border-color: #e2e8f0;
         }
 
-        body.light-mode .quick-action-card:hover {
+        html[data-theme="light"] .quick-action-card:hover {
             background: #f8fafc;
         }
 
-        body.light-mode th {
+        html[data-theme="light"] th {
             background: #f8fafc;
             border-bottom-color: #e2e8f0;
         }
 
-        body.light-mode td {
+        html[data-theme="light"] td {
             border-bottom-color: #f1f5f9;
         }
 
-        body.light-mode tr:hover td {
+        html[data-theme="light"] tr:hover td {
             background: #f8fafc;
         }
 
-        body.light-mode .table-footer {
+        html[data-theme="light"] .table-footer {
             background: #f8fafc;
             border-top-color: #e2e8f0;
         }
@@ -823,15 +823,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');
-        }
     </script>
 </body>
 </html>

package/examples/analytics-dashboard.html

@@ -75,13 +75,13 @@
             color: var(--text-primary, #f1f5f9);
         }
 
-        body.light-mode .notification-btn {
+        html[data-theme="light"] .notification-btn {
             background: #ffffff;
             border-color: #e2e8f0;
             color: #64748b;
         }
 
-        body.light-mode .notification-badge {
+        html[data-theme="light"] .notification-badge {
             border-color: #ffffff;
         }
 
@@ -362,34 +362,34 @@
 
         /* Sun/Moon icons */
         .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 Overrides */
-        body.light-mode {
+        html[data-theme="light"] {
             --bg-primary: #f8fafc;
             --text-primary: #0f172a;
             --text-secondary: #475569;
             --text-muted: #64748b;
         }
 
-        body.light-mode .chart-card {
+        html[data-theme="light"] .chart-card {
             background: #ffffff;
             border-color: #e2e8f0;
         }
 
-        body.light-mode .date-selector {
+        html[data-theme="light"] .date-selector {
             background: #ffffff;
             border-color: #e2e8f0;
         }
 
-        body.light-mode .header {
+        html[data-theme="light"] .header {
             border-bottom-color: #e2e8f0;
         }
 
-        body.light-mode .legend-item,
-        body.light-mode .activity-item,
-        body.light-mode .product-row {
+        html[data-theme="light"] .legend-item,
+        html[data-theme="light"] .activity-item,
+        html[data-theme="light"] .product-row {
             border-bottom-color: #f1f5f9;
         }
 
@@ -408,6 +408,25 @@
             }
         }
 
+        @media (max-width: 1024px) {
+            .sidebar {
+                width: 80px;
+            }
+            .sidebar .logo span,
+            .sidebar .nav-section-title,
+            .sidebar .nav-item span,
+            .sidebar .theme-label {
+                display: none;
+            }
+            .sidebar .nav-item {
+                justify-content: center;
+                padding: 0.75rem;
+            }
+            .sidebar .logo {
+                justify-content: center;
+            }
+        }
+
         @media (max-width: 768px) {
             .app-layout {
                 grid-template-columns: 1fr;
@@ -807,16 +826,8 @@
 
     <script>
         // Theme toggle
-        function toggleTheme() {
-            document.body.classList.toggle('light-mode');
-            localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
-        }
 
         // Check saved theme
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme === 'light') {
-            document.body.classList.add('light-mode');
-        }
 
         // Chart drawing functions
         function drawLineChart() {

package/examples/blog-template.html

@@ -24,52 +24,52 @@
         background: rgba(255, 255, 255, 0.1);
     }
 
-    body.light-mode .theme-toggle:hover {
+    html[data-theme="light"] .theme-toggle:hover {
         background: rgba(0, 0, 0, 0.05);
     }
 
     .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; }
 
-    body.light-mode {
+    html[data-theme="light"] {
         background-color: #f8fafc;
         color: #1e293b;
     }
 
-    body.light-mode .text-white,
-    body.light-mode .text-primary,
-    body.light-mode h1,
-    body.light-mode h2,
-    body.light-mode h3,
-    body.light-mode h4 {
+    html[data-theme="light"] .text-white,
+    html[data-theme="light"] .text-primary,
+    html[data-theme="light"] h1,
+    html[data-theme="light"] h2,
+    html[data-theme="light"] h3,
+    html[data-theme="light"] h4 {
         color: #0f172a !important;
     }
 
-    body.light-mode .text-secondary,
-    body.light-mode .text-muted,
-    body.light-mode .text-slate-300,
-    body.light-mode .prose,
-    body.light-mode .prose p {
+    html[data-theme="light"] .text-secondary,
+    html[data-theme="light"] .text-muted,
+    html[data-theme="light"] .text-slate-300,
+    html[data-theme="light"] .prose,
+    html[data-theme="light"] .prose p {
         color: #475569 !important;
     }
 
-    body.light-mode .glass {
+    html[data-theme="light"] .glass {
         background: rgba(255, 255, 255, 0.8) !important;
         border-color: rgba(0, 0, 0, 0.1) !important;
     }
 
-    body.light-mode .starlight-card {
+    html[data-theme="light"] .starlight-card {
         background: white;
         border-color: #e2e8f0;
     }
 
-    body.light-mode .code-window {
+    html[data-theme="light"] .code-window {
         background: #f1f5f9;
         border-color: #e2e8f0;
     }
 
-    body.light-mode .code-window pre {
+    html[data-theme="light"] .code-window pre {
         color: #1e293b;
     }
   </style>
@@ -110,7 +110,7 @@
         <a href="#" class="text-sm font-medium hover:text-primary transition-colors">Articles</a>
         <a href="#" class="text-sm font-medium hover:text-primary transition-colors">About</a>
         <div id="theme-btn" class="theme-toggle" title="Toggle Theme">
-            <svg class="w-6 h-6 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="w-6 h-6 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="w-6 h-6 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>
         </div>
         <button class="btn-starlight btn-sm">Subscribe</button>

package/examples/chat-messaging.html

@@ -68,15 +68,15 @@
         .theme-btn:hover { background: rgba(255, 255, 255, 0.08); }
         .theme-label { font-size: 0.875rem; font-weight: 500; }
         .sun-icon { display: none; }
-        body.light-mode .sun-icon { display: inline; }
-        body.light-mode .moon-icon { display: none; }
-        body.light-mode { --bg-primary: #f8fafc; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; }
-        body.light-mode .chat-sidebar { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-right-color: #e2e8f0; }
-        body.light-mode .chat-header, body.light-mode .chat-input-container { background: #f8fafc; border-color: #e2e8f0; }
-        body.light-mode .chat-input-wrapper { background: #f1f5f9; border-color: #e2e8f0; }
-        body.light-mode .conversation-item:hover { background: #f8fafc; }
-        body.light-mode .conversation-item.active { background: rgba(0, 212, 255, 0.08); }
-        body.light-mode .message.received .message-bubble { background: #f1f5f9; color: #0f172a; }
+        html[data-theme="light"] .sun-icon { display: inline; }
+        html[data-theme="light"] .moon-icon { display: none; }
+        html[data-theme="light"] { --bg-primary: #f8fafc; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; }
+        html[data-theme="light"] .chat-sidebar { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-right-color: #e2e8f0; }
+        html[data-theme="light"] .chat-header, html[data-theme="light"] .chat-input-container { background: #f8fafc; border-color: #e2e8f0; }
+        html[data-theme="light"] .chat-input-wrapper { background: #f1f5f9; border-color: #e2e8f0; }
+        html[data-theme="light"] .conversation-item:hover { background: #f8fafc; }
+        html[data-theme="light"] .conversation-item.active { background: rgba(0, 212, 255, 0.08); }
+        html[data-theme="light"] .message.received .message-bubble { background: #f1f5f9; color: #0f172a; }
         @media (max-width: 768px) { .chat-app { grid-template-columns: 1fr; } .chat-sidebar { display: none; } .message { max-width: 85%; } }
     </style>
 </head>
@@ -248,20 +248,10 @@
         </div>
     </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');
-        document.querySelectorAll('.conversation-item').forEach(item => {
-            item.addEventListener('click', function() {
-                document.querySelectorAll('.conversation-item').forEach(i => i.classList.remove('active'));
-                this.classList.add('active');
-                this.classList.remove('unread');
-                const badge = this.querySelector('.unread-badge');
-                if (badge) badge.style.display = 'none';
-            });
+        document.addEventListener('DOMContentLoaded', () => {
+            if (typeof Starlight !== 'undefined') {
+                Starlight.initStars();
+            }
         });
     </script>
 </body>

package/examples/email-template.html

@@ -153,63 +153,63 @@
 
         /* Sun/Moon icons */
         .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; }
 
         /* Light Mode Overrides */
-        body.light-mode {
+        html[data-theme="light"] {
             background-color: #f8fafc;
             color: #1e293b;
         }
 
-        body.light-mode .email-sidebar {
+        html[data-theme="light"] .email-sidebar {
             background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
             border-right-color: #e2e8f0;
         }
 
-        body.light-mode .email-list {
+        html[data-theme="light"] .email-list {
             background: #ffffff;
             border-right-color: #e2e8f0;
         }
 
-        body.light-mode .email-content {
+        html[data-theme="light"] .email-content {
             background: #f8fafc;
         }
 
-        body.light-mode .email-item {
+        html[data-theme="light"] .email-item {
             border-bottom-color: #f1f5f9;
         }
 
-        body.light-mode .email-item:hover {
+        html[data-theme="light"] .email-item:hover {
             background: #f8fafc;
         }
 
-        body.light-mode .email-item.active {
+        html[data-theme="light"] .email-item.active {
             background: rgba(0, 212, 255, 0.08);
         }
 
-        body.light-mode .email-item.unread {
+        html[data-theme="light"] .email-item.unread {
             background: rgba(59, 130, 246, 0.04);
         }
 
-        body.light-mode .email-sender {
+        html[data-theme="light"] .email-sender {
             color: #0f172a;
         }
 
-        body.light-mode .email-preview {
+        html[data-theme="light"] .email-preview {
             color: #64748b;
         }
 
-        body.light-mode .email-time {
+        html[data-theme="light"] .email-time {
             color: #94a3b8;
         }
 
-        body.light-mode .user-profile-section {
+        html[data-theme="light"] .user-profile-section {
             background: #f1f5f9;
             border-color: #e2e8f0;
         }
 
-        body.light-mode .user-name {
+        html[data-theme="light"] .user-name {
             color: #0f172a;
         }
 
@@ -254,7 +254,7 @@
                 display: block; /* Always block, use transform to hide */
             }
 
-            body.light-mode .email-content {
+            html[data-theme="light"] .email-content {
                 background: #f8fafc;
             }
             
@@ -273,7 +273,7 @@
             background: rgba(8, 8, 26, 0.5);
         }
 
-        body.light-mode .top-bar {
+        html[data-theme="light"] .top-bar {
             background: #ffffff;
             border-bottom-color: #e2e8f0;
         }
@@ -286,7 +286,7 @@
             line-height: 1.3;
         }
 
-        body.light-mode .email-subject {
+        html[data-theme="light"] .email-subject {
             color: #0f172a;
         }
 
@@ -296,7 +296,7 @@
             font-size: 0.9375rem;
         }
 
-        body.light-mode .email-body {
+        html[data-theme="light"] .email-body {
             color: #475569;
         }
 
@@ -317,7 +317,7 @@
             margin-bottom: 0.25rem;
         }
 
-        body.light-mode .sender-details h3 {
+        html[data-theme="light"] .sender-details h3 {
             color: #0f172a;
         }
 
@@ -679,16 +679,8 @@
 
     <script>
         // Theme toggle functionality
-        function toggleTheme() {
-            document.body.classList.toggle('light-mode');
-            localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
-        }
 
         // Check for saved theme preference
-        const savedTheme = localStorage.getItem('theme');
-        if (savedTheme === 'light') {
-            document.body.classList.add('light-mode');
-        }
 
         // Email item click handler
         document.querySelectorAll('.email-item').forEach(item => {

package/examples/gaming-template.html

@@ -13,7 +13,7 @@
             transition: background-color 0.5s ease, color 0.5s ease;
         }
 
-        body.light-mode {
+        html[data-theme="light"] {
             background: #f1f5f9;
             color: #1e293b;
         }
@@ -30,7 +30,7 @@
             text-align: center;
         }
 
-        body.light-mode .hero-section {
+        html[data-theme="light"] .hero-section {
             background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9)), 
                         url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1920&q=80');
             background-size: cover;
@@ -60,43 +60,43 @@
             background: rgba(255, 255, 255, 0.1);
         }
 
-        body.light-mode .theme-toggle:hover {
+        html[data-theme="light"] .theme-toggle:hover {
             background: rgba(0, 0, 0, 0.05);
         }
 
-        body.light-mode .glass {
+        html[data-theme="light"] .glass {
             background: rgba(0, 0, 0, 0.03) !important;
             border-color: rgba(0, 0, 0, 0.1) !important;
             color: #1e293b !important;
         }
 
-        body.light-mode .badge-secondary {
+        html[data-theme="light"] .badge-secondary {
             background-color: rgba(0, 0, 0, 0.05);
             color: #475569;
             border-color: rgba(0, 0, 0, 0.1);
         }
 
-        body.light-mode .starlight-card p {
+        html[data-theme="light"] .starlight-card p {
             color: #64748b;
         }
 
-        body.light-mode footer {
+        html[data-theme="light"] footer {
             background-color: #f1f5f9;
             border-top-color: #e2e8f0;
         }
 
-        body.light-mode footer .text-gradient-starlight {
+        html[data-theme="light"] footer .text-gradient-starlight {
             background: none;
             -webkit-text-fill-color: #1e293b;
             color: #1e293b;
         }
 
-        body.light-mode footer p, 
-        body.light-mode footer a {
+        html[data-theme="light"] footer p, 
+        html[data-theme="light"] footer a {
             color: #64748b;
         }
 
-        body.light-mode footer a:hover {
+        html[data-theme="light"] footer a:hover {
             color: #2563eb;
         }
     </style>
@@ -119,7 +119,7 @@
                     
                     <div class="flex items-center gap-4">
                         <div id="theme-btn" class="theme-toggle" title="Toggle Theme">
-                            <svg class="w-6 h-6 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="w-6 h-6 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="w-6 h-6 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>
                         </div>
                         <button class="bg-starlight text-black px-8 py-2.5 rounded-full font-bold glow-blue hover:scale-105 transition border-none">Play Now</button>
@@ -129,7 +129,7 @@
                 <!-- Mobile Actions -->
                 <div class="flex items-center gap-4 md:hidden hamburger-left">
                     <div id="theme-btn-mobile" class="theme-toggle" title="Toggle Theme">
-                        <svg class="w-6 h-6 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="w-6 h-6 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="w-6 h-6 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>
                     </div>
                     <div class="hamburger">

package/examples/gradient-test.html

@@ -116,11 +116,6 @@
     </div>
 
     <script>
-        function toggleTheme() {
-            const body = document.body;
-            if (body.classList.contains('theme-blue-peach')) {
-                body.classList.replace('theme-blue-peach', 'theme-purple-via');
-            } else {
                 body.classList.replace('theme-purple-via', 'theme-blue-peach');
             }
         }