# Theme Toggle Orb

> An eclipse orb: the disc is the celestial body itself — a night face slides across the sun with a hard terminator while night spreads over the page outward from the orb.

- Category: Switch
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Odyssey
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: theme
- Page: https://builder.atheros.ai/components/theme-toggle-orb
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_theme_toggle_orb/preview-ca7268199631.webp

## Features

- Eclipse flip — the moon's disc crosses the sun on a hard terminator, so no frame ever shows a glyph on a mid-tone ground
- Night spreads over the page as a hard-edged circle from the orb; the accent rim steps with it instead of tweening
- WCAG: sun/moon ≥3:1 on their own face at rest and hover, rim and focus ring ≥3:1 on the page ground, in both themes on all published systems
- Accessible switch semantics with a live status region; persisted preference with system fallback; RTL mirror; reduced motion

## Common questions

**Which frameworks is Theme Toggle Orb available in?**

Theme Toggle Orb ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Theme Toggle Orb switch component free?**

Theme Toggle Orb is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Theme Toggle Orb support dark mode?**

Yes. Theme Toggle Orb ships light and dark themes, both drawn from the Odyssey design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Theme Toggle Orb live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/theme-toggle-orb

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt