feat: add keyboard shortcut for toggling theme in ThemeProvider component

Author: Aniket-508

components/theme-provider.tsx

@@ -1,6 +1,39 @@
 "use client";
 
-import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
+import { useEffect } from "react";
+
+const ThemeShortcut = () => {
+  const { setTheme, resolvedTheme } = useTheme();
+
+  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 const ThemeProvider = ({
   children,
@@ -14,6 +47,7 @@ export const ThemeProvider = ({
     enableColorScheme
     {...props}
   >
+    <ThemeShortcut />
     {children}
   </NextThemesProvider>
 );