Theme

ThemeProvider

React context provider for light, dark, and system theme — toggles html.dark and persists manic-theme.

<ThemeProvider>

Wrap your tree once (typically around Router in app/main.tsx) so useTheme, ThemeToggle, and CSS dark class toggling work.

import {  } from 'manicjs';
import {  } from 'manicjs';

<>
  <>
    < />
  </>
</>

Props

Prop

Type


Behavior

DetailImplementation
PersistenceReads/writes localStorage key manic-theme (light | dark | system).
DOMAdds/removes dark on <html> via applyTheme.
SystemListens for prefers-color-scheme when preference is system.

Imports

import { ThemeProvider } from 'manicjs';
import { ThemeProvider } from 'manicjs/theme';

See also

On this page