56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
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,
|
|
...props
|
|
}: React.ComponentProps<typeof NextThemesProvider>) {
|
|
return (
|
|
<NextThemesProvider
|
|
attribute="class"
|
|
defaultTheme="system"
|
|
enableSystem
|
|
disableTransitionOnChange
|
|
enableColorScheme
|
|
{...props}
|
|
>
|
|
<ThemeShortcut />
|
|
{children}
|
|
</NextThemesProvider>
|
|
)
|
|
}
|