Theme Toggle Ink
AI Pass+design-system#switch#theme
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Design System component
About Theme Toggle Ink
A design-system switcher — the whole sheet is printed twice, light and dark, and a slanted roller edge sweeps the second sheet across the page from the thumb's side.
Features
- The press — the page exists as two settled sheets (paper and ink) and a brayer's slanted edge reveals one over the other, so nothing on the page or the control ever tweens
- The real control sits under its inked copy; hover, press and focus are mirrored onto the copy with :has(), and the letterpress plate (a hard offset slab) inverts with the sheet
- Radius follows the system: card role for the plate, switch-track role for the rail, concentric knob; 2px rules on the 3:1 accent tier per sheet
- WCAG AA measured on both sheets at rest and mid-sweep: title/copy/eyebrow/status ≥4.5:1, choices ≥4.5:1 on the card, rules/knob/plate ≥3:1, on all published systems; live status region; reduced motion
Customise it with AI
Open Theme Toggle Ink in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the design system is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Profile Dropdown Menu
ReactVanilla
A profile dropdown led by an identity header for the signed-in account, with quick actions and soft key-chip shortcut hints, a What's new discovery item, a switch-account list of the other accounts with a hover switch arrow, a dark mode toggle row grouped above the error-weighted sign-out action — fully token-driven and design-system agnostic.
#account-switcher#dark-mode#responsive
Bento Grid
ReactVanilla
A responsive bento grid layout with asymmetric skeleton cells, dark/light theme toggle, and full design-system token integration — mobile-first and design-system agnostic.
#layout#bento#grid
Correspondence Dropdown Menu
VanillaReact
A porcelain-studio WAI-ARIA menu-button dropdown: a glazed sheet with a second slab peeking from beneath, uppercase running heads, double-rule dividers, stamped mono keycap hints, petrol glaze-wash row states and full keyboard navigation — themed as a studio bureau's correspondence menu.
#dropdown-menu#menu
Flip Card
ReactVanilla
A 3D flip credit card. The front shows an embossed number, an EMV chip, a contactless glyph and duo-tone network marks; clicking or pressing Enter rotates it on the Y axis to reveal the magnetic stripe, an Allura signature panel and the CCV.
#payment#flip#3d
Spinner
VanillaReact
A token-driven loading panel with a dual-ring spinner, an indeterminate progress track, and a smooth transition to a success state — fully design-system agnostic.
#loader#spinner#loading
Radio Group
VanillaReact
A token-driven card-style radio group where selecting a card highlights it with a check indicator, built on native radios for inherent arrow-key navigation.
#checkbox#radio#cards
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
