Components
Appearance controls
A quick light/dark switch and a persistent three-way preference.
On this page
Purpose and composition
ThemeToggle belongs in the header. ThemeSelect belongs in account appearance settings and provides the System option.
Anatomy
- Named switch with sun/moon icon
- Theme-aware track and thumb
- System / Light / Dark select
Configuration and variants
| Input or variant | Contract |
|---|---|
| Provider | Mount under ThemeProvider in ClientLayout. |
| Storage | teachkit-theme stores the preference locally. |
| Resolution | System follows matchMedia; explicit choices override it. |
States and feedback
Light and dark specimens show the same controls. An unavailable storage API does not prevent an in-memory change.
Interaction and responsive behavior
The header switch selects the opposite resolved theme explicitly. Use the select to return to System. Cross-tab storage changes synchronize the provider.
Accessibility and known limits
The switch has a 60×44px hit area and a stable Dark mode name, checked state, and a changing tooltip. Keep the pre-paint script and provider rules synchronized to avoid a flash of the wrong appearance.
Source references
| File | Responsibility |
|---|---|
| src/components/ThemeProvider.tsx | Controls and state |
| src/lib/theme.ts | Before-paint resolution |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0