ActionsLiquid Glass
Theme Toggle
Light and dark mode switch for app chrome and docs. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add theme-toggleLight / dark switch
About this component
Theme Toggle is part of Actions. Light and dark mode switch for app chrome and docs.
Install with npx @intellihelper/cli@latest add theme-toggle. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Theme Toggle
Use when
- Use Theme Toggle when light and dark mode switch for app chrome and docs.
- Primary and secondary actions in product chrome or content panels.
- Copy, theme, or toggle interactions that should feel native to Liquid Glass.
Avoid when
- Navigation between major app sections — prefer links or navigation components.
- Destructive multi-step workflows without confirmation (pair with alert-dialog).
Accessibility notes
- Buttons must remain keyboard focusable with a visible focus ring.
- Disabled actions should use disabled semantics, not click handlers that no-op.
- Icon-only buttons require an accessible name.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Use content-layer variants for primary CTAs; chrome variants for toolbars.
- Group related actions with consistent size and shape (pill vs rounded).