TeachKit project

TeachKit / Design system

Documentation v2.0.0 · Redesigned app and marketing site

Design system contents

Patterns

Change appearance

Give the workspace a predictable preference across visits and tabs.

On this page

Task sequence

  • Use the header toggle for an immediate explicit light/dark choice.
  • Use Account → Appearance to choose System, Light, or Dark.
  • Persist the choice under teachkit-theme.
  • Resolve System against device preference and synchronize storage changes across tabs.

Data and persistence boundary

Appearance is local preference state, not part of the account form’s save transaction. The before-paint script and provider must follow the same resolution logic.

Failure and recovery

Storage errors are caught and the in-memory preference still applies. Verify fixed-color controls separately in dark mode.

Source references

Source references
FileResponsibility
src/components/ThemeProvider.tsxPreference lifecycle
src/lib/theme.tsInitial resolution
src/app/dashboard/account/page.tsxAccount placement

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.

Account · Featured section · Light · Desktop · 2220 × 1683 px
Appearance · Component detail · Light · Desktop · 2280 × 483 px

Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0