Full documentation is available at lukonik.github.io/themer.
pnpm add @lonik/themerWrap your app with ThemeProvider:
import { Outlet, createRootRoute } from "@tanstack/react-router";
import { ThemeProvider } from "@lonik/themer";
export const Route = createRootRoute({
component: () => (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider>
<Outlet />
</ThemeProvider>
</body>
</html>
),
});Use useTheme to read and update the current theme:
import { useTheme } from "@lonik/themer";
export function ThemeToggle() {
const { theme, setTheme } = useTheme();
return (
<button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
Current theme: {theme}
</button>
);
}<ThemeProvider
themes={["light", "dark", "ocean"]}
defaultTheme="system"
storage="localStorage"
>
<App />
</ThemeProvider>For API details and guides, see the documentation site.