themer - GitLite

KO | EN

gitlite — search

#codex #cli #chatbot #open-source #ai-agent #golang #tailwindcss #ui #http #cloud-native

themer

(★ 32)

Theming library for tanstack start and router

File Explorer

ZIP Download

- - docs.yml
  - release.yml
- settings.json
- - favicon.ico
  - googlee9b5eaecdbd3f747.html
  - logo.png
  - robots.txt
  - tanstack.png
- - router.tsx
  - routeTree.gen.ts
  - styles.css
- .gitignore
- package.json
- pnpm-lock.yaml
- prestige.config.ts
- README.md
- tsconfig.json
- vite.config.ts
- - index.tsx
  - routeTree.gen.ts
  - style.css
- index.html
- - cookie-storage-script.ts
  - local-storage-script.ts
  - session-storage-script.ts
  - theme-script.tsx
- - cookie-storage.ts
  - local-storage.ts
  - session-storage.ts
  - storage.ts
- dom-utils.ts
- index.ts
- ssr.test.tsx
- theme.tsx
- types.ts
- MyButton.test.tsx
- - content-assets.mjs
  - content-modules.mjs
  - content.d.ts
  - data-store.json
  - settings.json
  - types.d.ts
.gitignore
AGENTS.md
CHANGELOG.md
CLAUDE.md
LICENSE
logo.png
package.json
pnpm-lock.yaml
README.md
tsconfig.json
tsdown.config.ts
vite.config.ts

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

Command Glossary

Commands referenced in this DOCs, explained below.

🔍

`pnpm`

View Details ▼

Fast, disk space efficient package manager for Node.js.
Manage Node.js projects and their module dependencies.

pnpm init

Create a `package.json` file:

pnpm {{[i|install]}}

Download all the packages listed as dependencies in `package.json`:

pnpm add {{module_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <h1>Themer</h1>
  <p>Theme management for TanStack Router and TanStack Start.</p>
</div>

<div align="center">

[![NPM Version](https://img.shields.io/npm/v/@lonik/themer)](https://www.npmjs.com/package/@lonik/themer)
[![License](https://img.shields.io/npm/l/@lonik/themer)](https://github.com/lukonik/themer)

</div>

## Docs

Full documentation is available at [lukonik.github.io/themer](https://lukonik.github.io/themer).

## Install

```bash
pnpm add @lonik/themer
```

## Quick Usage

Wrap your app with `ThemeProvider`:

```tsx
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:

```tsx
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

```tsx
<ThemeProvider
  themes={["light", "dark", "ocean"]}
  defaultTheme="system"
  storage="localStorage"
>
  <App />
</ThemeProvider>
```

For API details and guides, see the [documentation site](https://lukonik.github.io/themer).