Update index.html

vin-im · vin-im · commit 59df087f6c10 · 2025-01-27T17:36:30.000-07:00
Fixed the dumb theme toggle icon that was being extra dumb by showing the wrong dumb icon. Now the dumbly simple toggle correctly shows a bright dumb sun in dark mode (because we're not that bright) and a dumb moon in light mode (ironically). Used JavaScript-based icon swapping because CSS classes were being too dumb to cooperate. The toggle finally works as intended, proving that sometimes the dumbest solution is the best solution.
diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="light">
+<html lang="en" class="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -79,10 +79,8 @@
     <div class="container mx-auto px-4 py-8">
         <div class="flex justify-center items-center mb-8 relative">
             <h1 class="text-4xl font-bold text-gray-800">DumbWhois</h1>
-            <button onclick="toggleDarkMode()" class="absolute right-0 p-2 rounded-lg bg-gray-200 dark:bg-gray-700">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                </svg>
+            <button onclick="toggleDarkMode()" class="absolute right-0 p-2 rounded-lg text-gray-800 dark:text-gray-200">
+                <span id="themeIcon"></span>
             </button>
         </div>
         
@@ -110,16 +108,34 @@ <h1 class="text-4xl font-bold text-gray-800">DumbWhois</h1>
     </div>
 
     <script>
+        const sunIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>`;
+        
+        const moonIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>`;
+
+        function updateThemeIcon() {
+            const isDark = document.documentElement.classList.contains('dark');
+            document.getElementById('themeIcon').innerHTML = isDark ? sunIcon : moonIcon;
+        }
+
         function toggleDarkMode() {
             const html = document.documentElement;
             const isDark = html.classList.contains('dark');
             html.classList.toggle('dark');
             localStorage.setItem('darkMode', !isDark);
+            updateThemeIcon();
         }
 
-        if (localStorage.getItem('darkMode') === 'true') {
-            document.documentElement.classList.add('dark');
+        // Check local storage, default to dark mode if not set
+        if (localStorage.getItem('darkMode') === 'false') {
+            document.documentElement.classList.remove('dark');
         }
+        
+        // Set initial icon
+        updateThemeIcon();
 
         function formatDate(dateString) {
             return dateString ? new Date(dateString).toLocaleString() : 'N/A';
