vartheme
MyApp
HomeDocs
Start
Active Theme
Default
Bundle Size
~7kb
Zero dependencies
Quick Start
import { ThemeProvider }
from 'vartheme'

<ThemeProvider
theme="default"
>
Theme Toggle
🌙
Dark
Auto saved
Built-in Themes
Default
Ocean
Forest
Sunset
Rose
v0.1.0 — Now Live on npm

Dark mode for React, finally simple.

Zero config, CSS variable based theme switching. 5 beautiful themes. Animated toggle. Under 7kb.

$npm install vartheme

Everything you need, nothing you don't.

vartheme is focused, small, and does one thing really well — beautiful theming with zero effort.

⚡
Zero Config
No setup, no configuration. Just wrap your app and you're done.
🎨
5 Built-in Themes
Default, Ocean, Forest, Sunset, Rose — beautiful out of the box.
🌙
Animated Toggle
Smooth sun to moon animation. No external icon library needed.
💾
Persistent
Theme saved in localStorage. Survives page refresh automatically.
🖥️
System Detection
Detects OS dark/light preference and applies it automatically.
📦
Under 7kb
Tiny bundle size. Won't slow down your app. Zero dependencies.
🔷
TypeScript Ready
Full TypeScript support with types included out of the box.
🎯
CSS Variables
Auto injects CSS variables. Use them anywhere in your styles.
⭐
—
GitHub Stars
📦
— / month
npm Downloads
⚡
—kb
Bundle Size
🎯
—
Dependencies

Simple by design.

Get started in minutes. No boilerplate, no complexity.

01 — Install

BASH
1
npm install vartheme

02 — Wrap your app

TSX
1
import { ThemeProvider, ThemeToggle } from 'vartheme'
2


3
export default function App() {
4
  return (
5
    <ThemeProvider theme="ocean" mode="dark">
6
      <YourApp />
7
    </ThemeProvider>
8
  )
9
}

03 — Use the hook

TSX
1
import { useThemeContext } from 'vartheme'
2


3
function Navbar() {
4
  const { resolvedMode, toggle, setTheme } = useThemeContext()
5


6
  return (
7
    <div>
8
      <button onClick={toggle}>
9
        {resolvedMode === 'dark' ? '☀️' : '🌙'}
10
      </button>
11


12
      <button onClick={() => setTheme('ocean')}>
13
        Ocean
14
      </button>
15
    </div>
16
  )
17
}

04 — Use CSS variables

CSS
1
.card {
2
  background: var(--vt-surface);
3
  color: var(--vt-text);
4
  border: 1px solid var(--vt-border);
5
}
6


7
.button {
8
  background: var(--vt-primary);
9
  color: white;
10
}