Stabilize dark mode + transitions

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">

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;

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>