Theme
A simple theme provider for any React or Next.js application to toggle between light and dark mode preferences.
Installation
bun add @nordaun/theme
Usage
Provider
/providers/theme.tsx
| 1 | import { ThemeProvider } from "@nordaun/theme"; |
| 2 | |
| 3 | export function ProviderComponent({ children }: { children: React.ReactNode }) { |
| 4 | return ( |
| 5 | <ThemeProvider |
| 6 | cookieName="THEME" |
| 7 | defaultTheme="system" |
| 8 | enableSystem |
| 9 | disableTransition |
| 10 | > |
| 11 | {children} |
| 12 | </ThemeProvider> |
| 13 | ); |
| 14 | } |
Hook
/hooks/theme.tsx
| 1 | import { useTheme } from "@nordaun/theme"; |
| 2 | |
| 3 | const { theme, themes, setTheme } = useTheme(); |
| 4 | console.log("Current theme:", theme); |
| 5 | console.log("All avialable themes:", themes); |
| 6 | setTheme("system"); |