theme-provider

1"use client"
2 
3import * as React from "react"
4import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
5 
6function ThemeProvider({
7  children,
8  ...props
9}: React.ComponentProps<typeof NextThemesProvider>) {
10  return (
11    <NextThemesProvider
12      attribute="class"
13      defaultTheme="system"
14      enableSystem
15      disableTransitionOnChange
16      {...props}
17    >
18      <ThemeHotkey />
19      {children}
20    </NextThemesProvider>
21  )
22}
23 
24function isTypingTarget(target: EventTarget | null) {
25  if (!(target instanceof HTMLElement)) {
26    return false
27  }
28 
29  return (
30    target.isContentEditable ||
31    target.tagName === "INPUT" ||
32    target.tagName === "TEXTAREA" ||
33    target.tagName === "SELECT"
34  )
35}
36 
37function ThemeHotkey() {
38  const { resolvedTheme, setTheme } = useTheme()
39 
40  React.useEffect(() => {
41    function onKeyDown(event: KeyboardEvent) {
42      if (event.defaultPrevented || event.repeat) {
43        return
44      }
45 
46      if (event.metaKey || event.ctrlKey || event.altKey) {
47        return
48      }
49 
50      if (event.key.toLowerCase() !== "d") {
51        return
52      }
53 
54      if (isTypingTarget(event.target)) {
55        return
56      }
57 
58      setTheme(resolvedTheme === "dark" ? "light" : "dark")
59    }
60 
61    window.addEventListener("keydown", onKeyDown)
62 
63    return () => {
64      window.removeEventListener("keydown", onKeyDown)
65    }
66  }, [resolvedTheme, setTheme])
67 
68  return null
69}
70 
71export { ThemeProvider }