feat: implement automatic dark mode preference on page load

davianrathod · davianrathod · commit 225105571970 · 2026-02-15T06:15:57.000+05:30
diff --git a/davian-space-site/index.html b/davian-space-site/index.html
@@ -53,6 +53,16 @@
       href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
+    <!-- Prevent flash of light mode - apply dark class immediately -->
+    <script>
+      (function() {
+        const stored = localStorage.getItem('davian-space-theme');
+        // Default to dark mode
+        if (!stored || stored === 'dark') {
+          document.documentElement.classList.add('dark');
+        }
+      })();
+    </script>
   </head>
   <body class="antialiased">
     <!-- Structured Data (JSON-LD) for SEO -->
diff --git a/davian-space-site/src/hooks/useTheme.js b/davian-space-site/src/hooks/useTheme.js
@@ -6,15 +6,14 @@ export const useTheme = () => {
   const [theme, setTheme] = useState("dark");
 
   useEffect(() => {
-    // Prefer stored theme, fallback to system preference.
+    // Prefer stored theme, default to dark mode if not set.
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored) {
       setTheme(stored);
-      return;
+    } else {
+      // Default to dark mode
+      setTheme("dark");
     }
-
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    setTheme(prefersDark ? "dark" : "light");
   }, []);
 
   useEffect(() => {
