Theme settings

The theme system is driven by the shared shadcn token palette and the app settings stored in the database. The settings page exposes the editable values, while the shell reads them to keep the whole UI consistent.

Color system

The theme settings page controls the core palette used across the landing page, the shell, and the setup pages. Any change to the shared colors should be reflected everywhere, without requiring a separate override per route.

Saved values

Primary, background, and foreground tokens
Sidebar tone and border tokens
Radius and focus ring consistency

Dark mode defaults

Dark mode is the default for the product. Light mode still exists for accessibility and previews, but the saved theme should keep dark mode aligned with the shell by default.

Open theme settings

What to keep in sync

Background colors

App background
Card surface
Sidebar surface

Active item background
Muted label color
Primary action emphasis

Ring colors

Focus rings
Input borders on hover
Validation states

Theme radius

Panel rounding
Button and input corner consistency
Card and sheet radius alignment

Implementation note

When a theme value is saved, the app should propagate the change through the shared settings layer so the landing page, dashboard shell, and setup pages stay aligned.