fix: mode switcher toggle

apps/v4/app/(create)/preview/[base]/[name]/page.tsx

@@ -135,7 +135,7 @@ export default async function BlockPage({
   }
 
   return (
-    <div className="relative">
+    <div className="relative bg-background">
       <PreventScrollOnFocusScript />
       <PreviewStyle />
       <ActionMenuScript />

apps/v4/components/mode-switcher.tsx

@@ -34,32 +34,6 @@ export function ModeSwitcher({
     setTheme(resolvedTheme === "dark" ? "light" : "dark")
   }, [resolvedTheme, setTheme])
 
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (
-        (e.key === "d" || e.key === "D") &&
-        !e.metaKey &&
-        !e.ctrlKey &&
-        !e.altKey
-      ) {
-        if (
-          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
-          e.target instanceof HTMLInputElement ||
-          e.target instanceof HTMLTextAreaElement ||
-          e.target instanceof HTMLSelectElement
-        ) {
-          return
-        }
-
-        e.preventDefault()
-        toggleTheme()
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => document.removeEventListener("keydown", down)
-  }, [toggleTheme])
-
   return (
     <Tooltip>
       <TooltipTrigger asChild>

apps/v4/components/theme-provider.tsx

@@ -1,7 +1,39 @@
 "use client"
 
 import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
+
+function ThemeShortcut() {
+  const { setTheme, resolvedTheme } = useTheme()
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (
+        (e.key === "d" || e.key === "D") &&
+        !e.metaKey &&
+        !e.ctrlKey &&
+        !e.altKey
+      ) {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
+        e.preventDefault()
+        setTheme(resolvedTheme === "dark" ? "light" : "dark")
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [resolvedTheme, setTheme])
+
+  return null
+}
 
 export function ThemeProvider({
   children,
@@ -16,6 +48,7 @@ export function ThemeProvider({
       enableColorScheme
       {...props}
     >
+      <ThemeShortcut />
       {children}
     </NextThemesProvider>
   )