Built-in dark/light/system theme — ThemeProvider, useTheme, ThemeToggle, initTheme.

Theme API

Manic ships a minimal theme system: ThemeProvider + useTheme + ThemeToggle, plus initTheme on the manicjs/theme entry.

Exports

Wrap app — context + localStorage + html.dark

Hook: theme, resolvedTheme, setTheme, toggle, isDark/isLight

Accessible toggle button + optional render prop

Apply stored preference before paint manicjs/theme only

import { ThemeProvider, useTheme, ThemeToggle } from 'manicjs';
import { initTheme } from 'manicjs/theme';

Manic toggles the dark class on <html> — pair with darkMode: 'class' in Tailwind v4 setup.

Optional CSS hooks used by built-in error shells:

:root {
  --manic-theme: light;
  --manic-is-dark: 0;
}

:root.dark {
  --manic-theme: dark;
  --manic-is-dark: 1;
}

User preference is stored under localStorage['manic-theme'] (light | dark | system).