Theme

ThemeToggle

Accessible button that toggles light/dark — optional render prop for icons.

<ThemeToggle />

Pre-built button wired to useTheme().toggle. Supplies aria-label based on isDark.

import {  } from 'manicjs';

export function () {
  return (
    <>
      < ="rounded-lg px-3 py-1 border" />
    </>
  );
}

Custom content

import {  } from 'manicjs';

<>
  {() => ( === 'dark' ? 'Light mode' : 'Dark mode')}
</>;

Props (ThemeToggleProps)

Prop

Type


Imports

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

See also

On this page