diff --git a/app/app.tsx b/app/app.tsx
index 2f3994d..984c051 100644
--- a/app/app.tsx
+++ b/app/app.tsx
@@ -16,7 +16,7 @@ import { Header } from "~/header";
  * bypassing the optimization glitch.
  */
 export const App = () => (
-	<div className="mx-auto flex min-h-screen max-w-7xl flex-col bg-gray-50 p-5 dark:bg-gray-950">
+	<div className="mx-auto flex min-h-screen max-w-7xl flex-col bg-gray-50 p-5 transition-colors duration-300 dark:bg-gray-950">
 		<Header />
 
 		<main className="flex flex-1 flex-col px-0 py-8 sm:px-2 md:px-6 lg:px-12 xl:px-20">
diff --git a/app/use-dark-mode.ts b/app/use-dark-mode.ts
index af98831..d17eb43 100644
--- a/app/use-dark-mode.ts
+++ b/app/use-dark-mode.ts
@@ -14,10 +14,7 @@ const DarkThemeStore = createStore(
  * Subscribe to changes in the dark theme store to ensure only one
  * listener updates the DOM, regardless of how many components use the hook.
  */
-DarkThemeStore.subscribe(() => {
-	// Read state directly from the store.
-	const isDark = DarkThemeStore.state;
-
+DarkThemeStore.subscribe((isDark) => {
 	if (isDark) {
 		document.documentElement.classList.add("dark");
 		return;
diff --git a/index.html b/index.html
index 5eb6d72..62e7a57 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,8 @@
       const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
       if (isDark) {
         document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
       }
     </script>