Foundations
Light, dark and system themes
Theme preference belongs to this device and updates the document’s dark class and native color scheme.
On this page
Theme model
| Preference | Result |
|---|---|
| light | Always native light classes |
| dark | Always native dark classes |
| system | Follows prefers-color-scheme and changes when the OS preference changes |
| Storage | sonarist-theme; legacy helpdesk-theme accepted as fallback |
| Initial paint | Root inline script reads storage before rendering |
| React state | useSyncExternalStore observes storage and sonarist-theme-change |
Capture policy
Both implemented themes are captured. Each isolated browser context seeds sonarist-theme before navigation and uses the matching browser color scheme. The capture process asserts the document class, waits for fonts, and retains the source theme control rather than recoloring screenshots.
There is no claim of account-wide sync. The preference is browser localStorage; the source applies changes without a server mutation.
Source references
| File | Responsibility |
|---|---|
| components/theme-toggle.tsx | Preference subscription, updates and OS listener |
| app/layout.tsx | Initial theme script |
| app/globals.css | Dark custom variant |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0