Themes

Each workspace can override the app’s palette and branding, so a deployment can match a customer’s identity without a fork.

Themes are managed in the app under theme settings, and the active theme is served to the frontend at runtime — a change applies without a redeploy.

Light and dark

Themes define both modes. Set colors explicitly for each rather than assuming one and letting the other inherit: values that look right in dark mode routinely fail contrast in light.

Working with themes in custom pages

Pages render inside the app’s MUI theme provider, so components pick up the active theme automatically.

Set color via component props or scoped sx, not via global CSS or inherited body styles — global overrides do not re-evaluate on a light/dark toggle and go stale the moment a user switches.

// Follows the active theme
<Typography color="text.secondary">Updated just now</Typography>

// Goes stale on toggle
<div style={{ color: "#a1a1aa" }}>Updated just now</div>