//
Easily enable and customize dark mode to enhance user experience in low-light environments.
ThemeProvider from xiod-ui/theme-provider and wrap your root layout. It follows prefers-color-scheme, remembers the choice in localStorage, and suppresses transitions during the swap so nothing animates between palettes. For a permanently dark site you can skip it and put class="dark" on <html> instead.1import { ThemeProvider } from "xiod-ui/theme-provider";23export default function RootLayout({ children }: { children: React.ReactNode }) {4 return (5 <html lang="en" suppressHydrationWarning>6 <body>7 <ThemeProvider>{children}</ThemeProvider>8 </body>9 </html>10 );11}useTheme hook from xiod-ui/theme-provider. It gives you the current theme, the resolvedTheme (always "light" or "dark", never "system"), and setTheme.1"use client";23import { useTheme } from "xiod-ui/theme-provider";45export function ThemeSwitcher() {6 const { theme, setTheme, resolvedTheme } = useTheme();78 return (9 <div className="flex gap-2">10 <button onClick={() => setTheme("light")}>Light</button>11 <button onClick={() => setTheme("dark")}>Dark</button>12 <button onClick={() => setTheme("system")}>System</button>1314 {/* Or a simple toggle */}15 <button onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}>16 Toggle Theme17 </button>18 </div>19 );20}