Themes
A set of utilities and components for managing application themes (light, dark, system). Includes logic for switching, persisting, and applying themes dynamically.
Configuration
Make sure to add ThemeProvider into your project's main layout right as the first child of <body>.
app/layout.tsx
import { ThemeProvider, ThemeStateHidden } from "@/config/themes";
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider>
{children}
<ThemeStateHidden />
</ThemeProvider>
</body>
</html>
);
}Source Codes
Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.