@lonik/themer
v0.5.4
Published
Theme management for TanStack Router and TanStack Start.
Maintainers
lonikReadme
Docs
Full documentation is available at lukonik.github.io/themer.
Install
pnpm add @lonik/themerQuick Usage
Wrap 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>
);
}Example
<ThemeProvider
themes={["light", "dark", "ocean"]}
defaultTheme="system"
storage="localStorage"
>
<App />
</ThemeProvider>For API details and guides, see the documentation site.