nui-theme-provider

1"use client"
2 
3import { Button } from "@/components/ui/button"
4import { RiMoonFill, RiSunFill } from "@remixicon/react"
5import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
6 
7export const ThemeToggle = () => {
8  const { theme, setTheme } = useTheme()
9 
10  const smartToggle = () => {
11    /* The smart toggle by @nrjdalal */
12    const prefersDarkScheme = window.matchMedia(
13      "(prefers-color-scheme: dark)",
14    ).matches
15    if (theme === "system") {
16      setTheme(prefersDarkScheme ? "light" : "dark")
17    } else if (
18      (theme === "light" && !prefersDarkScheme) ||
19      (theme === "dark" && prefersDarkScheme)
20    ) {
21      setTheme(theme === "light" ? "dark" : "light")
22    } else {
23      setTheme("system")
24    }
25  }
26 
27  return (
28    <Button
29      variant="ghost"
30      className="aspect-square size-full rounded-none [&_svg]:size-5"
31      onClick={smartToggle}
32      aria-label="Switch between system/light/dark version"
33    >
34      <RiSunFill className="dark:hidden" aria-hidden="true" />
35      <RiMoonFill className="hidden dark:block" aria-hidden="true" />
36    </Button>
37  )
38}
39 
40export const ThemeProvider = ({
41  children,
42  ...props
43}: React.ComponentProps<typeof NextThemesProvider>) => {
44  return (
45    <NextThemesProvider
46      attribute="class"
47      defaultTheme="system"
48      enableSystem
49      disableTransitionOnChange
50      {...props}
51    >
52      {children}
53    </NextThemesProvider>
54  )
55}