fix mismatch

src/components/DarkModeToggle.tsx

@@ -1,4 +1,4 @@
-import { Show } from "solid-js";
+import { Show, createSignal, onMount } from "solid-js";
 import MoonIcon from "./icons/MoonIcon";
 import SunIcon from "./icons/SunIcon";
 import { Typewriter } from "./Typewriter";
@@ -6,12 +6,21 @@ import { useDarkMode } from "~/context/darkMode";
 
 export function DarkModeToggle() {
   const { isDark, toggleDarkMode } = useDarkMode();
+  const [mounted, setMounted] = createSignal(false);
+
+  onMount(() => {
+    setMounted(true);
+  });
 
   return (
     <button
       onClick={toggleDarkMode}
       class="hover:bg-surface0 flex w-full items-center gap-3 rounded-lg p-3 transition-all duration-200 ease-in-out hover:scale-105"
       aria-label="Toggle dark mode"
+    >
+      <Show
+        when={mounted()}
+        fallback={<div style={{ width: "24px", height: "24px" }} />}
       >
         <Show
           when={isDark()}
@@ -19,13 +28,19 @@ export function DarkModeToggle() {
         >
           <MoonIcon size={24} fill="var(--color-text)" />
         </Show>
+      </Show>
       <span class="text-lg font-semibold">
+        <Show
+          when={mounted()}
+          fallback={<span style={{ visibility: "hidden" }}>Dark Mode</span>}
+        >
           <Show
             when={isDark()}
             fallback={<Typewriter keepAlive={false}>Light Mode</Typewriter>}
           >
             <Typewriter keepAlive={false}>Dark Mode</Typewriter>
           </Show>
+        </Show>
       </span>
     </button>
   );

src/context/darkMode.tsx

@@ -49,7 +49,13 @@ export const DarkModeProvider: ParentComponent = (props) => {
   // Initialize with correct theme synchronously
   const [isDark, setIsDark] = createSignal(getInitialTheme());
 
+  // Force update immediately on client to fix hydration mismatch
   onMount(() => {
+    const actualTheme = getInitialTheme();
+    if (isDark() !== actualTheme) {
+      setIsDark(actualTheme);
+    }
+
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
     // Listen for system theme changes