feat(theme): toggle the theme with d

src/components/providers.tsx

@@ -8,6 +8,7 @@ import {
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { useState } from "react";
 
+import { ThemeShortcut } from "@/components/theme-shortcut";
 import { TooltipProvider } from "@/registry/bases/radix/ui/tooltip";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
@@ -27,7 +28,10 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     <QueryClientProvider client={queryClient}>
       <NextThemesProvider {...props}>
         <TooltipProvider delayDuration={120}>
-          <NuqsAdapter>{children}</NuqsAdapter>
+          <NuqsAdapter>
+            <ThemeShortcut />
+            {children}
+          </NuqsAdapter>
         </TooltipProvider>
       </NextThemesProvider>
     </QueryClientProvider>

src/components/theme-shortcut.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import * as React from "react";
+
+import { useAsRef } from "@/hooks/use-as-ref";
+import { getIsEditableTarget } from "@/lib/utils";
+
+export function ThemeShortcut() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const resolvedThemeRef = useAsRef(resolvedTheme);
+
+  React.useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.defaultPrevented || event.repeat || !event.key) return;
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.key.toLowerCase() !== "d") return;
+      if (getIsEditableTarget(event.target)) return;
+
+      event.preventDefault();
+      setTheme(resolvedThemeRef.current === "dark" ? "light" : "dark");
+    }
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [resolvedThemeRef, setTheme]);
+
+  return null;
+}

src/lib/utils.ts

@@ -13,3 +13,14 @@ export function getAbsoluteUrl(path: string) {
 
   return `${baseUrl}${normalizedPath}`;
 }
+
+export function getIsEditableTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) return false;
+
+  return (
+    target.isContentEditable ||
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target instanceof HTMLSelectElement
+  );
+}