diff --git a/docs/site/components/use-color-scheme.tsx b/docs/site/components/use-color-scheme.tsx
index d9c711fe11606..0b6c537bb415a 100644
--- a/docs/site/components/use-color-scheme.tsx
+++ b/docs/site/components/use-color-scheme.tsx
@@ -21,6 +21,9 @@ export function useColorScheme(): ColorScheme {
 
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
+    // Set initial value on mount (SSR defaults to "light", so we need to sync)
+    setColorScheme(mediaQuery.matches ? "dark" : "light");
+
     const handleChange = (event: MediaQueryListEvent): void => {
       setColorScheme(event.matches ? "dark" : "light");
     };