UI Skillbook
2

Theme Toggles

Animated sun and moon toggles that switch an app between light and dark mode.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-theme-toggles and follow the Siteplane Theme Toggles skill it prints for this task.

Paste this into your agent.

Theme Toggles give a header or settings row a single control for dark mode with a sun-to-moon animation. They report state only; your theme provider applies the change.

Install

bashnpx shadcn@4.18.0 add @siteplane/theme-toggles

Import it from @/siteplane/components/theme-toggles. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Toggle Group: Pick Toggle Group when people choose among light, dark and system.
  • vs Switch: Pick Switch for a labelled dark mode setting inside a settings form.

Rules

  • Drive SunMoonMorphToggle or LayeredThemeToggle so that pressed is true in dark mode, and change the theme from onPressedChange.
  • Drive pressed from your resolved theme so the icon and the app never disagree, including portalled overlays.
  • Keep the accessible name constant (default Dark mode) and let aria-pressed report the state.
  • Size it with size or let it follow the provider.

Reference

  • Theme Toggles docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Animated. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-theme-toggles

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

12 Principles of Animationby raphaelsalaja

Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.

MotionExternalGitHub stars: 42

Animateby emilkowalski

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.

MotionExternalGitHub stars: 51.4K

Animateby pbakaus

Enhance UX with purposeful animation and micro-interactions that support usability and delight.

MotionExternalGitHub stars: 95.1K

Animate Expoby emilkowalski

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

MotionExternalGitHub stars: 51.4K

Back to Siteplane UI