Neo-Brutal Theme Toggle
The light/dark switch: the navbar's ghost icon key, the moon and sun swapping with a small pop.
Live, interactive React component · light themeResponsive
About the Soft Bento Theme Toggle
The light/dark switch for a navbar. Both icons and both labels are in the server HTML and CSS shows the pair for <html data-theme>, so nothing flashes and hydration matches; the choice is saved. Client component.
It is part of Soft Bento. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
See it on a full page
Noir Aurora Theme Toggle
The Night/Day switch for a navbar or footer (a ghost icon button: the sun and moon crossfade with a quarter turn).
Swiss Tech Mono Theme Toggle
The light/dark switch for a navbar.