Theme controller

One controller applies preferences across routes and keeps system-mode changes current.

On this page

Purpose and placement

One controller applies preferences across routes and keeps system-mode changes current.

Anatomy

theme-light / theme-dark root classes
dark utility class
Accent CSS variables
Wallpaper ready/loading classes

Contract

Contract
Input or boundary	Behavior
Preference load	GET /api/preferences on mount/path changes until loaded
System	matchMedia prefers-color-scheme listener
Events	startboard-theme preference/accent/backgroundImage
Anonymous	Use system preference; disable preference persistence

States and feedback

Before preferences loaded
Explicit light/dark
System change
Anonymous response
Wallpaper load/error

Interaction and composition

ThemeProvider renders no visible element. It updates root classes and CSS properties; AppHome also applies initial theme/accent in a layout effect. Keep those paths aligned when changing accent logic.

Responsive behavior

Same roles apply at all sizes. Public-board AccentApplier uses viewer system theme rather than the owner’s explicit theme.

Accessibility contract

Theme selection should retain readable foreground/background pairs and not carry state only through color. Observe contrast over alpha surfaces and wallpapers.

Known implementation gaps

Failed preference loads can retry on subsequent routes. Wallpaper URLs are fetched from a provider-backed catalog, which is excluded from this offline capture.

Source references

Source references
Repository file	Responsibility
components/ThemeProvider.tsx	Controller
app/(home)/AppHome.tsx	Initial dashboard application
app/board/[id]/AccentApplier.tsx	Public-board scope

Examples from the app

Actual Startboard source UI with isolated fictional records; both native themes at 2× resolution or higher. No live integrations or account writes. Captured at 2× resolution or higher. Select an image to inspect it full size.