- Folder
- src/components/ThemeToggle/
- Props
- size: auto | text | icon (default auto; auto drops the word on phone)
- Switches the nearest [data-scheme] ancestor, otherwise html[data-theme] and tj-theme
- Tokens
- Dot 10 px: Tangerine fill in dark, 2 px Text ring in light
- Word: mono label, Text Muted at rest, Text on hover, focus and pressed; both words render and CSS shows the one for the scheme
- Line border at rest, Surface Lift fill on hover and when pressed, full radius
- Motion
- Color 150 ms standard; dot scales to 0.6 over 75 ms while pressed
- Site switch: View Transitions circle from the toggle, 500 ms out curve
- 300 ms crossfade without View Transitions; instant under reduced motion
- Accessibility
- No aria-pressed; the name states the current theme then the action, so the visible word is contained (2.5.3)
- Min 44 x 44 px hit area, icon form included
- Dot is hidden from screen readers