Foundations
System, light, and dark appearance
Theme is implemented across the app and stored locally, independently of account saves.
On this page
Theme lifecycle
| Step | Source behavior |
|---|---|
| Before paint | themeScript reads teachkit-theme and resolves system preference. |
| Hydration | ThemeProvider synchronizes preference, data-theme, and colorScheme. |
| Explicit selection | ThemeSelect offers System, Light, and Dark. |
| Quick switch | ThemeToggle writes an explicit light/dark override; it does not return to System. |
| Device and tabs | matchMedia change and storage events resynchronize the provider. |
| Storage unavailable | Reads/writes are caught; the current in-memory choice still works. |
| Marketing | No implemented dark theme; app dark examples remain images inside a light page. |
Theme coverage and exceptions
Semantic backgrounds, text, focus, selected rows, and neutral utilities change together. Some literal colors remain: turquoise primary actions, provider colors, gold review accents, and switch off-state backgrounds. Capture both themes independently; a working provider does not prove every literal color combination is readable.
Source references
| File | Responsibility |
|---|---|
| src/lib/theme.ts | Pre-paint script |
| src/components/ThemeProvider.tsx | Preference state and controls |
| src/app/layout.tsx | Script installation |
| src/app/globals.css | Theme cascade |
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