diff --git a/packages/website/src/root.tsx b/packages/website/src/root.tsx
index 404ae2b1dce4..73416b9aa54b 100644
--- a/packages/website/src/root.tsx
+++ b/packages/website/src/root.tsx
@@ -24,6 +24,17 @@ export default function App() {
 				<Links />
 			</head>
 			<body>
+				<script
+					dangerouslySetInnerHTML={{
+						__html: `(() => {
+							const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+							const persistedColorPreference = localStorage.getItem('theme') || 'auto';
+							if (persistedColorPreference === 'dark' || (prefersDarkMode && persistedColorPreference !== 'light')) {
+								document.documentElement.classList.toggle('dark', true);
+							}
+						})();`,
+					}}
+				/>
 				<Outlet />
 				<ScrollRestoration />
 				<Scripts />
diff --git a/packages/website/unocss.config.ts b/packages/website/unocss.config.ts
index f0f81cad92e6..a7f3fd0d997d 100644
--- a/packages/website/unocss.config.ts
+++ b/packages/website/unocss.config.ts
@@ -8,9 +8,7 @@ export default defineConfig({
 		},
 	},
 	presets: [
-		presetUno({
-			dark: 'media',
-		}),
+		presetUno({ dark: 'class' }),
 		presetWebFonts({
 			provider: 'google',
 			fonts: {
